I'd thought I'd update an example we covered last season using some of the DOM techniques we have learned so far. Back in the January 06 meeting I showed you how to create image rollovers using the Image object and the onMouseOut and onMouseOver event handlers. The code worked fine, but had a small problem.
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.
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.
Lightbox JS is an unobtrusive script that is used to overlay images on a web page. This 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.
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.
Modifying your markup can be as easy or as difficult as you want. Using the innerHTML or the W3C DOM methods such as createElement, appendChild and insertBefore can allow you to manipulate anything on your web page to create some very interesting effects.
These techniques allow you to further enhance the user's web experience and are part of truly creating interactive content.
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.
With HTML pages on the web you can just include the required Javascript between tags. When you validate the HTML on your web page the Javascript content is considered to be CDATA (character data) that is therefore ignored by the validator. The same is not true if you follow the more recent XHTML standards in setting up your web page. With XHTML the code between the script tags is considered to be PCDATA (parsed character data) which is therefore processed by the validator.
Because of this, you can't just include Javascript between the script tags on your page without 'breaking' your web page (at least as far as the validator is concerned).
One way to enhance a table style is to introduce a hover effect on the table rows: when the user is moving across the table with their mouse, the current row they are on will change color. This is something that you frequently see in interface design in internal web applications which help users view a particlar row of data.
