Return to Main Menudzigns by ShivSpacer


Explanation

(This Script is Netscape6 Compliant)
Updated - December, 2000.


I think I should tell you that this will be my Last Free Script, either in this section or in the Cut-n-Paste section ...., no, not the last EVER, but LAST of THIS millennium!! Check back for more new Scripts in the month of January in the year 2000. Talking about that - let me wish ALL MY VISITORs a

Happy New Millenium

On to the Script now.

You must have seen this DHTML effect before - Geocities type fixed logo? An image remains fixed at a certain location even when you scroll? All that I have done is - found a way to get the same effect through a simpler script (plus the fact that, through DOCUMENT OBJECT MODEL, you can even fix a text block, not necessarily an image only) so that it becomes easier for you to modify & then used the idea to create a Webpage navigation system that can be embedded even into NO-Frames pages, as the script is reasonably small, (as I have done here) without having to think about HOW would it look/behave on older browsers or bothering to create a Frames page. All that'll happen on older browsers (or WILL NOT happen on older browsers) is that, the menu 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 Menu (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 10 Pixels from Left and 80 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). As you'll see, the present positions are achieved through the following statements in the Script:
    menuBlock.left= (LocX+10);
    menuBlock.top= (LocY+80);

    So, if you, for instance, want to position it at 0 Pixels from Left & 20 Pixels from Top, then the script should read -
    menuBlock.left= (LocX+0);
    menuBlock.top= (LocY+20);
  • 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 the CSS part & then how to actually include the Menu in the body.

There just two important parts in the Style description - the first is where exactly should your MAIN BODY CONTENTS appear. If you do not specifically tell the New Generation browsers WHERE, the contents will start from page top by default. So, I have enclosed all this in a table (division id="explain") & positioned the table at Left:10; TOP:80. Simple. On older browsers this will be ignored & page will be created as per the flow of the document. And the second point to remember is that the Menu "z-index" must be higher than that of the body content.

Lastly, insert the MENU first thing after the opening body tag as under:

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

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

Copyright DBS © 1998-2003. All Rights Reserved