Welcome guest, is this your first visit? Create Account now to join.
Results 1 to 2 of 2

This is a discussion on Free JavaScript Code Downloads within the General Chat section, part of the Chrome Forum News category: Scrolling Menu Bar Here's a script that supplies a dropdown menu bar that remains at the top of the screen ...


  1. #1
    Join Date
    Sep 2009
    Posts
    1

    Default Free JavaScript Code Downloads

    Scrolling Menu Bar

    Here's a script that supplies a dropdown menu bar that remains at the top of the screen even if you scroll the page. For the purposes of demonstration, only the links under 'Navigation Links' work. Br... detail


    How to setup

    Step 1: Copy & Paste CSS code below in your HEAD section
    CSS
    Code:
    <STYLE type=text/css>
    A {
        COLOR: blue; TEXT-DECORATION: none
    }
    A:hover {
        COLOR: red
    }
    A:visited:unknown {
        COLOR: #808080
    }
    TD {
        FONT-SIZE: 10pt; FONT-FAMILY: Arial, Helvetica, sans-serif
    }
    </STYLE>
    
    <STYLE type=text/css>A:hover {
        COLOR: red
    }
    #divBg {
        LEFT: 0px; VISIBILITY: hidden; POSITION: absolute; TOP: 0px; HEIGHT: 50px
    }
    DIV.clSub {
        PADDING-RIGHT: 10px; PADDING-LEFT: 10px; FONT-SIZE: 12px; VISIBILITY: hidden; PADDING-BOTTOM: 10px; PADDING-TOP: 10px; FONT-FAMILY: Arial, Helvetica, sans-serif; POSITION: relative; TOP: -5px; BACKGROUND-COLOR: silver; layer-background-color: Silver
    }
    </STYLE>
        <!--
            This script downloaded from www.JavaScriptBank.com
            Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
        -->
    Step 2: Place JavaScript below in your HEAD section
    JavaScript
    Code:
    <SCRIPT language=JavaScript1.2> 
    <!--//BEGIN Script  
    ie=document.all?1:0 
    n=document.layers?1:0 
     
    //Do you want it to move with the page if the user scroll the page?  
    var moveOnScroll=true 
     
    //Do you want to hide all the other submenus when you click a new?  
    var hideAll=true 
     
    /******************************************************************************** 
    If you want to change the appearans on the text, or background or anything 
    do that in the style tag above, or in the table tag below. 
     
    NOTE: This menu have some "small" bugs. 
    In Netscape the links in the submenus will work even though the 
    submenus are hidden, this has something to do with 
    a lousy implementation of the relative positioning in Netscape. 
    In IE links "underneath" the submenus will not work even though the 
    submenus are hidden. 
    I will look into this and might find a fix for it. 
    ********************************************************************************/ 
     
     
    /******************************************************************************** 
    Object constructor 
    ********************************************************************************/ 
    function makeMenuBar(obj,nest,vis){ 
        nest=(!nest) ? '':'document.'+nest+'.' 
        this.css=(n) ? eval(nest+'document.'+obj):eval(obj+'.style') 
            this.hideIt=b_hideIt;   this.showIt=b_showIt; this.vis=b_vis                                             
            if(ie && vis) this.css.visibility='hidden' 
            this.state=1 
            this.go=0 
            this.height=n?this.css.document.height:eval(obj+'.offsetHeight') 
            this.top=b_gettop 
        this.obj = obj + "Object";  eval(this.obj + "=this")         
    } 
    //Get's the top position.  
    function b_gettop(){ 
            var gleft=(n) ? eval(this.css.top):eval(this.css.pixelTop); 
            return gleft; 
    } 
    //The functions for showing and hiding  
    function b_showIt(){ 
            this.css.visibility="visible" 
    } 
    function b_hideIt(){ 
            this.css.visibility="hidden" 
    } 
    function b_vis(){ 
            if(this.css.visibility=="hidden" || this.css.visibility=="hide") return true; 
    } 
    /******************************************************************************** 
    Checking if the page is scrolled, if it is move the menu after 
    ********************************************************************************/ 
    function checkScrolled(){ 
            if(!oMenu.go)oMenu.css.top=(!oMenu.state)?eval(scrolled):eval(scrolled) 
            if(n) setTimeout('checkScrolled()',30) 
    } 
    /******************************************************************************** 
    Inits the page, makes the menu object, moves it to the right place,  
    show it.. 
    ********************************************************************************/ 
    function menuBarInit(){ 
            oSub=new Array() 
            //Change it here if you want more or less submenus.  
            oSub[0]=new makeMenuBar('divSub0','divBg',1) 
            oSub[1]=new makeMenuBar('divSub1','divBg',1) 
            oSub[2]=new makeMenuBar('divSub2','divBg',1) 
            oSub[3]=new makeMenuBar('divSub3','divBg',1) 
            oSub[4]=new makeMenuBar('divSub4','divBg',1) 
            //Moving menuBar  
            oMenu=new makeMenuBar('divBg') 
            scrolled=n?"window.pageYOffset":"document.body.scrollTop" 
            oMenu.css.top=eval(scrolled) 
            oMenu.css.visibility='visible' 
            if(moveOnScroll) ie?window.onscroll=checkScrolled:checkScrolled(); 
    } 
     
    /******************************************************************************** 
    Shows and hides the submenus 
    ********************************************************************************/ 
    function extract(num){ 
            if(hideAll){ 
                    for(i=0;i<oSub.length;i++){ 
                            if(num!=i) oSub[i].hideIt() 
                    } 
            } 
            !oSub[num].vis()?oSub[num].hideIt():oSub[num].showIt(); 
     
    } 
     
    onload=menuBarInit; 
    //-->  
    </SCRIPT>
        <!--
            This script downloaded from www.JavaScriptBank.com
            Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
        -->
    Step 3: Copy & Paste HTML code below in your BODY section
    HTML
    Code:
    <DIV id=divBg>
    <TABLE cellSpacing=0 cellPadding=5 width="100%" align=center border=0 
    valign="MIDDLE">
      <TBODY>
    
      <TR bgColor=#c0c0c0>
        <TD height=30><A onclick="extract(0); return false" 
          href="">Navigation Links</A></TD>
        <TD><A onclick="extract(1); return false" 
          href="">Choice 2</A></TD>
        <TD><A onclick="extract(2); return false" 
          href="">Choice 3</A></TD>
        <TD><A onclick="extract(3); return false" 
          href="">Choice 4</A></TD>
        <TD><A onclick="extract(4); return false" 
          href="">Choice 5</A></TD></TR><!-- If you don't want submenu, just remove this tr and  
            remove the onclicks above and change the #'s to links -->
    
      <TR>
        <TD vAlign=top>
          <DIV class=clSub id=divSub0><!-- To make the links link somewhere, just replace the #'s 
                            with the link location --><A 
          href="http://jsbank.topcities.com/home.jpg">Home Page</A><BR><A 
          href="http://jsbank.topcities.com/background/homebackground.jpg">Nền</A><BR><A 
          href="http://jsbank.topcities.com/3d/home3d.jpg">3D</A><BR><A 
          href="http://jsbank.topcities.com/text/hometext.jpg">Chữ</A><BR></DIV></TD>
        <TD vAlign=top>
          <DIV class=clSub id=divSub1><A href="">Sub choice 1</A> <BR><A href="">Sub 
            choice 2</A><BR><A 
          href="">Sub choice 3</A> </DIV></TD>
    
        <TD vAlign=top>
          <DIV class=clSub id=divSub2><A href="">Sub choice 1</A> <BR><A href="">Sub 
            choice 2</A> </DIV></TD>
        <TD vAlign=top>
          <DIV class=clSub id=divSub3><A href="">Sub choice 1</A> <BR><A href="">Sub 
            choice 2</A><BR><A 
          href="">Sub choice 3</A><BR><A 
          href="">Sub choice 4</A><BR><A 
          href="">Sub choice 5</A> </DIV></TD>
    
        <TD vAlign=top>
          <DIV class=clSub id=divSub4><A href="">Sub choice 1</A> <BR><A href="">Sub 
            choice 2</A><BR><A 
          href="">Sub choice 3</A><BR><A 
          href="">Sub choice 4</A> 
    </DIV></TD></TR></TBODY></TABLE></DIV>
        <!--
            This script downloaded from www.JavaScriptBank.com
            Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
        -->






  2. #2
    sulasno's Avatar
    sulasno is offline Super Moderator
    Join Date
    Sep 2008
    Location
    Bangkok
    Posts
    1,759

    Default

    Welcome to ChromePlugins

    but I doubt anyone would want to use your script

Similar Threads

  1. Site homepage with some bad code?
    By NicholasPufal in forum Chrome Central
    Replies: 12
    Last Post: 07-19-2009, 09:57 AM
  2. Not enough free memory to run other apps
    By kensan in forum Bugs and Vulnerabilities
    Replies: 4
    Last Post: 06-25-2009, 11:06 AM
  3. Free photoshop software?
    By mursalin in forum General Chat
    Replies: 3
    Last Post: 06-02-2009, 11:53 AM
  4. Disabling Downloads
    By Sleven in forum Chrome Troubleshooting
    Replies: 5
    Last Post: 04-21-2009, 08:53 PM
  5. Why does this JS code bother Chrome so?
    By clcrhiggaeeermo in forum Chrome Tech
    Replies: 3
    Last Post: 02-11-2009, 05:10 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •