PDA

View Full Version : OmniSlide Menu - Fit to screen.



Tedah3143
07-09-2014, 05:05 PM
1) Script Title: OmniSlide Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/omnislide/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.

Deadweight
07-10-2014, 08:33 AM
Your website is being displayed incorrectly

vwphillips
07-10-2014, 10:18 AM
<!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>

vwphillips
07-10-2014, 12:41 PM
updated for 4 modes


<!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>

asiatic
07-10-2014, 12:57 PM
only the top menu is working in your updated for 4 modes - tried in chrome & firefox

vwphillips
07-10-2014, 01:48 PM
just tested with IE and FF and works for me

Tedah3143
07-16-2014, 09:06 PM
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

vwphillips
07-17-2014, 09:10 AM
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


<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


<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


<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>

vwphillips
07-21-2014, 12:25 PM
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

Tedah3143
07-31-2014, 08:26 AM
vwphillips. Someone. Is there a way to get OmniSlide menu to reside at the bottom of the screen, away from the browser tabs?

Tedah3143
08-02-2014, 09:50 PM
I'm using Homestead's Sitebuilder. It has a place for JavaScript along with an area for a Head Tag with an insert for HTML code that statically fits on the page. How might I include the div tag? Where do I place the information?

Tedah3143
08-15-2014, 08:37 PM
I notice it works in all four modes. Thanks. My Ultimate goal is to have the code to show the menu at the bottom, opening up with the scroll bar, without the other three modes on the screen. Will you please help? I'm so close on this. Thanks again. Ted.

Tedah3143
08-20-2014, 12:21 AM
I understand how to insert the html code in to my Homestead Sitebuilder. I could really use some help getting just a single "Menu" bar at the bottom of the screen.

Deadweight
08-20-2014, 01:23 PM
I would be able to help you but it seems like i can not view your website.

Tedah3143
08-28-2014, 03:26 PM
Will someone please help me?

Tedah3143
09-03-2014, 06:04 AM
This code works. I am interested in having it display the "Menu" button at the bottom of the screen, only, without the left, right, or top modes showing. I do need the content that is currently in the top mode displayed in the bottom mode though. It means the difference between the site working or not. Any help I receive will be greatly appreciated. Thanks. Ted.


<!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>

vwphillips
09-03-2014, 01:17 PM
<!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[*/


.menuUClass {
position:fixed;left:200px;bottom:0px;width:700px;height:20px;background-Color:blue;color:white;text-Align:center;
}

#menuU {
position:absolute;visibility:visible;overflow:auto;left:0px;top:20px;width:700px;height:400px;background-Color:#FFFFCC;text-Align:left;
}


/*]]>*/
</style></head>

<body>

<div class="menuUClass" onmouseover="zxcSlidePanel.Show('menuU',true);" onmouseout="zxcSlidePanel.Show('menuU',false);">
Menu
<div id="menuU" >
<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[*/
// 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:'menuU',
Mode:'Up'
});


/*]]>*/
</script>

</body>

</html>

Tedah3143
09-04-2014, 10:42 PM
Do I owe you anything for such. You've been such a great help.

vwphillips
09-05-2014, 08:59 AM
see my signiture

If my post has been useful please donate to http://www.operationsmile.org.uk/

Tedah3143
09-09-2014, 06:22 PM
I shall donate. It might be a while and in increments. Maybe look for something from me around the 24th of this month. I am quite thankful though a man of modest means with great potential, as you might be. Your coding skill is strong. I really like how HTML is so closely related to the english language. The guy that came up with the first browser actually donated the code. It's interesting. I enjoy doing it just to keep my skills honed, while I am somewhat of a novice. Anyway. Have a blessed day, life. Ted.