1. Hello Guest! You are browsing the forums as a guest; you will have limited permissions as a guest so we advise registering to enjoy the forums fully. Remember: we are a Christian ONLY site - any user who is not Christian will not be approved. Blessings, Christian Forum Site Staff
    Dismiss Notice

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