11.12.2012 Views

JavaScript 2.0-The Complete Reference, Second ... - freecodingtutorial

JavaScript 2.0-The Complete Reference, Second ... - freecodingtutorial

JavaScript 2.0-The Complete Reference, Second ... - freecodingtutorial

SHOW MORE
SHOW LESS

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

Figure 16-5: <strong>The</strong> slide-in menu in action<br />

Static Menus<br />

If you include menus in a page that has more than one screenful of content, you might consider<br />

using static menus. A static menu is one that appears in one place in a browser window at all<br />

times, regardless of any scrolling the user might undertake. As you might imagine,<br />

implementing a static menu is similar to implementing a ―normal‖ menu, except that the menu<br />

stays put on the screen despite user scrolling. While it is possible to trap scrolling events in<br />

some modern browsers, an easy cross-browser implementation of static menus can be<br />

achieved with a simple application of setInterval(). <strong>The</strong> idea is to ―wake up‖ repositioning code<br />

at regular (short) intervals.<br />

Despite the ease of implementation, the menu will appear to jump with such a technique in<br />

place. Instead, we may want to rely on the possibility of using the CSS2 position: fixed<br />

property to peg our navigation to a certain region on the screen. Unfortunately, IE6 does not<br />

support this property, but with a bit of CSS hacking one can imitate it.<br />

<strong>The</strong> repositioning code adjusts the position of the menu to some predefined location. <strong>The</strong><br />

implementation is straightforward. An onload handler for the document starts a timer that<br />

invokes makeStatic() on the menu every 30 milliseconds, and makeStatic() accepts the id (or<br />

layer name in Netscape 4) of the element that is to be repositioned. In this example, the ―menu‖<br />

is placed five pixels from the top-left of the screen, but this position can be easily changed.<br />

To remind you of the trouble with DHTML-based solutions, we implement this particular<br />

example not only in DOM style, but in the IE document.all and Netscape 4 layers style as one<br />

final reminder of the challenges with <strong>JavaScript</strong>-based navigation.<br />

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!