JavaScript Workshop » JavaScript

Chris Heilmann created a nice DOM Cheatsheet (.pdf) to help all us would-be JavaScript developers.

Nowadays there are many elaborate ways to create navigation to access pages on your website. Back in the early days of JavaScript, "Jump Menus" were used a lot to create simple navigation to various web pages. These have been replaced by more elaborate JavaScript menu systems that use hundreds of lines of code. This technique can still come in handy in certain situations and is good practice for anybody wanting to learn.

(read more...)

The visibilty of an element is a powerful tool that can be used in JavaScript to create everything from animations and effects to fast templating. More importantly, however, it can also be used to quickly hide an element from view, providing users with some basic user interaction capabilities.

Within CSS there are two different ways of effectively hiding an element from view; both have their benefits but can provide unintented consquences, depending on how you use them:

(read more...)

Every element in a document is an object. Every one of these objects has a whole collection of properties as we have discussed in previous meetings. There's one property called style which every element node has. It contains information about the styles attached to the element. Querying this property doesn’t return a simple string, it returns an object. Style information is stored as properties of this style object:

element.style.property

(read more...)

Depending on the browser type and configuration, pressing the Enter key while in a form does not always submit the form. Sometimes, for instance, the button that submits the form resides in another frame. In that case, adding a bit of JavaScript to ensure that the Enter key sends the form data, as well, comes in handy.

(read more...)

Inside every function in JavaScript there exists a contextual variable named arguments that acts like a pseudo-array. This object contains all the arguments passed in to the function. Arguments isn't a true array (meaning that you can't modify it, or call .push() to add new items), but you can access items in the array, and it does have a length property.

(read more...)

Lightbox JS is an unobtrusive script that is used to overlay images on a web page. As I mentioned in a previous post, this is one of the techniques you can use to create an image gallery on your website. The script uses the Prototype and Scriptaculous JavaScript libraries as well. By using functionality of these two libraries, the script produces some very nice animations in displaying your images.

(read more...)

Many sites that present tabular data use alternating background colors to increase the readability of that data. The obvious solution is to hardcode every second row to ensure it had a different background color. But if you want the table to be dynamic, meaning that it would be possible to add a new row in the middle of the table without changing the background color attribute of the rows that followed requires a little JavaScript.

(read more...)

Should you use popup windows? Popup windows have gained a bad reputation from marketers' aggressive use of them, but even requested popups can be barriers to good usability. There are situations where popping a new window is arguably the most appropriate solution. Popups are mostly used for one-page interfaces or those in which history navigation is discouraged, such as a survey or a logon page for a commercial web site.

My use for external windows (not popups) use scripting that degrades if not available. We have already discussed this issue at our unobtrusive discussion.

(read more...)