Return to Main Menudzigns by ShivSpacer


Click Button
Explanation

(This Script is Netscape6 Compliant)
Posted - April, 2002.

>> DOWNLOAD SCRIPT HERE <<


Let me admit, this isn't much different from the "Top Scroller Menu" script posted here!! But some one requested for a similar script (paid service) - this one here is a simplified version of what we gave our client. The basic difference between this one & the Top scroller is that, this button, as you see, is Right Aligned. It could be useful to keep your visitors attention drawn to a particular service that your site offers - link directly to that page. In this example, clicking on the button will take you to our Paid Services site.

Remember, all that'll happen on older browsers (or WILL NOT happen on older browsers) is that, the menu button will not Scroll! Anyway, here's how it works.

  • As usual, the first job is to sniff out older browsers as I have done with all other DHTML Scripts.
  • Next step is to define the function name which will be executed every few milliseconds. I have called this - function menuFix().
  • Then create a Document Object for the Scrolling Button (I've named the Menu Division as myMenu). Ofcourse, you'll have to remember that this has to be expressed differently for Netscapes & Internet Explorers. And now we have yet another angle - Netscape6 supports W3C standards. So the DOM is different again for this browser. When you see the script you'll know how that's done.
  • Then, set the position relative to the viewer's monitor screen such that it adjusts automatically whenever there is a change in screen position. Again, this is different for Netscapes & Internet Explorers.
    NOTE: This is the only bit that you may wish to alter. The menubar here appears at 60 Pixels left of Left margin and 10 Pixels from top. If you want your menu to appear else where, you can do so but, then you MUST modify the script to reflect the change. The positioning is effected through Variable (var) X & Y locations (LocX & LocY). But in this script, there is the job of identifying the Width of the visitor's screen!!. This is achieved by setting a variable (in this case, I call this variable "view_width" & then let each different browser calculate that through appropriate code. See source for details. Just remember, to offset the Left position from Right Margin, you need to allow for the width of the Button Image. (In this case, the button is 50 pixels wide - so a position 70 pixels away from Right margin will leave a gap of 20 pixels from the Right Margin.

    As you'll see, the present positions are achieved through the following statements in the Script:
    menuBlock.left= (LocX+view_width-70);
    menuBlock.top= (LocY+10);

  • Finally set an interval for the script to be executed (very much like how you set "Timeout"). I have set this to 50 milliseconds.

Having taken care of the Script bit, let's take a look at how to actually include the Menu in the body.

Insert the script towards the Top of the Body & then immediately below that - the DIV call for the button, like -

<div id="myMenu" style="position:absolute;">
<-- This is where your Menu Button will go -->
</div>

That's it folks - it's all your if you want it.

Copyright DBS © 1998-2003. All Rights Reserved