[DHTML] Omni Slide Menu script

**ddadmin** · 11-17-2006, 02:17 AM

How do you figure? The script goes in the head, all style and markup are therefore written to the head. In FF developer's tools extension, the generated markup is shown to have the styles in the head and the markup in the body. Other browsers may interpret this differently but, for validation and operation, it is a moot point as, the markup and style are generated (unseen by the validator) and operation tests out.

Perhaps he meant that contents that should technically belong in the BODY is written by the script that's in the HEAD? Purists may have an issue with that, but like you said, validation wise, it doesn't negatively affect anything.

**jscheuer1** · 11-17-2006, 03:34 AM

Originally Posted by ddadmin

I can only imagine trying to summarize all the various features and subtitles of this script when presenting it

That concerns me too. The original FX slide had some of the same issues (many configuration options), most notably - the poorly documented requirement that the img tag, if used in place of vertical text for the 'draw bar', had to be capitalized. This script can use the image tag but, it can be an upper or lower case image tag. Another nice improvement is that if a property is omitted, it has a default value (Twey is to blame for getting me on to this concept).

I was thinking that the script could be introduced in stages, starting with the simplest - one menu on a page using only the defaults. Then, once that is fully presented, the use of properties to customize it could be mentioned, next would come the fact that more than one menu could be used on a page, and finally information on utilizing the design mode.

**blm126** · 11-17-2006, 09:01 PM

Code:

<HEAD><TITLE></TITLE><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/><STYLE type="text/css">


                           /*End Menu Links*/
</STYLE><SCRIPT src="mmenu.js" type="text/javascript"></SCRIPT><SCRIPT src="menuItems.js" type="text/javascript">

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

</SCRIPT><STYLE type="text/css">

</STYLE><BODY><DIV id="menu1" onmouseover="movein(this);" onmouseout="moveout(this);" STYLE='top: 150px; left: 0px'><DIV STYLE='left: -141px'><TABLE><TBODY><TR><TD class="heading" colspan="2">Menu</TD><TD id="menu1bar" rowspan="12"><BR/>S<BR/>I<BR/>D<BR/>E<BR/> <BR/>M<BR/>E<BR/>N<BR/>U<BR/>*</TD></TR><TR><TD colspan="2"><A href="http://www.dynamicdrive.com" target="">Dynamic Drive</A></TD></TR><TR><TD colspan="2"><A href="http://www.dynamicdrive.com/new.htm" target="">What's New</A></TD></TR><TR><TD colspan="2"><A href="http://www.dynamicdrive.com/hot.htm" target="">What's Hot</A></TD></TR><TR><TD colspan="2"><A href="http://www.dynamicdrive.com/forums" target="">Message Forum</A></TD></TR><TR><TD colspan="2"><A href="http://www.dynamicdrive.com/submitscript.htm" target="">Submit Script</A></TD></TR><TR><TD colspan="2"><A href="http://www.dynamicdrive.com/link.htm" target="">Link to Us</A></TD></TR><TR><TD colspan="1"><A href="http://www.dynamicdrive.com/faqs.htm" target="">FAQ</A></TD><TD colspan="1"><A href="http://www.dynamicdrive.com/contact.htm" target="">Email</A></TD></TR><TR><TD class="heading" colspan="2">External Links</TD></TR><TR><TD colspan="2"><A href="http://www.javascriptkit.com" target="_new">JavaScript Kit</A></TD></TR><TR><TD colspan="2"><A href="http://www.freewarejava.com" target="_new">Freewarejava</A></TD></TR><TR><TD id="menu1lastrow" colspan="2"><A href="http://www.codingforums.com" target="_new">Coding Forums</A></TD></TR></TABLE></DIV></DIV><STYLE type="text/css">
#menu2 {
top:0;
left:45%;
position:fixed;
overflow:visible;
z-index:100;
}
#menu2 div {
border-width:0ex 0ex 0ex 0ex; /*Menu's outer border*/
border-style:solid;
border-color:lightblue;
position:absolute;
color:black;
background-color:transparent;
}
#menu2 table { /*Overall font for Menu*/
border:2px dashed lightblue; /*Menu's inner border*/
border-left-width:0;
border-bottom-width:0;
font-family:verdana, sans-serif;
font-size:80%;
border-collapse:collapse;
background-color:transparent;
width:18.75em;
}
#menu2 td { /*Characteristics for cells in the menu table - do not specify width here*/
border-bottom:2px dashed lightblue;
border-left:2px dashed lightblue;
height:1.563em;
padding:0;
margin:0;
text-align:left;
}
#menu2 #menu2bar { /*Characteristics for initially visible 'draw' bar (the vertical cell)*/
height:1.875em;
background-color:darkcyan;
color:white;
font-weight:bold;
text-align:center;
cursor:default;
}
#menu2 .heading { /*Characteristics for heading cells in the menu table*/
height:1.953em;
color:white;
font-weight:bold;
text-indent:1ex;
background-color:#777777; /*Background Color for menu headings */
width:16.406em; /*This will be the menu body width.  This plus #menu2bar width and 2 times the border width should also be the menu table's approximate width*/
vertical-align:middle;
text-align:left;
border-left-color:#777777;
border-left-style:solid;
}
#menu2 a {
width:100%;
height:100%;
display:block;
padding-top:0.234em;
}
</STYLE><DIV id="menu2" onmouseover="movein(this);" onmouseout="moveout(this);" STYLE='width: 225px; margin-left: -113px'><DIV STYLE='width: 225px; top: -239px'><TABLE><TBODY><TR><TD class="heading" colspan="3">Hot Sites</TD></TR><TR><TD colspan="3"><A href="http://www.loisimages.com" target="_new">Lois Images</A></TD></TR><TR><TD colspan="3"><A href="http://www.statestreetbluesstroll.com/" target="_new">State Street Blues</A></TD></TR><TR><TD colspan="3"><A href="http://www.mediajazzbynight.com/" target="_new">Media Jazz by Night</A></TD></TR><TR><TD colspan="3"><A href="http://www.dynamicdrive.com/forums" target="_new">DD Help Forum</A></TD></TR><TR><TD class="heading" STYLE='width: 10.94em' colspan="2">Search</TD><TD class="heading" STYLE='width: 5.47em; border-left-width: 0; margin-left: 2px' colspan="1">Search</TD></TR><TR><TD colspan="1"><A href="http://www.google.com/" target="_new">Google</A></TD><TD colspan="1"><A href="http://www.yahoo.com/" target="_new">Yahoo</A></TD><TD colspan="1"><A href="http://www.altavista.com/" target="_new">AltaVista</A></TD></TR><TR><TD class="heading" colspan="3">Personal</TD></TR><TR><TD colspan="3"><A href="http://home.comcast.net/~ansiguy" target="_new">Ansi Art Gallery</A></TD></TR><TR><TD colspan="3"><A href="http://home.comcast.net/~jscheuer1/side" target="_new">John's Javascript Jungle</A></TD></TR><TR><TD id="menu2bar" colspan="3">M Y * M E N U</TD></TR></TABLE></DIV></DIV><STYLE type="text/css">
#menu3 {
top:150px; /*set initial Height from top*/
position:absolute;
overflow:hidden;
z-index:100;
}
#menu3 div {
border-width:0; /*Menu's outer border*/
border-style:none;
border-color:none;
position:absolute;
color:black;
background-color:transparent;
}
#menu3 table { /*Overall font for Menu*/
border:1px solid black; /*Menu's inner border*/
font-family:verdana, sans-serif;
font-size:80%;
border-collapse:collapse;
background-color:black;
width:13.672em;
}
#menu3 td { /*Characteristics for cells in the menu table - do not specify width here*/
border-bottom:1px solid black;
border-left:1px solid black;
height:1.25em;
padding:0;
margin:0;
text-align:left;
}
#menu3 #menu3bar { /*Characteristics for initially visible 'draw' bar (the vertical cell)*/
width:1.875em;
background-color:#444444;
color:white;
font-weight:bold;
text-align:center;
border-width:0;
cursor:default;
}
#menu3 .heading { /*Characteristics for heading cells in the menu table*/
height:1.719em;
color:white;
font-weight:bold;
text-indent:1ex;
background-color:#170088; /*Background Color for menu headings */
width:11.641em; /*This will be the menu body width.  This plus #menu3bar width and 2 times the border width should also be the menu table's approximate width*/
vertical-align:middle;
text-align:left;
border-left-color:#170088;
border-left-style:solid;
}
#menu3 #menu3lastrow {
border-bottom-width:0;
margin:0 0 1px 1px;
}
#menu3 a {
width:100%;
height:100%;
display:block;
padding-top:0em;
}
</STYLE><DIV id="menu3" onmouseover="movein(this);" onmouseout="moveout(this);" STYLE='width: 24px; height: 203px; top: 150px; left: 981px'><DIV STYLE='right: -140px'><TABLE><TBODY><TR><TD id="menu3bar" rowspan="12"><BR/>R<BR/>I<BR/>G<BR/>H<BR/>T<BR/> <BR/>M<BR/>E<BR/>N<BR/>U<BR/>*</TD><TD class="heading" colspan="2">Menu</TD></TR><TR><TD colspan="2"><A href="http://www.dynamicdrive.com" target="">Dynamic Drive</A></TD></TR><TR><TD colspan="2"><A href="http://www.dynamicdrive.com/new.htm" target="">What's New</A></TD></TR><TR><TD colspan="2"><A href="http://www.dynamicdrive.com/hot.htm" target="">What's Hot</A></TD></TR><TR><TD colspan="2"><A href="http://www.dynamicdrive.com/forums" target="">Message Forum</A></TD></TR><TR><TD colspan="2"><A href="http://www.dynamicdrive.com/submitscript.htm" target="">Submit Script</A></TD></TR><TR><TD colspan="2"><A href="http://www.dynamicdrive.com/link.htm" target="">Link to Us</A></TD></TR><TR><TD colspan="1"><A href="http://www.dynamicdrive.com/faqs.htm" target="">FAQ</A></TD><TD colspan="1"><A href="http://www.dynamicdrive.com/contact.htm" target="">Email</A></TD></TR><TR><TD class="heading" colspan="2">External Links</TD></TR><TR><TD colspan="2"><A href="http://www.javascriptkit.com" target="_new">JavaScript Kit</A></TD></TR><TR><TD colspan="2"><A href="http://www.freewarejava.com" target="_new">Freewarejava</A></TD></TR><TR><TD id="menu3lastrow" colspan="2"><A href="http://www.codingforums.com" target="_new">Coding Forums</A></TD></TR></TABLE></DIV></DIV>


<DIV STYLE='position: absolute; height: 1em; width: 1em; top: -2em; left: -2em' id="ontextresizeTestDiv"></DIV>

That is the contents reported by Opera 9(innerHTML of <html>).
Thepoint isn't that it won't validate. The point is that a browser could choose not to interpret the style info if it is in the <body>.
Note: I had to cut out some CSS to make the post limit

**ddadmin** · 11-18-2006, 01:41 AM

Originally Posted by jscheuer1

I was thinking that the script could be introduced in stages, starting with the simplest - one menu on a page using only the defaults. Then, once that is fully presented, the use of properties to customize it could be mentioned, next would come the fact that more than one menu could be used on a page, and finally information on utilizing the design mode.

Typically if a script supports many options, what I would do is within the downloadable zip file, include multiple demo files to illustrate the noteworthy options. On the DD script page though, it would just showcase the menu in its best form.

**jscheuer1** · 11-18-2006, 06:35 AM

Originally Posted by ddadmin

Typically if a script supports many options, what I would do is within the downloadable zip file, include multiple demo files to illustrate the noteworthy options. On the DD script page though, it would just showcase the menu in its best form.

That seems reasonable. If all goes along well and you decide to do that. Would it be OK with you if I wrote some discussion on the advanced use of the menu to go on the demo page with links to those examples that you mention?

**jscheuer1** · 11-18-2006, 06:48 AM

Brady,

I see what you mean about where the browser is placing the <body> tag in its report of the innerHTML property. IE does more or less the same thing. FF however, correctly writes the styles to the head and the markup to the body. I get the impression from these facts that, if a browser were written to to ignore style tags in the body that, it would probably be written to interpret the script similar to the way that FF does.

As a matter of general practice, I have yet to come across a browser that ignores style tags in the body. There could be a few but, as I say, most of them would interpret the script as FF does. So we would be talking about very few, if any browsers. On the other hand, it is possible to use the DOM to create and insert the markup and even to style the elements. I did this at first and it worked very well in both Opera and FF but, not at all in IE. So, I reluctantly went with the current method. A hybrid method that writes the styles to the head and the markup to the innerHTML property of DOM created divisions might work out better for a purist but, I am not interested in investigating that right now. As it stands, the menu is backward compatible to IE 5.

**ddadmin** · 11-18-2006, 11:53 AM

Originally Posted by jscheuer1

That seems reasonable. If all goes along well and you decide to do that. Would it be OK with you if I wrote some discussion on the advanced use of the menu to go on the demo page with links to those examples that you mention?

Absolutely. In fact it'd be appreciated! I'll probably post the URL to the script before it's formally annouced here so you can tell me what you wish added/ changed.

As a matter of general practice, I have yet to come across a browser that ignores style tags in the body.

Me neither. I'd be surprised if there is a browser out there that is actually this strict when it comes to interpreting HTML.

**blm126** · 11-18-2006, 05:17 PM

Originally Posted by jscheuer1

As a matter of general practice, I have yet to come across a browser that ignores style tags in the body. There could be a few but, as I say, most of them would interpret the script as FF does. So we would be talking about very few, if any browsers.

Your right, there probably isn't any browsers that will ingnore style sheets. At least in Quirks Mode. Strict mode could be an entirely different story.

On the other hand, it is possible to use the DOM to create and insert the markup and even to style the elements. I did this at first and it worked very well in both Opera and FF but, not at all in IE.

I have had problems with IE in this regard,too.

So, I reluctantly went with the current method. A hybrid method that writes the styles to the head and the markup to the innerHTML property of DOM created divisions might work out better for a purist but, I am not interested in investigating that right now. As it stands, the menu is backward compatible to IE 5.

The real question then is what is more important to you, forward compatibility or backward compatibility. Personally, I have given up on IE 5. It is now three versions out of date.

**jscheuer1** · 11-18-2006, 05:28 PM

OK, well then, I think the script is ready. I just made the last updates to it for now (pending only any further bug reports and some enhanced commenting for design_mode that I will to get to when I have the time). I couldn't work out the bottom menu to my satisfaction as, among other matters, resizing the zoom in Opera became too problematical. I did address Brady's concern in all but pre IE 7 browsers. Going back to 5, IE can obviously handle style in the body. All others (tested in Opera 9.01, IE 7 and FF 1.5.0.8) should write the style to the head and then the markup to the body. There have been a few other minor changes and bug fixes. The dispstyle property is now the design_mode property and properly displays both style and markup for a given menu.

The URL is the same as it has been since the fixed positioning option and top menu capability were added:

http://home.comcast.net/~jscheuer1/s...mni_top_fixed/

Do not use:

http://home.comcast.net/~jscheuer1/side/oo_omni/

or:

http://home.comcast.net/~jscheuer1/side/omni_designer/

I will be updating those when I find the time but, until I do, they are outdated.

**ddadmin** · 11-19-2006, 07:17 AM

Hi John:
I've began setting up the page for the menu. Here's the link. The description/ instructions have yet to be put in.

In IE6, one minor issue I noticed is for the right slide out menu. A horizontal scrollbar appears as the menu is sliding out. This doesn't occur in Firefox and Opera that I've tested. Is this an expected behavior/ limitation in IE6 for this menu?

Thanks,

Thread: [DHTML] Omni Slide Menu script

Thread Tools

Search Thread

Bookmarks

Bookmarks

Posting Permissions