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

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

&nbsp;<br />

<br />

<br />

<br />

<br />

<strong>The</strong> most important thing to note about this remote control script is that it takes careful<br />

measures to ensure that the main content window actually exists before using it. <strong>The</strong> user<br />

might have closed the window accidentally, in which case this script reloads imageviewer.html<br />

and closes itself. You can see this script in action in Figure 16-4.<br />

Figure 16-4 : Remote control windows give you a way to move controls outside of the main<br />

browser window.<br />

Using a separate window as a menu is not the only way to move menu functionality outside of<br />

the main browser window. Slide-in menus are also often appropriate for this task.<br />

Slide-In Menus<br />

A slide-in menu is a layer containing menu items that is partially hidden off-screen, usually to<br />

the left. Only a tab or thin vertical slice of the layer remains visible to the user. When the user<br />

activates the menu by mousing over or clicking on the exposed portion, the menu slides<br />

smoothly onto the page. When the user moves the mouse away from the menu, the layer slides<br />

back to its original position off-screen.<br />

<strong>The</strong> following code illustrates the basic technique with which slide-in menus are usually<br />

implemented. <strong>The</strong> idea is to initially place the layer off the left side of the screen and then<br />

incrementally move the menu onto the screen while the mouse is over it. A timer wakes the<br />

scrolling function up at regular intervals, at which times the menu is moved slightly farther to the<br />

right. Once a predefined menu position is reached, the timer is cleared in order to stop the<br />

scrolling. When the user moves the mouse away from the menu, the scrolling function is<br />

invoked at regular intervals to move the layer back to its original position. Note that your users<br />

may find it more convenient if the menu is placed directly on the screen when activated (rather<br />

than having it slide in).

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

Saved successfully!

Ooh no, something went wrong!