Page 1 of 2 12 LastLast
Results 1 to 10 of 20

Thread: OmniSlide Menu - Fit to screen.

  1. #1
    Join Date
    Jan 2010
    Location
    Tulsa, OK
    Posts
    48
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default OmniSlide Menu - Fit to screen.

    1) Script Title: OmniSlide Menu

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...lide/index.htm

    3) Describe problem: How do I get OmniSlide Menu to fit to screen? I.E. - How do I add a scroll bar to the menu? Something whereby the part of OmniSlide that says "Menu" doesn't drop down below the edge of the screen but with a scroll bar in between "Menu" and the first entry in the Menu. Here's what I've got http://hstrial-tedocitycom.homestead...CityTulsa.html Please help. Thanks. Ted.

  2. #2
    Join Date
    Mar 2010
    Location
    Florida
    Posts
    374
    Thanks
    5
    Thanked 35 Times in 33 Posts

    Default

    Your website is being displayed incorrectly
    -DW [Deadweight]
    Resolving your thread: First Post: => EDIT => Lower right: => GO ADVANCED => Top Advance Editor drop down: => PREFIX:Resolved

  3. #3
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,800
    Thanks
    2
    Thanked 421 Times in 415 Posts

    Default

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    #menu2 {
      position:fixed;left:200px;top:0px;width:700px;height:20px;background-Color:blue;color:white;text-Align:center;
    }
    
    #menu2 .content {
      position:absolute;visibility:hidden;left:0px;top:20px;width:700px;height:400px;background-Color:#FFFFCC;text-Align:left;overflow-Y:scroll;
    }
    
    #menu2 a {color:navy;background-color:white;text-decoration:none;text-indent:1ex;}
    #menu2 a:active	{color:blue;text-decoration:none;}
    #menu2 a:visited {color:blue;text-decoration:none;}
    #menu2 a:hover {color:navy;background-color:#f0fea8}
    
    
    /*]]>*/
    </style></head>
    
    <body>
     <div id="menu2" onmouseover="zxcSlidePanel.Show('menu2',true);"  onmouseout="zxcSlidePanel.Show('menu2',false);">
     Menu
     <div class="content">
    <TABLE>
    <TBODY>
    <TR><TD class=heading colSpan=3>MyKeytotheCityTulsa.us</TD></TR>
    <TR><TD colSpan=3><A href="http://hstrial-tedocitycom.homestead.com/MyKeyToTheCityTulsa.html#Anchor_454" target="">EMPLOYMENT - Anchor Link Test</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Emergency, Non-Emergency, &amp; Local Information Numbers</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Mute/Play KRMG Radio</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Mute/Play White House Press Briefings</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Tulsa Demographics</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Getting Married in Tulsa/Anniversaries</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Spirituality/Witnessing/Churches/Synagogues/The Father/The Trinity/The Holy Bible</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Civics/Voting/Government</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Utilities/Internet/WiFi/Telephone/Electric/Natural Gas/TV/Communications</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Business/Finance</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Employment/Career</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Insurance</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Education/eBooks</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Health Care</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Groceries/Nutrition</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Recipes</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Restaurants &amp; Food Delivery</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Exercise</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Shopping</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Clothing</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Furniture</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Tools</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Automotive/Vehicles</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Transportation/Air, Land, Sea, &amp; Space Travel/Atli/Maps</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Hotel/Motel/Lodging/Resorts/Real Estate/Moving</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">MultiMedia/Movies/Music/News/TV/Radio/Weather/Audio/Video/Newspapers/Magazines/eBooks/Concerts</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">TV Guide</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Grooveshark Music</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Theater</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Theatre (Stage)  That's Entertainment!</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Bars/Clubs/Taverns/Saloons/Watering Holes</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Sweepstakes/Contests/Lotto</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Sports</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Pets/Animal Husbandry/Kennels/Veterinarians</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Games/Puzzles/Toys</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Computing</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target=""></A></TD></TR>
    </TBODY>
    </TABLE>
    
     </div>
     </div>
    
    <script type="text/javascript">
    /*<![CDATA[*/
    
    var zxcSlidePanel={
    
     Show:function(id,ud){
      var o=this['zxc'+id],t;
      if (o){
       t=ud?o.a[2]:0;
       o.c.style.visibility='visible';
       this.animate(o,o.a,o.a[3],t,new Date(),o.ms*Math.abs((t-o.a[3])/o.a[2])+5);
      }
     },
    
     init:function(o){
      var id=o.ID,ms=o.Animate,m=document.getElementById(id),c=m?m.getElementsByTagName('DIV')[0]:null;
      if (c){
       o.a=[c,'height',c.offsetHeight,0];
       c.style.height='0px';
       c.style.visibility='hidden';
       o.c=c;
       o.ms=typeof(ms)=='number'&&ms<20?ms:1000;
       o.id=id;
       this['zxc'+id]=o;
      }
     },
    
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(a[5]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[3]=Math.max(f<0||t<0?n:0,n);
       a[0].style[a[1]]=a[3]+'px';
      }
      if (ms<mS){
       a[5]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       a[3]=t;
       a[0].style[a[1]]=t+'px';
       t==0?a[0].style.visibility='hidden':null;
      }
     }
    
    }
    
    zxcSlidePanel.init({
     ID:'menu2',
     Animate:2000
    
    });
    /*]]>*/
    </script>
    
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,800
    Thanks
    2
    Thanked 421 Times in 415 Posts

    Default

    updated for 4 modes

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    .menuDClass {
      position:fixed;left:200px;top:0px;width:700px;height:20px;background-Color:blue;color:white;text-Align:center;
    }
    
    #menuD  {
      position:absolute;visibility:hidden;left:0px;top:20px;width:700px;height:400px;background-Color:#FFFFCC;text-Align:left;overflow-Y:scroll;
    }
    
    #menuD a {color:navy;background-color:white;text-decoration:none;text-indent:1ex;}
    #menuD a:active	{color:blue;text-decoration:none;}
    #menuD a:visited {color:blue;text-decoration:none;}
    #menuD a:hover {color:navy;background-color:#f0fea8}
    
    
    .menuUClass {
      position:fixed;left:200px;bottom:0px;width:700px;height:20px;background-Color:blue;color:white;text-Align:center;
    }
    
    #menuU {
      position:absolute;visibility:hidden;left:0px;top:20px;width:700px;height:400px;background-Color:#FFFFCC;text-Align:left;
    }
    
    
    .menuRClass {
      position:fixed;left:0px;top:200px;width:25px;height:200px;background-Color:blue;color:white;text-Align:center;
    }
    
    #menuR {
      position:absolute;visibility:hidden;left:0px;top:0px;width:400px;height:200px;background-Color:#FFFFCC;text-Align:center;
    }
    
    .menuLClass {
      position:fixed;right:0px;top:200px;width:25px;height:200px;background-Color:blue;color:white;text-Align:center;
    }
    
    #menuL {
      position:absolute;visibility:hidden;left:0px;top:0px;width:400px;height:200px;background-Color:#FFFFCC;text-Align:center;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
     <div class="menuDClass" onmouseover="zxcSlidePanel.Show('menuD',true);"  onmouseout="zxcSlidePanel.Show('menuD',false);">
     Menu
     <div id="menuD" >
    <TABLE>
    <TBODY>
    <TR><TD class=heading colSpan=3>MyKeytotheCityTulsa.us</TD></TR>
    <TR><TD colSpan=3><A href="http://hstrial-tedocitycom.homestead.com/MyKeyToTheCityTulsa.html#Anchor_454" target="">EMPLOYMENT - Anchor Link Test</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Emergency, Non-Emergency, &amp; Local Information Numbers</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Mute/Play KRMG Radio</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Mute/Play White House Press Briefings</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Tulsa Demographics</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Getting Married in Tulsa/Anniversaries</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Spirituality/Witnessing/Churches/Synagogues/The Father/The Trinity/The Holy Bible</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Civics/Voting/Government</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Utilities/Internet/WiFi/Telephone/Electric/Natural Gas/TV/Communications</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Business/Finance</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Employment/Career</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Insurance</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Education/eBooks</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Health Care</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Groceries/Nutrition</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Recipes</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Restaurants &amp; Food Delivery</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Exercise</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Shopping</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Clothing</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Furniture</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Tools</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Automotive/Vehicles</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Transportation/Air, Land, Sea, &amp; Space Travel/Atli/Maps</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Hotel/Motel/Lodging/Resorts/Real Estate/Moving</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">MultiMedia/Movies/Music/News/TV/Radio/Weather/Audio/Video/Newspapers/Magazines/eBooks/Concerts</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">TV Guide</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Grooveshark Music</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Theater</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Theatre (Stage)  That's Entertainment!</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Bars/Clubs/Taverns/Saloons/Watering Holes</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Sweepstakes/Contests/Lotto</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Sports</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Pets/Animal Husbandry/Kennels/Veterinarians</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Games/Puzzles/Toys</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Computing</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target=""></A></TD></TR>
    </TBODY>
    </TABLE>
    
     </div>
     </div>
    
     <div class="menuUClass" onmouseover="zxcSlidePanel.Show('menuU',true);"  onmouseout="zxcSlidePanel.Show('menuU',false);">
      Menu
      <div id="menuU" >
      </div>
     </div>
    
    
    
     <div class="menuRClass" onmouseover="zxcSlidePanel.Show('menuR',true);"  onmouseout="zxcSlidePanel.Show('menuR',false);">
      <div id="menuR" >
      </div>
      <div style="width:0px;" >M e n u</div>
     </div>
    
     <div class="menuLClass" onmouseover="zxcSlidePanel.Show('menuL',true);"  onmouseout="zxcSlidePanel.Show('menuL',false);">
      <div id="menuL" >
      </div>
      <div style="width:0px;" >M e n u</div>
     </div>
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Slide Panel (10-July-2014)
    // by: Vic Phillips - http://www.vicsjavascripts.org/
    
    
    var zxcSlidePanel={
    
     Show:function(id,ud){
      var o=this['zxc'+id],t,ms;
      if (o){
       t=ud?o.h[2]:0;
       ms=o.ms*Math.abs((t-o.h[3])/o.h[2])+5;
       o.c.style.visibility='visible';
       this.animate(o,o.h,o.h[3],t,new Date(),ms);
       o.t?this.animate(o,o.t,o.t[3],ud?o.t[2]:0,new Date(),ms):null;
      }
     },
    
     init:function(o){
      var id=o.ContentID,m=o.Mode,ms=o.Animate,c=document.getElementById(id),p=c?c.parentNode:null,m=typeof(m)=='string'?m.charAt(0).toUpperCase():'D',m=m==='U'||m=='R'||m=='L'?m:'D',m=m=='R'||m=='L'?[m,'width','offsetWidth','left']:[m,'height','offsetHeight','top'];
      if (c){
       o.h=[c,m[1],c[m[2]],0];
       m[0]=='U'||m[0]=='L'?o.t=[c,m[3],-c[m[2]],0]:null;
       c.style[m[1]]='0px';
       c.style[m[3]]=(m[0]=='D'||m[0]=='R'?p[m[2]]:0)+'px';
       c.style.visibility='hidden';
       o.c=c;
       o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
       o.id=id;
       this['zxc'+id]=o;
      }
     },
    
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(a[5]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[3]=Math.max(f<0||t<0?n:0,n);
       a[0].style[a[1]]=a[3]+'px';
      }
      if (ms<mS){
       a[5]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       a[3]=t;
       a[0].style[a[1]]=t+'px';
       t==0?a[0].style.visibility='hidden':null;
      }
     }
    
    }
    
    zxcSlidePanel.init({
     ContentID:'menuD',  // the unique ID name of the content DIV.                            (string)
     Mode:'Down',        //(optional) the mode of execution, 'Down', 'Up', 'Right' or 'Left'. (string, default = 'Down')
     Animate:2000        //(optional) the animation speed in milliseconds.                    (number, default = 2000)
    });
    
    zxcSlidePanel.init({
     ContentID:'menuU',
     Mode:'Up'
    });
    
    zxcSlidePanel.init({
     ContentID:'menuR',
     Mode:'Right'
    });
    
    zxcSlidePanel.init({
     ContentID:'menuL',
     Mode:'Left',
     Animate:4000
    });
    
    /*]]>*/
    </script>
    
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. The Following User Says Thank You to vwphillips For This Useful Post:

    Tedah3143 (08-15-2014)

  6. #5
    Join Date
    Mar 2007
    Posts
    35
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Default

    only the top menu is working in your updated for 4 modes - tried in chrome & firefox

  7. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,800
    Thanks
    2
    Thanked 421 Times in 415 Posts

    Default

    just tested with IE and FF and works for me
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  8. #7
    Join Date
    Jan 2010
    Location
    Tulsa, OK
    Posts
    48
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    How do I use the code provided by vwphillips? My editor isn't giving me an option to save the file as menuitems.js - it wants to save as .htm

  9. #8
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,800
    Thanks
    2
    Thanked 421 Times in 415 Posts

    Default

    the code I posted is a htm file there is no need for a menuitems.js
    the menu item are defined in the HTML code

    the etyle sheet needs ro go in the page header

    Code:
    <style type="text/css">
    /*<![CDATA[*/
    
    .menuDClass {
      position:fixed;left:200px;top:0px;width:700px;height:20px;background-Color:blue;color:white;text-Align:center;
    }
    
    #menuD  {
      position:absolute;visibility:hidden;left:0px;top:20px;width:700px;height:400px;background-Color:#FFFFCC;text-Align:left;overflow-Y:scroll;
    }
    
    #menuD a {color:navy;background-color:white;text-decoration:none;text-indent:1ex;}
    #menuD a:active	{color:blue;text-decoration:none;}
    #menuD a:visited {color:blue;text-decoration:none;}
    #menuD a:hover {color:navy;background-color:#f0fea8}
    
    
    
    /*]]>*/
    </style>
    the menu DIV repaces your menu DIV

    Code:
    <div class="menuDClass" onmouseover="zxcSlidePanel.Show('menuD',true);"  onmouseout="zxcSlidePanel.Show('menuD',false);">
     Menu
     <div id="menuD" >
    <TABLE>
    <TBODY>
    <TR><TD class=heading colSpan=3>MyKeytotheCityTulsa.us</TD></TR>
    <TR><TD colSpan=3><A href="http://hstrial-tedocitycom.homestead.com/MyKeyToTheCityTulsa.html#Anchor_454" target="">EMPLOYMENT - Anchor Link Test</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Emergency, Non-Emergency, &amp; Local Information Numbers</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Mute/Play KRMG Radio</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Mute/Play White House Press Briefings</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Tulsa Demographics</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Getting Married in Tulsa/Anniversaries</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Spirituality/Witnessing/Churches/Synagogues/The Father/The Trinity/The Holy Bible</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Civics/Voting/Government</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Utilities/Internet/WiFi/Telephone/Electric/Natural Gas/TV/Communications</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Business/Finance</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Employment/Career</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Insurance</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Education/eBooks</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Health Care</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Groceries/Nutrition</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Recipes</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Restaurants &amp; Food Delivery</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Exercise</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Shopping</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Clothing</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Furniture</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Tools</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Automotive/Vehicles</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Transportation/Air, Land, Sea, &amp; Space Travel/Atli/Maps</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Hotel/Motel/Lodging/Resorts/Real Estate/Moving</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">MultiMedia/Movies/Music/News/TV/Radio/Weather/Audio/Video/Newspapers/Magazines/eBooks/Concerts</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">TV Guide</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Grooveshark Music</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Theater</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Theatre (Stage)  That's Entertainment!</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Bars/Clubs/Taverns/Saloons/Watering Holes</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Sweepstakes/Contests/Lotto</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Sports</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Pets/Animal Husbandry/Kennels/Veterinarians</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Games/Puzzles/Toys</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target="">Computing</A></TD></TR>
    <TR><TD colSpan=3><A href="#Anchor_" target=""></A></TD></TR>
    </TBODY>
    </TABLE>
    
     </div>
     </div>
    and the javascript is placed just before the </BODY> tag

    Code:
    <script type="text/javascript">
    /*<![CDATA[*/
    // Slide Panel (10-July-2014)
    // by: Vic Phillips - http://www.vicsjavascripts.org/
    
    
    var zxcSlidePanel={
    
     Show:function(id,ud){
      var o=this['zxc'+id],t,ms;
      if (o){
       t=ud?o.h[2]:0;
       ms=o.ms*Math.abs((t-o.h[3])/o.h[2])+5;
       o.c.style.visibility='visible';
       this.animate(o,o.h,o.h[3],t,new Date(),ms);
       o.t?this.animate(o,o.t,o.t[3],ud?o.t[2]:0,new Date(),ms):null;
      }
     },
    
     init:function(o){
      var id=o.ContentID,m=o.Mode,ms=o.Animate,c=document.getElementById(id),p=c?c.parentNode:null,m=typeof(m)=='string'?m.charAt(0).toUpperCase():'D',m=m==='U'||m=='R'||m=='L'?m:'D',m=m=='R'||m=='L'?[m,'width','offsetWidth','left']:[m,'height','offsetHeight','top'];
      if (c){
       o.h=[c,m[1],c[m[2]],0];
       m[0]=='U'||m[0]=='L'?o.t=[c,m[3],-c[m[2]],0]:null;
       c.style[m[1]]='0px';
       c.style[m[3]]=(m[0]=='D'||m[0]=='R'?p[m[2]]:0)+'px';
       c.style.visibility='hidden';
       o.c=c;
       o.ms=typeof(ms)=='number'&&ms>20?ms:1000;
       o.id=id;
       this['zxc'+id]=o;
      }
     },
    
    
     animate:function(o,a,f,t,srt,mS){
      clearTimeout(a[5]);
      var oop=this,ms=new Date()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[3]=Math.max(f<0||t<0?n:0,n);
       a[0].style[a[1]]=a[3]+'px';
      }
      if (ms<mS){
       a[5]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS); },10);
      }
      else {
       a[3]=t;
       a[0].style[a[1]]=t+'px';
       t==0?a[0].style.visibility='hidden':null;
      }
     }
    
    }
    
    zxcSlidePanel.init({
     ContentID:'menuD',  // the unique ID name of the content DIV.                            (string)
     Mode:'Down',        //(optional) the mode of execution, 'Down', 'Up', 'Right' or 'Left'. (string, default = 'Down')
     Animate:2000        //(optional) the animation speed in milliseconds.                    (number, default = 2000)
    });
    
    
    /*]]>*/
    </script>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  10. The Following User Says Thank You to vwphillips For This Useful Post:

    Tedah3143 (07-21-2014)

  11. #9
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,800
    Thanks
    2
    Thanked 421 Times in 415 Posts

    Default

    with the CSS in the header
    and the menu DIVs and the script just before the </BODY> tag
    The four menus works on your page without any problems
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  12. #10
    Join Date
    Jan 2010
    Location
    Tulsa, OK
    Posts
    48
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    vwphillips. Someone. Is there a way to get OmniSlide menu to reside at the bottom of the screen, away from the browser tabs?

Similar Threads

  1. How to change menu from left of the screen to the right of the screen?
    By EdThaSt0rm in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 08-31-2009, 09:47 AM
  2. Omnislide Menu
    By lightsoutgolf in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 07-02-2008, 04:53 PM
  3. Omnislide headers not completely off screen
    By vkbarefoot in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 04-16-2008, 03:15 PM
  4. omnislide menu
    By candella in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 10-20-2007, 07:59 PM
  5. omnislide menu need help
    By candella in forum Bug reports
    Replies: 0
    Last Post: 10-07-2007, 01:53 PM

Bookmarks

Posting Permissions

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