A Plethora of Javascript...
Libraries of freeware javascript appeared early on in the history of the web. But these were disparate libraries written by many different authors, and not organized in any way except by categories of functions. Systems of javascript libraries appeared later. Popular ones, led early on by
Yahoo's YUI, are
dojo,
mootools,
scriptaculous and
jQuery. Google also has theirs called
GWT (Google Web Toolkit). The web development community is enthusiastically served by all of these.
JQuery is a popular "flavor" of javascript that many web teams use to organize and expedite javascript development. As they say on their homepage:
"
jQuery is a new kind of JavaScript Library. jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript." Their website has a host of tutorials that are very helpful.
At left is an example of an expandible navigation menu built with
jQuery, and based upon the behaviors of lists and links. It works perfectly in Firefox, but is quirky in IE6*.
NOTE: The top menu box slides open over top of the one below
only if it is set to
position:relative
and
z-index:2 in the css class definition. The bottom menu also has to be set to
position: absolute.
*The quirkiness of IE is based upon the browser's perception of the sensitive "hotspot" area of the mouse hover event. Firefox perceives the area as the entire div, while IE perceives it as only the text. I fixed the problem in IE by adding a repeating background gif. If you remove this gif, the menu does not unfold properly in IE - the submenu does not open unless the text itself is hovered and it does not stay open. Try it on this page in both browsers, notice the position of the pointer, and then try it
here.