Recent Notes

Displaying keyword search results 41 - 50
Created by James on September 03, 2010 15:52:12    Last update: January 11, 2011 20:22:40
Use the siblings function to find all siblings of the current jQuery object: $(this).siblings() which is equivalent to: $(this).parent().children().not(this) Or, use an optional selector to further limit the selection of siblings: $(this).siblings('li .hilighted') Test page: <!DOCTYPE html> <html> <head> <title>jQu...
Created by James on July 06, 2010 15:27:28    Last update: January 11, 2011 20:20:03
This example shows three jQuery icons with hover effects. <!DOCTYPE html> <html> <head> <title>jQu... Hint: mouseover an icon on the ThemeRoller page to get the CSS classname.
Created by James on July 19, 2009 20:51:23    Last update: January 11, 2011 20:14:18
If CSS3 border-image is properly supported, making a rounded corner box is very easy. You just need a round corner image like this: The following markup: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ... would render like this (try it in Firefox 3.5 and Google Chrome): However, IE as of version 8.0 does not support border-image . So until border-image is reliably supported in all major browsers, we still have to rely on tried and true tricks to make it work. In general, I found three general categories of tricks to make rounded corners: Good old tables. This trick creates a table of 9 cells and uses the 8 cells on the perimeter to render the borders and rounded corners. The central cell is used for...
Created by James on May 24, 2009 20:14:25    Last update: January 11, 2011 20:07:38
In the following HTML code, I attached an inline handler to the text field input and added two event handlers with addEventListener / attachEvent . Both IE and Firefox called the inline handler first. But the order in which the added event handlers were called are different between IE and Firefox (IE calls attached_click2 first). Further, if I add the same event handler multiple times, IE calls the handler the same number of times. But Firefox only calls the same handler once, no matter how many times it was added. <html> <body> <form> Input: <input type="... You can attach an event handler to an HTML element either inline , with JavaScript , or by calling addEventListener (DOM level 2), or attachEvent (IE specific). When you...
Created by Dr. Xi on October 26, 2010 04:47:37    Last update: January 11, 2011 20:00:36
The code presented here is a simple implementation of a tab set. It is used to demo how a tab set could be implemented. The code is stand alone and does not depend on any JavaScript libraries. Multiple tab sets within the same page is supported. The HTML markup is fairly simple: Tabs sets are contained within a DIV element with class name "tabsContainer". Define a UL list for the tabs. Follow the UL list with equal number of DIVs for the tab contents. The Nifty Corners Cube technique is used to draw the rounded corners (original form, not the enhanced JavaScript form). HTML, CSS and JavaScript: <!doctype html> <html> <head> <style typ...
Created by Dr. Xi on October 07, 2010 19:20:55    Last update: January 11, 2011 19:59:17
Like the string trim function, Firefox provides a native implementation for array map, IE doesn't. So we have to create our own map function for Array : if(typeof Array.prototype.map !== 'function') { ... Test page: <html> <head> <title>Array Map</...
Created by Dr. Xi on October 03, 2008 02:36:41    Last update: January 11, 2011 19:53:25
Demo page to retrieve the value and text of a dropdown box using JavaScript. <html> <head> <script language="JavaScript" ...
Created by Dr. Xi on October 02, 2008 21:35:59    Last update: January 11, 2011 19:51:26
This page demos a pop up window centered on the screen. In the demo tab, the pop up be centered relative to the tab panel. <html> <head> <script language="JavaScript" ...
Created by Dr. Xi on September 11, 2008 22:55:01    Last update: January 11, 2011 19:48:19
<html> <head> <script language="JavaScript">...
Created by Dr. Xi on August 21, 2007 21:25:58    Last update: January 10, 2011 22:19:09
You can grab some animated icons here: http://mentalized.net/activity-indicators/ . And here's some code to demonstrate how to use such an icon. <html> <head> <script language="JavaScript"... However, if you use Ajax and send a synchronous request, the icon won't show up at all, i.e., the following code doesn't work: function eventHandler() { startBusy(); ... This works: function eventHandler() { startBusy(); ...
Previous  1 2 3 4 5 6 7 8 9 Next