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.
When you create your CSS styles for a website you will have at least one style sheet for your layout and maybe another one for content, etc. (or just all in one). No matter how you organize your styles, every user will see your content the same.
Question: Can you give visitors a choice on how to view your content?
Answer: A JavaScript-powered style switcher is one way.
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:
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
After finishing the main topics from our book for this season, 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.
