JavaScript Menu

Discussion in 'Christian Webmasters' started by JohnathanAmber, Dec 28, 2007.

  1. JavaScript Menu

    Hey Scriptors,

    I need help... don't we all...

    I've made a menu for my site. I am figured out how to posititon them menu wheer I want it, by using pixels.

    This is obviously not the way to go as computers have different screen resolutions.

    What I need is how can I tell the button to use %s instead of pixels to position the button.

    For instance,

    Right now I have the button at 760 pixels from the right. Or in otherwords 5% from the right with a screen resolution of 800 x 600. But if you view it at 1024 x 768 or another higher resolution, the button would move the the left. Vice Verse if you have a 640 x 480 resolution you would have the scroll to see the button.

    Currently with my HTML menu it is 10% from thr right so no matter what the screen resolution is it is always 10% from the right.

    How can you do this in JavaScript?

    Currently I am using the following elements and values:

    'block_top':0,'block_left':760,

    I can't find much on the net. I have also posted on Christian Web-Masters with not many replies at this point.

    Anyway, thank you all and God bless,
    Johnathan
     
  2. Have you tried to contain it within a table?
     
  3. I have not.

    How would you place it in a table?

    [hr]

    HTML

    Code:
     
    <html>
    <head>
     <title>Javascript Menu Test</title>
     <script language="JavaScript" src="[URL="http://www.tsgcomputers.net/menu/menu.js%22%3E%3C/script"]http://www.tsgcomputers.net/menu/menu.js"></script[/URL]>
     <script language="JavaScript" src="[URL="http://www.tsgcomputers.net/menu/menu_items.js%22%3E%3C/script"]http://www.tsgcomputers.net/menu/menu_items.js"></script[/URL]>
     <script language="JavaScript" src="[URL="http://www.tsgcomputers.net/menu/menu_tpl.js%22%3E%3C/script"]http://www.tsgcomputers.net/menu/menu_tpl.js"></script[/URL]>
     <link rel="stylesheet" href="[URL]http://www.tsgcomputers.net/menu/menu.css[/URL]">
    </head>
    <body>
    <script language="JavaScript">
     new menu (MENU_ITEMS, MENU_TPL);
    </script>
    </body>
    </html>
    
     
  4. menu.js

    Code:
     
    var A_MENUS=[];function menu(F,I){if(!document.body||!document.body.style)return;this.B=F;this.I=I;this.b=A_MENUS.length;this.D=[];this.A=[];this.expand=R;this.collapse=Q;this.onclick=T;this.onmouseout=V;this.onmouseover=W;this.onmousedown=U;this.J={'block_top':0,'block_left':760,'top':20,'left':4,'width':120,'height':22,'hide_delay':0,'expd_delay':0,'css':{'inner':'','outer':''}};this.O=function(p){return this.J[p];};this.n=this;this.a=-1;this.g=0;this.h=0;for(c=0;c<F.length;c++)new S(this,c);A_MENUS[this.b]=this;for(var c=0;c<this.A.length;c++)this.A[c].N.style.visibility='visible';}function Q(b){clearTimeout(this.o);var f=(b?this.D[b].a:0);for(b=0;b<this.D.length;b++){var j=this.D[b];if(j.a>f&&j.L){j.N.style.visibility='hidden';j.L=false;}}if(!b)this.i=null;}function R(b){if(this.k)return;var l=this.D[b];if(this.i&&this.i.a>=l.a)this.collapse(l.b);this.i=l;if(!l.A)return;for(var c=0;c<l.A.length;c++){var j=l.A[c];j.N.style.visibility='visible';j.L=true;}}function T(b){var l=this.D[b];var q=l.B[1];if(!q)return true;if(String(q).toLowerCase().indexOf('javascript:')==0)return eval(q);if(l.B[2]&&l.B[2]['tw'])window.open(q,l.B[2]['tw']);else window.location=q;return true;}function V(b){var l=this.D[b];l.N.className=l.P(0,0);l.M.className=l.P(1,0);l.s(7);this.k=setTimeout('A_MENUS['+this.b+'].collapse();',l.O('hide_delay'));}function W(b){clearTimeout(this.k);this.k=null;clearTimeout(this.o);var l=this.D[b];l.s();l.N.className=l.P(0,1);l.M.className=l.P(1,1);if(l.O('expd_delay')<0)return;this.o=setTimeout('A_MENUS['+this.b+'].expand('+b+');',l.O('expd_delay'));}function U(b){var l=this.D[b];l.N.className=l.P(0,2);l.M.className=l.P(1,2);this.expand(b);}function S(m,c){this.a=m.a+1;this.B=m.B[c+(this.a?3:0)];if(!this.B)return;this.n=m.n;this.m=m;this.c=c;this.b=this.n.D.length;this.n.D[this.b]=this;m.A[c]=this;var n=this.n,I=this.n.I;this.O=X;this.P=Y;this.s=Z;this.g=c?m.A[c-1].g+this.O('left'):m.g+this.O('block_left');this.h=c?m.A[c-1].h+this.O('top'):m.h+this.O('block_top');document.write('<div id="e',n.b,'_',this.b,'o" class="',this.P(0,0),'"',(this.B[2]&&this.B[2]['tt']?' title="'+this.B[2]['tt']+'"':''),' style="position:absolute;top: ',this.h,'px;left:',this.g,'px;width:',this.O('width'),'px;height:',this.O('height'),'px;visibility:hidden;',' z-index: ',this.a,';cursor:',(this.B[1]?'pointer':'default'),'" ','onclick="return A_MENUS[',n.b,'].onclick(',this.b,');" onmouseout="A_MENUS[',n.b,'].onmouseout(',this.b,');" onmouseover="A_MENUS[',n.b,'].onmouseover(',this.b,');" onmousedown="A_MENUS[',n.b,'].onmousedown(',this.b,');"><div id="e',n.b,'_',this.b,'i" class="',this.P(1,0),'">',this.B[0],"</div></div>");this.M=document.getElementById('e'+n.b+'_'+this.b+'i');this.N=document.getElementById('e'+n.b+'_'+this.b+'o');this.L=!this.a;if(this.B.length<4)return;this.A=[];for(var c=0;c<this.B.length-3;c++)new S(this,c);}function X(p){var r=null,G=this.n.I[this.a];if(G)r=G[p];return(r==null?this.m.O(p):r);}function Y(d,e){var C=this.O('css');var H=C[d?'inner':'outer'];if(typeof(H)=='string')return H;for(var _=e;_>=0;_--)if(H[_])return H[_];}function Z(K){window.setTimeout("window.status=unescape('"+(K?'':(this.B[2]&&this.B[2]['sb']?escape(this.B[2]['sb']):escape(this.B[0])+(this.B[1]?' ('+escape(this.B[1])+')':'')))+"')",10);}
    
     
  5. menu_items.js
    Code:
    var MENU_ITEMS = [
     ['Menu', null, null,
      ['Home', 'http://www.tsgcomputers.net', {'tw':'_self','tt':'TSG Computers Homepage'}],
      ['[Forum]', null, null,
       ['Register', 'http://www.tsgcomputers.net/forum/index.php?action=register', {'tw':'_self'}],
       ['Forum Home', 'http://www.tsgcomputers.net/forum', {'tw':'_self','tt':'TSG Computers Forum'}],
       ['Control Panel', 'http://www.tsgcomputers.net/forum/index.php?action=usercp', {'tw':'_self','tt':'Your Control Panel (Registered users only)'}],
       ['Your Messeges', 'http://www.tsgcomputers.net/forum/index.php?action=pm', {'tw':'_self','tt':'Your Messeges (Registered users only)'}],
       ['Send Email', 'http://www.tsgcomputers.net/forum/index.php?action=contact', {'tw':'_self','tt':'Send an Email (Registered users only)'}],
       ['Calendar', 'http://www.tsgcomputers.net/forum/index.php?action=calendar', {'tw':'_self','tt':'Calendar (Registered users only)'}],
       ['Search', 'http://www.tsgcomputers.net/forum/index.php?action=search', {'tw':'_self','tt':'Search the Forum.'}],
       ['Invite', 'http://www.tsgcomputers.net/forum/index.php?action=invite', {'tw':'_self','tt':'Invite others to the site! (Registered users only)'}],
       ['Suggestions?', 'http://www.tsgcomputers.net/forum/index.php?board=3.0', {'tw':'_self','tt':'Suggestions for the Forum (Registered users only)'}]
      ],
      ['Chatroom', 'http://www.tsgcomputers.net/index.php?pid=15', {'tw':'_self','tt':'IRC based Chatroom (Registered users only)'}],
      ['Downloads', 'http://www.tsgcomputers.net/index.php?ind=downloads', {'tw':'_self','tt':'Downloads (Registered users only)'}],
      ['Links', 'http://www.tsgcomputers.net/forum/index.php?action=links', {'tw':'_self','tt':'Links (Registered users only)'}],
      ['[Media]', null, null,
       ['Music', 'http://www.tsgcomputers.net/player/music', {'tw':'_blank','tt':'Online MP3 Player'}],
       ['Video', 'http://www.tsgcomputers.net/player/video', {'tw':'_blank','tt':'Online Video Player'}],
       ['Audio Bible (English - KJV)', null, {'tw':'_blank','tt':'Currently under construction!'}]
      ],
      ['[Resources]', null, null,
       ['[Christian]', null, null,
        ['Bible Tools', 'http://www.tsgcomputers.net/index.php?pid=2', {'tw':'_self','tt':'Various Bible Tools'}],
        ['[Bible Translations]', null, null,
         ['[English Versions]', null, null,
          ['ASV', 'http://www.tsgcomputers.net/bible/asv', {'tw':'_self','tt':'American Standard Version'}],
          ['BBE', 'http://www.tsgcomputers.net/bible/basic_english', {'tw':'_self','tt':'Bible in Basic English'}],
          ['Darby', 'http://www.tsgcomputers.net/bible/darby', {'tw':'_self','tt':'Darbys English Translation Bible'}],
          ['Douay Rheims', 'http://www.tsgcomputers.net/bible/douay', {'tw':'_self','tt':'Douay Rheims Bible'}],
          ['KJV', 'http://www.tsgcomputers.net/bible/kjv20', {'tw':'_self','tt':'King James Version Bible'}],
          ['KJV - Apocrypha', 'http://www.tsgcomputers.net/bible/kjvapocrypha', {'tw':'_self','tt':'King James Apocrypha'}],
          ['KJV - LARGE PRINT', 'http://www.tsgcomputers.net/bible/kjvlarge', {'tw':'_self','tt':'King James Large Print Bible'}],
          ['NWB', 'http://www.tsgcomputers.net/bible/webster', {'tw':'_self','tt':'Noah Webster Bible'}],
          ['WEB', 'http://www.tsgcomputers.net/bible/web', {'tw':'_self','tt':'World English Bible'}],
          ['WNT', 'http://www.tsgcomputers.net/bible/weymouth', {'tw':'_self','tt':'Weymouth New Testament'}],
          ['YLT', 'http://www.tsgcomputers.net/bible/youngs', {'tw':'_self','tt':'Youngs Literal Translation Bible'}]
         ],
         ['[Other Languages]', null, null,
          ['Cebuano', 'http://www.tsgcomputers.net/bible/languages/cebuano', {'tw':'_self','tt':'Cebuano'}],
          ['[Chinese]', null, null,
           ['Union Bible (Big 5)', 'http://www.tsgcomputers.net/bible/languages/chinese_big5', {'tw':'_self','tt':'Chinese Union Bible (Big 5)'}],
           ['Union Bible (GB)', 'http://www.tsgcomputers.net/bible/languages/chinese_gb', {'tw':'_self','tt':'Chinese Union Bible (GB)'}]
          ],
          ['[European]', null, null,
           ['Albanian', 'http://www.tsgcomputers.net/bible/languages/albanian', {'tw':'_self','tt':'Albanian'}],
           ['Bulgarian', 'http://www.tsgcomputers.net/bible/languages/bulgarian', {'tw':'_self','tt':'Bulgarian'}],
           ['Dutch S.V. Bible 1715', 'http://www.tsgcomputers.net/bible/languages/dutch', {'tw':'_self','tt':'Dutch StatenVertalings Bible 1715'}],
           ['French', 'http://www.tsgcomputers.net/bible/languages/french', {'tw':'_self','tt':'French'}],
           ['Gaelic (Manx)', 'http://www.tsgcomputers.net/bible/languages/gaelic_manx', {'tw':'_self','tt':'Gaelic (Manx)'}],
           ['Gaelic (Scots)', 'http://www.tsgcomputers.net/bible/languages/gaelic_scots', {'tw':'_self','tt':'Gaelic (Scots)'}],
           ['German', 'http://www.tsgcomputers.net/bible/languages/german', {'tw':'_self','tt':'German'}],
           ['Hungarian', 'http://www.tsgcomputers.net/bible/languages/hungarian', {'tw':'_self','tt':'Hungarian'}],
           ['Latvian NT', 'http://www.tsgcomputers.net/bible/languages/latvian_nt', {'tw':'_self','tt':'Latvian NT'}],
           ['Modern Greek', 'http://www.tsgcomputers.net/bible/languages/moderngreek', {'tw':'_self','tt':'Modern Greek'}],
           ['[Russian]', null, null,
            ['Russian 1251', 'http://www.tsgcomputers.net/bible/languages/russian_1251', {'tw':'_self','tt':'Russian 1251'}],
            ['Russian (K018-R)', 'http://www.tsgcomputers.net/bible/languages/russian_ko18r', {'tw':'_self','tt':'Russian (K018-R)'}]
           ],
           ['Swedish', 'http://www.tsgcomputers.net/bible/languages/swedish', {'tw':'_self','tt':'Swedish'}],
           ['Ukrainian', 'http://www.tsgcomputers.net/bible/languages/ukrainian', {'tw':'_self','tt':'Ukrainian'}],
          ],
          ['Haitian Creole', 'http://www.tsgcomputers.net/bible/languages/haitian_creole', {'tw':'_self','tt':'Haitian Creole'}],
          ['Hebrew OT', 'http://www.tsgcomputers.net/bible/languages/hebrewot', {'tw':'_self','tt':'Hebrew OT'}],
          ['Korean', 'http://www.tsgcomputers.net/bible/languages/korean', {'tw':'_self','tt':'Korean'}],
          ['Latin Vulgate', 'http://www.tsgcomputers.net/bible/languages/vulgate', {'tw':'_self','tt':'Latin Vulgate'}],
          ['Maori', 'http://www.tsgcomputers.net/bible/languages/maori', {'tw':'_self','tt':'Maori'}],
          ['Rumanian', 'http://www.tsgcomputers.net/bible/languages/rumanian', {'tw':'_self','tt':'Rumanian'}],
          ['Swahili NT', 'http://www.tsgcomputers.net/bible/languages/swahili_nt', {'tw':'_self','tt':'Swahili NT'}],
          ['Tagalog', 'http://www.tsgcomputers.net/bible/languages/tagalog', {'tw':'_self','tt':'Tagalog'}],
          ['Thai', 'http://www.tsgcomputers.net/bible/languages/thaibible', {'tw':'_self','tt':'Thai'}],
          ['Uma NT', 'http://www.tsgcomputers.net/bible/languages/uma_nt', {'tw':'_self','tt':'Uma NT'}],
          ['[Vietnamese]', null,null,
           ['Vietnamese', 'http://www.tsgcomputers.net/bible/languages/vietnamese', {'tw':'_self','tt':'Vietnamese'}],
           ['Vietnamese (VNI Times)', 'http://www.tsgcomputers.net/bible/languages/vietnamesevni', {'tw':'_self','tt':'Vietnamese (VNI Times)'}]
          ],
         ],
        ],
       ],
       ['[Online Tools]', null, {'tt':'Various online tools.'},
        ['Converters', 'http://www.tsgcomputers.net/index.php?pid=1', {'tw':'_self','tt':'Currently under construction!'}],
        ['Xara3D Banner Maker', 'http://www.tsgcomputers.net/index.php?pid=20', {'tw':'_self','tt':'An online banner maker for your website!'}],
        ['ClusterMap', 'http://www3.clustrmaps.com/counter/maps.php?url=http://www.tsgcomputers.net', {'tw':'_blank','tt':'Map of users around the world that have visited this site.'}]
       ],
      ],
      ['News', 'http://www.tsgcomputers.net/index.php?ind=news', {'tw':'_self','tt':'News from the webmaster.'}],
      ['Suggestions?', 'http://www.tsgcomputers.net/index.php?pid=17', {'tw':'_self','tt':'Comments or suggestions about the site?'}]
     ],
    ];
     
  6. menu_tpl.js
    Code:
    var MENU_TPL = [
     {
      'width': 100,
      'height': 24,
      'left': 99, 
      'top': 0,
      'hide_delay': 200,
      'expd_delay': 200,
      'css': {
       'inner': 'TM0i0',
       'outer': ['TM0o0','TM0o1']
      },
      'block_left': null,
      'block_top': null
     },
     {
      'width': 160,
      'block_left': -60,
    /*  'block_left': 0, */
      'block_top': 25,
      'left': 0,
      'top': 23,
      'css': {
       'inner': 'TM1i0',
       'outer': ['TM1o0','TM1o1']
      }
     },
     {
      'block_left': -100,
    /*  'block_left': 105, */
      'block_top': 0
    /*  'block_top': 10 */
     }
    ];
    
     
  7. menu.css
    Code:
    /* Blue - Root; text properties for states: normal, hover, click */
    .TM0i0 {
     font-family: Arial, Helvetica, sans-serif;;
     color: #FFFFFF;
     font-size: 12px;
     font-weight: normal;
     font-style: normal;
     text-decoration: none;
     padding: 4px;
    }
    /* Blue - Root; box properties for states: normal */
    .TM0o0 {
     background: #3C76B2;
     border: 0px solid #2B547F;
     text-align: center;
     vertical-align: middle;
     text-decoration: none;
    }
    /* Blue - Root; box properties for states: hover, click */
    .TM0o1 {
     background: #4D99E6;
     border: 1px solid #2B547F;
     text-align: center;
     vertical-align: middle;
     text-decoration: none;
    }
    /* blue grades - sub levels; text properties for states: normal, hover, click */
    .TM1i0 {
     font-family: Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
     border: 0px solid #2B547F;
     color: #FFFFFF;
     font-size: 12px;
     font-weight: normal;
     font-style: normal;
     text-decoration: none;
     padding: 4px;
    }
    /* blue grades - sub levels; box properties for states: normal */
    .TM1o0 {
     background: #4D99E6;
     border: 0px solid #2B547F;
     text-align: right;
     vertical-align: middle;
     text-decoration: none;
    }
    /* blue grades - sub levels; box properties for states: hover, click */
    .TM1o1 {
     background: #3C76B2;
     border: 1px solid #2B547F;
     text-align: right;
     vertical-align: middle;
     text-decoration: none;
    }
    
     

Share This Page