Printable View
1) Script Title: OmniSlide Menu
2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...lide/index.htm
3) Describe problem: I am interested in using Omnislide Menu with anchors as a page navigation system. Will someone please help me with the code? Thanks. Ted.
I am interested in positioning the menu at the Top of the page.
What are you having problems with? Have you downloaded the demo files and edited/tested them?
If you'd like help, please explain what exactly you are having issues with, and also provide a link to your page so we can check it out.
I've tried to install the full demo on the website. I haven't gotten it to function yet. The site is built on Homestead.com. http://wWw.MyKeytotheCityTulsa.com - Homestead supports HTML & JavaScript. I've stored the file mmenu.js in the root directory. I've cut and pasted the full menuitems.js text in to Homestead's HTML content field. I was trying to duplicate the demo so I'd have a start on making it work. I'm trying to understand how menuitems.js calls the mmenu.js file. Having said that, my main goal is to use the Top of Page OmniSlide menu configuration, with page anchors so people can navigate the page categories.Quote:
Originally Posted by Beverleyh
I've used a drop down listbox to open a new window with direction towards a specific anchor link. I seek to have OmniSlide Menu as a way to guide the user directly to specific categories on the page. The link within OmniSlide might look like this per category with varying anchor link numbers: http://hstrial-tedocitycom.homestead...tml#anchor_174 Will you please inform me as to how to cause OmniSlide Menu stay on one page, I.E. - to go to the link on the original page. Thanks. Ted.
I can use some help with the instructions on how to implement the code. The OmniSlide Menu instructions are quite vague. Please help.
Download and unzip the demo file. The top menu is menu[2] in the menuItems.js file. Using a text only editor like NotePad, remove the other 2 menus and edit the remaining one (menu[2]) as required for your site. While editing the menu's properties use the comments in the file as a guide and/or consult the included properties.htm file for more definitions. When editing the links for menu[2], the target is the third field, ex:
If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.Code:["Lois Images", "http://www.loisimages.com","_new"],
How do I cause the code to function? Implementation? I've saved mmenu.js to the root directory of my Homestead accnt.. How does the MenuItems.js script call for the mmenu.js file?
It doesn't. It uses it. Both are associated with the page using external script tags (from demo.htm):
The easiest way to understand it is to unzip the omnislide.zip to its own folder and load up demo.htm in the browser. Then you can edit it (demo.htm) and menuItems.js as needed.Code:<script src="mmenu.js" type="text/javascript"></script>
<script src="menuItems.js" type="text/javascript">
/***********************************************
* Omni Slide Menu script - © John Davenport Scheuer: http://home.comcast.net/~jscheuer1/
* very freely adapted from Dynamic-FX Slide-In Menu (v 6.5) script- by maXimus
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full original source code
***********************************************/
</script>
Thanks. I got it to function on test page: http://hstrial-tedocitycom.homestead...roll-Test.html
What does line 104 mean by "Required. Do not edit or remove"? I'm only interested in using, customizing Menu [2].
How do I make it so that only menu [2] is displayed?
Required. Do not edit or remove means that it has to stay there. Each menu's properties and links object must have valid javascript terminating brackets. To have only menu[2], do like so:
Code:/***********************************************
* Omni Slide Menu script - © John Davenport Scheuer
* very freely adapted from Dynamic-FX Slide-In Menu (v 6.5) script- by maXimus
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full original source code
* as first mentioned in http://www.dynamicdrive.com/forums
* username:jscheuer1
***********************************************/
//One global variable to set, use true if you want the menus to reinit when the user changes text size (recommended):
resizereinit=true;
menu[2] = { // REQUIRED!! This menu explicitly declares all available options even if they are the same as the defaults
id:'menu2', //use unique quoted id (quoted) REQUIRED!!
/////////////////////////////////////
///////////// no quotes for these properties (numbers represent pixels unless otherwise noted): ////////////
/////////////////////////////////////
user_defined_stylesheet:false, //if true, prevents script from generating stylesheet for this menu
user_defined_markup:false, //if true, prevents script from generating markup for this menu
design_mode:false, //if true, generates a report of the script generated/intended styles and markup (as a design aid)
menutop:160, // initial top offset - except for top menu, where it is meaningless
menuleft:'45%', // initial left offset - only for top menu, as pixels (can be a quoted percentage - ex: '50%')
keepinview:80, // Use false (for not static) - OR - true or numeric top offset when page scrolls
menuspeed:20, // Speed of menu sliding smaller is faster (interval of milliseconds)
menupause:500, // How long menu stays out when mouse leaves it (in milliseconds)
d_colspan:3, // Available columns in menu body as integer
allowtransparent:false, // true to allow page to show through menu if other bg's are transparent or border has gaps
barwidth:20, // bar (the vertical cell) width
wrapbar:true, // extend and wrap bar below menu for a more solid look (default false) - will revert to false for top menu
hdingwidth:210, // heading - non linked horizontal cells width
hdingheight:25, // heading - non linked horizontal cells height
hdingindent:1, // heading - non linked horizontal cells text-indent represents ex units (@8 pixels decimals allowed)
linkheight:20, // linked horizontal cells height
linktopad:3, // linked horizontal cells top padding
borderwidth:2, // inner border-width used for this menu
/////////////////////////// quote these properties: /////////////////////
bordercolor:'#000080', // inner border color
borderstyle:'solid', // inner border style (solid, dashed, inset, etc.)
outbrdwidth:'0ex 0ex 0ex 0ex', // outer border-width used for this menu (top right bottom left)
outbrdcolor:'lightblue', // outer border color
outbrdstyle:'solid', // outer border style (solid, dashed, inset, etc.)
barcolor:'white', // bar (the vertical cell) text color
barbgcolor:'#4d6814', // bar (the vertical cell) background color
barfontweight:'bold', // bar (the vertical cell) font weight
baralign:'center', // bar (the vertical cell) right left or center text alignment
menufont:'verdana', // menu font
fontsize:'90%', // express as percentage with the % sign
hdingcolor:'white', // heading - non linked horizontal cells text color
hdingbgcolor:'#4d6814', // heading - non linked horizontal cells background color
hdingfontweight:'bold', // heading - non linked horizontal cells font weight
hdingvalign:'middle', // heading - non linked horizontal cells vertical align (top, middle or center)
hdingtxtalign:'left', // heading - non linked horizontal cells right left or center text alignment
linktxtalign:'left', // linked horizontal cells right left or center text alignment
linktarget:'', // default link target, leave blank for same window (other choices: _new, _top, or a window or frame name)
kviewtype:'fixed', // Type of keepinview - 'fixed' utilizes fixed positioning where available, 'absolute' fluidly follows page scroll
menupos:'top', // set side that menu slides in from (right or left or top)
bartext:'MY MENU', // bar text (the vertical cell) use text or img tag
///////////////////////////
menuItems:[
//[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
["Hot Sites"], //create header
["Lois Images", "http://www.loisimages.com", "_new"],
["State Street Blues", "http://www.statestreetbluesstroll.com/","_new"],
["Media Jazz by Night", "http://www.mediajazzbynight.com/", "_new"],
["DD Help Forum", "http://www.dynamicdrive.com/forums", "_new"],
["Search", "", "", 2, "no"], //create two column header w/ 2 and 1 column members, requires d_colspan:3
["Search", "", "", 1],
["Google", "http://www.google.com/", "_new", 1, "no"], //create three column row, requires d_colspan:3
["Yahoo", "http://www.yahoo.com/", "_new", 1, "no"],
["AltaVista", "http://www.altavista.com/", "_new", 1],
["Personal", "", ""], //create header
["Ansi Art Gallery", "http://home.comcast.net/~ansiguy", "_new"],
["John's Javascript Jungle", "http://home.comcast.net/~jscheuer1/side", "_new"] //no comma after last entry
]}; // REQUIRED!! do not edit or remove
////////////////////Stop Editing/////////////////
make_menus();
That works. Thanks. I changed line 62 from ["Lois Images", "http://www.loisimages.com", "_new"], to ["Lois Images", "http://www.loisimages.com", "_blank"], it still opens in a new window. How do I get it to open in the same already open window/tab?
Got it. I just don't use _blank. ["Lois Images", "http://www.loisimages.com", ""] Thanks for your patience.
How do I apply fixed positioning, so that when the page is scrolled, the menu will stay at the top of the page?
In the menuItems.js file menu[2] is already set that way:
Code:kviewtype:'fixed',
I see. Thanks. How do I get the Anchor action? I've got an anchor...AnchorLink_448 on http://hstrial-tedocitycom.homestead...AnchorLink_448 that directs the top of the page to go to the Sports section on the site...How do I get it to work...it hasn't gone to the area when clicked with the above html address in the MenuItems.js file, line 62 configured ["Anchor Link Test", "http://hstrial-tedocitycom.homestead.com/MyKeyToTheCityTulsa.html#AnchorLink_448", ""],
I named the first entry in the menu "Anchor Link Test" @ http://hstrial-tedocitycom.homestead...CityTulsa.html with the #AnchorLink_448 designation in the link address code on line 62. How do I get it to function?
There is no AnchorLink_448. But there is an anchor_448. So that should work:
Code:["Anchor Link Test", "http://hstrial-tedocitycom.homestead.com/MyKeyToTheCityTulsa.html#anchor_448", ""],
Beautiful. It works. Thanks for your patience. Homesteads editor titles the anchor "AnchorLink". I thankfully got some help/guidence towards standard HTML protocol. the #Anchor_448 worked. Beautiful. Thanks again. Ted.
How do I make the menu width wider, to stretch more horizontally across the screen?
Is there a way to make the menu stretch the breadth of the width of the screen by default?
Why doesn't it work now? http://hstrial-tedocitycom.homestead...CityTulsa.html
Is there a feature in OmniSlide Menu allowing for a side scroll bar automatically appearing when there are more entries than will fit on the screen otherwise? Physicallity. Let's say the menu is such:
Emergency, Non-Emergency, & Local Information Numbers
Tulsa Demographics
Spirituality/Churches/Synagogues/The Trinity/The Holy Bible
Civics
Business
Employment/Career
Finance
Insurance
Getting Married in Tulsa
Education
Health Care
Groceries/Nutrition
Recipes
Restaurants & Food Delivery
Shopping
Clothing
Furniture
Transportation/Travel
Automotive/Vehicles
Tools
MultiMedia/News/TV/Radio/Weather
Pets/Animal Husbandry
Theater
Theatre
Bars/Clubs/Taverns/Saloons/Watering Holes
Hotel/Motel/Lodging
Sweepstakes/Contests/Lotto
Games/Puzzles/Toys
Arts/Crafts
Botany/Gardening/Arbor
Astronomy/Space
Sloganed T-Shirts/Caps
Blog
Various Cognitive Tools
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 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.
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, & 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 & 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, & 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>