PDA

View Full Version : [DHTML] Omni Slide Menu script



jscheuer1
11-13-2006, 07:54 AM
1) CODE TITLE: Omni Slide Menu script

2) AUTHOR NAME/NOTES: jscheuer1 - Years ago when I first became interested in DD, one of the first menus I tried was 'David's Menu'. There was just something about it that I liked. It is now Dynamic-FX Slide-In Menu (v 6.5). Over the years, from time to time, I have been asked and/or have just tried to get this menu to slide in from the right. The code is very old (at least parts of it) and more confused looking than I am used to seeing when working on a DD authored script (this one is a third party - Maximus authored script). So I decided to start from scratch. This current menu is the product of that effort and surprisingly uses many of the same general methods of the original, even though I created almost all of the code from scratch.

3) DESCRIPTION: Omni slide can look and act just like its predecessor except that it requires a modern browser (document.getElementById). It also is OO, meaning that you can use it repeatedly on the same page. It can now slide in from the left or right - or two or more menus on a page can do a bit of each! It also has a very interesting feature for some. You can disable its internal styles for any given menu it creates and substitute your own stylesheet. To assist designers in this effort, it has a 'dispstyle' property which can be set true for any given menu and this will give you the style that the script is using, or would use, for that menu written to a large textarea in the middle of the page for inspection and/or copying to your own stylesheet if you wish to disable the internal style generation and modify some things beyond what the configuration properties will allow.

It still follows the format of Dynamic-FX Slide-In Menu (v 6.5) in that it has two external script files and limited required styling for the links themselves. One script is just a configuration file, while the other is the menu builder and contains the movement and all other related functions. The configuration file is now called menuItems.js (http://home.comcast.net/~jscheuer1/side/oo_omni/menuItems.js) and is well documented. The first menu uses the defaults and so has few properties defined for it. The second menu declares and documents all of the available properties.

Almost all of a given menu's properties can be skipped when configuring a menu as, the script's defaults will take over in those cases. It also converts most critical dimensions to em's so that changing the browser's text size will not adversely affect the appearance. For the future I am going to look into the possibility of having its motion functions based in whole or in part upon ems to make this effect complete without the current optional polling function (found on Fork and Spoon Helmet (http://projects.forkandspoonhelmet.com/ontextresize/) and in the public domain as far as I could tell) which takes care of these matters for now by re-initing the menu(s) (not reloading the page) when text size changes, so that the menus don't get out of position off the page or sent into the middle of it. It also behaves well with Opera's Zoom feature but not IE 7's Zoom. But, if simple text resizing is used in IE or FF, the effect is seamless.

Some other features of note:

It takes care of a bug from the original where, if you set the initial top offset for the menu to the same or near the same height as its active scrolling offset, things would get a bit ugly. The links now span the entire area of the cells in which they reside.

I've place the demo on a page that is both wider and taller than most folk's screens so that the positioning effects can be observed.

4) URL TO CODE: http://home.comcast.net/~jscheuer1/side/oo_omni/

Here is a link to the same code with the only difference being that the dispstyle property is set to true (designer mode) for the second (right hand) menu on the page:

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

I did do a great deal of troubleshooting on this script already but, one never knows what might happen in the real world. So, report any early bugs here or until this script gets included in the library here at DD (if it in fact does).

For help with it, please post to the scripts help or javascript forums.

blm126
11-13-2006, 09:38 PM
Pretty good.I noticed a bug on the second demo on the right side menu. When it slides in it is under the textarea in the middle of the page(Opera 9). Also a feature request, would it be possible to get this to slide in from the top?

jscheuer1
11-13-2006, 10:06 PM
Hey Brady,

That's not a bug, it's a feature. I thought I made it clear that the text area was a 'design mode' feature. It is supposed to be over everything else on the page. I think I set its z-index to 1000. Good in most cases. Once you copy the style generated for a given menu, you can then:

1 ) Set:


dispstyle:false, //if true, generates a report of the script generated/intended styles (as a design aid)

to return the menu to normal mode with no styles displayed.

2 ) Disable the script's style generation for that menu by setting:


user_defined_stylesheet:true, //if true, prevents script from generating stylesheet for this menu


3 ) Put the copied styles on the page or in a stylesheet linked to it and edit them to fine tune the given menu.

This is just a little extra something for those folks who always seem to need a way to customize a script beyond what you have provided for in the code.

I had thought about sliding in from the top and/or bottom. Shouldn't be too hard to work out but, might be.

blm126
11-15-2006, 02:31 AM
Oh, I see. I didn't understand that was on purpose. Here's an easy request.
would it be possible to use position:fixed(in browsers that support it) instead of the current jump down the screen that is happening now.

jscheuer1
11-15-2006, 04:50 AM
That's what the design mode/user defined stylesheet is there for. However, the keep_in_view function would need to be hacked to disable it for those browsers as well.

jscheuer1
11-16-2006, 06:05 AM
Well, we are getting there, Brady. Looks like you are my only 'fan' on this one, so far. Anyways, I've implemented a top menu option. It needs a little refinement for optional left/right position (currently it is top center only) but that won't be hard. If I get that done soon I will just upload it over the current demo for this newer version which also includes the option to set position fixed for those browsers that support it. The floating 'keepinview' on the top menu, which is still available for left and right, looks so poorly on most browsers that I am having the script disallow it for the top menu except in IE 6 and earlier which cannot do fixed positioning, but that fortunately does a good job of detecting window scrolling so, can minimize the worst effects that other browser exhibit.

New property added is kviewtype, which can be either fixed or absolute. The wrapbar:true property has no effect on the top menu. The barwidth property becomes the bar's height when top orientation is employed.

Here is the new demo:

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

I'm leaving the other demo's in place for now as well.

ddadmin
11-16-2006, 11:19 AM
Wow very interesting, especially the new fixed feature! I can only imagine trying to summarize all the various features and subtitles of this script when presenting it, but it definitely looks like a Dynamic FX Killer/ replacement script. I'll play around with the various options this weekend, and if no bugs are found, feature the script on DD.

p,s: Some beginners just looking at the demo may not know that the horizontal scrollbar was intentionally added, and may be put off thinking the menu creates it by default.

blm126
11-17-2006, 12:19 AM
Wow, those are some great additions! Great job, John. However, I think I have found one error. The script seems to place a <style> element in the body. The <style> element may only go in the head of the document as far as I know.

djr33
11-17-2006, 12:43 AM
It's a nice script.

There are two functional errors that get on my nerves, though.

1. The menus stay halfway out if you move your mouse out of the window while they are expanding. I'd suggest keeping the action going or making it dissapear... getting it stuck in the middle is ugly.

2. It jumps up and down when scrolling with the scrollbars. It stays with the window, which is nice, but the jerkyness of the movement is annoying. This may just be the fastest the browser can render, though. Perhaps it would be less jarring to have it not scroll with the browser but rather move once it's stopped.... not sure how to program that, but it might just feel smoother.

Neither issue is a big problem... but just a bit distracting...

This is testing with FF on PC.

jscheuer1
11-17-2006, 01:59 AM
Wow very interesting, especially the new fixed feature! I can only imagine trying to summarize all the various features and subtitles of this script when presenting it, but it definitely looks like a Dynamic FX Killer/ replacement script. I'll play around with the various options this weekend, and if no bugs are found, feature the script on DD.

p,s: Some beginners just looking at the demo may not know that the horizontal scrollbar was intentionally added, and may be put off thinking the menu creates it by default.

I'm still working on it so, don't put it in the library just yet. I discovered and fixed some bugs and added a feature or two. Most notable additions are option for an overall outer border, the markup now gets included in 'design mode' and script generation of markup can be disabled. So, after doing the design mode and copying the styles and/or markup, you can disable either or both for generation and have a totally custom menu, if that is what you are after, leaving the script as only a motion engine or handling motion and style only or motion and markup only.

I want to add a bottom menu option but, it may have to wait until after Thanksgiving - family and social obligations are intruding on my coding time.

You are right about the bottom scroll bar, which would be a problem in a 'normal' page for the right menu except for a slightly different layout and motion logic employed to avoid just such a nuisance.


Wow, those are some great additions! Great job, John. However, I think I have found one error. The script seems to place a <style> element in the body. The <style> element may only go in the head of the document as far as I know.

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.


It's a nice script.

There are two functional errors that get on my nerves, though.

1. The menus stay halfway out if you move your mouse out of the window while they are expanding. I'd suggest keeping the action going or making it dissapear... getting it stuck in the middle is ugly.

2. It jumps up and down when scrolling with the scrollbars. It stays with the window, which is nice, but the jerkyness of the movement is annoying. This may just be the fastest the browser can render, though. Perhaps it would be less jarring to have it not scroll with the browser but rather move once it's stopped.... not sure how to program that, but it might just feel smoother.

Neither issue is a big problem... but just a bit distracting...

This is testing with FF on PC.

Drop downs or (as they are often called) 'fly outs' are prone to this problem. If your mouse leaves the page before it leaves the fly out, it really never 'moused out' from the fly out. Most browsers do not behave this way, but some may. It is an open question (as far as I am concerned) as to which is and/or looks better.

As for jerkiness (in many browsers, it is more of a 'fluid catch up' motion) in the menu's following the scroll of the page, that is actually optional. Fixed positioning may now be used as an alternative except in older browsers which do not support it. The script can tell the difference and does whatever the browser can support unless a particular menu is configured otherwise.

All - Latest Release (overwriting the previous version that had the top menu included):

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

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
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
<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
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
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
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
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/side/oo_omni_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 (http://dynamicdrive.com/dynamicindex1/omnislide/). 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,

jscheuer1
11-19-2006, 09:24 AM
Hi John:
I've began setting up the page for the menu. Here's the link (http://dynamicdrive.com/dynamicindex1/omnislide/). 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,

Shaping up! That's a bug that crept in with a bit of advanced IE version detection I (incorrectly) employed, which then allowed me to include some simply incorrect code that never got used. To make a long story short, the mmenu.js file I just uploaded corrects this bug. However, there is something about the demo page that makes the right menu extend a phantom part of itself into the page. This wasn't happening on my demo even before this most recent fix. Perhaps it will go away or be unimportant once you get the current mmenu.js file (I just overwrote the existing one).

One thing I see on the demo page that is wrong (just a hold over from the old FX script, I guess) is that you are still using:


The two files contained are "ssm.js" and "ssmItems.js", both of which you should upload to your webpage directory.

and:


All configurations to the menu are done inside "ssmItems.js". Open the file up using any text editor to edit the menu's style, and the displayed links.

The files are mmenu.js and menuItems.js now.

Also, here is a file to help folks with the configuration. I think it should go in the distribution .zip - I will have more instructions or demos coming:

http://home.comcast.net/~jscheuer1/side/oo_omni_top_fixed/properties.htm

ddadmin
11-19-2006, 11:08 AM
Great, yep, the updated .js file fixes the horizontal scrollbar issue in IE6. :) I've updated the page (http://www.dynamicdrive.com/dynamicindex1/omnislide/) with it.


, there is something about the demo page that makes the right menu extend a phantom part of itself into the page.

By "phantom", I gather you just mean the menu slides out a little beyond its actual width? It's minute enough that I certainly don't see it as an issue.


One thing I see on the demo page that is wrong ...

Ah ignore that for now. As mentioned the actual description/instruction hasn't been input yet. I'll do that later today, and let you know in this thread when it happens.


Also, here is a file to help folks with the configuration. I think it should go in the distribution .zip - I will have more instructions or demos coming:

http://home.comcast.net/~jscheuer1/s...properties.htm


Great that would come in real handy. Thanks for all the work put into it!

jscheuer1
11-19-2006, 11:57 AM
Well, it is still there, only in IE 6 (and probably earlier). I'm not sure what is causing it and it may have nothing to do with the demo page because it comes and goes. If you scroll the page down, and approach the right menu from its left, you don't have to actually hover it to have it extend. It is because the container (motion) division is getting enlarged but, I'm not sure why. If you approach it from the top or bottom, it goes back to its correct size. I could try assigning the motion functions to the next division in or track down what is making the outer one expand. No time right now though. I will get to it later.

jscheuer1
11-19-2006, 07:34 PM
I was right, the problem was:


It is because the container (motion) division is getting enlarged

I wasn't sure why until I looked it over. In IE 6 and earlier, fixed positioning isn't available so the container must be resized and repositioned along with the fly out's motion or else you get a scroll bar or can't see the entire menu. I had this worked out at one point but then became dissatisfied with the old script's limitation on menu widths being multiples of ten. After I worked that out, I forgot about poor old IE 6 and earlier. It (they) needed a little extra code to put everything 'right' again for the right menu when it moved back completely to its resting position. Incidentally, this was also a problem in all browsers if they were (optionally) using the absolute positioning on the right menu. Fixed for all in the new mmenu.js file I just uploaded.

ddadmin
11-20-2006, 01:35 PM
Just an update (http://www.dynamicdrive.com/dynamicindex1/omnislide/). I've updated the .js files per the above, plus the demos' looks slightly to suit my taste. The description is somewhat done, though none of the instructions yet.

Inside menuItems.js, one small error in the documentation:


menupos:'top', // set side that menu slides in from (right or left)

It should be (right or left or top).

ddadmin
11-20-2006, 11:16 PM
Ok, the script is almost ready to go: http://www.dynamicdrive.com/dynamicindex1/omnislide/ I'll await your final input before posting it to DD. Thanks!

djr33
11-21-2006, 02:32 AM
Safari bug-- I get a trail of lines representing the top edge of the menu as it slides back. It's like: | | | | | ..... as wide as the menu is, about that much space between them.
It happens with the top and left menus, not the right aligned one, oddly enough.
This could relate to a memory issue, but I'll note that I have a top of the line mac, or at least it was a year or two ago. 2ghz dual processors, 2gb ram, etc.

tech_support
11-21-2006, 06:36 AM
Ok, the script is almost ready to go: http://www.dynamicdrive.com/dynamicindex1/omnislide/ I'll await your final input before posting it to DD. Thanks!
Don't you usually put in Author visit the forums or something like that?

jscheuer1
11-21-2006, 08:19 AM
Ok, the script is almost ready to go: http://www.dynamicdrive.com/dynamicindex1/omnislide/ I'll await your final input before posting it to DD. Thanks!

I flew into Berkeley earlier today, or was it yesterday? Depends upon which zone you use at this point so, I am a little lagged. I've just finished going over things and it looks very nice. I especially liked:

'As you can see, if you need a slideout menu, Omni Slide is your guy!'

As I say, the demo page looks good, we can always tweak if necessary but, I think it's a keeper. When I get some more time, I would like to make up a few more demos so folks could take a 'tour'.

I am a little concerned about djr33's experience with Safari but, mostly just surprised that it works at all with Safari as, I have no way of developing for that browser. We aren't claiming functionality in that browser but, perhaps we should say it is tolerated in Safari though not fully compliant with it.

djr33
11-21-2006, 08:56 AM
It seems to work just fine with Safari. Not sure what's wrong with the graphics, but that's the only issue... just trailing lines from the top of the menu.


Note: I was in Berkeley this weekend too. My main stop was the UC library... perhaps we ran into each other if that was your purpose as well. :p

ddadmin
11-21-2006, 09:35 AM
Ok, script is now live! Just another observation- in IE7, the right menu animation (fly in/out) is very choppy. Don't get that in IE6 though.

djr33
11-21-2006, 10:29 AM
Interesting. That's the only one that didn't have problems in Safari.
Perhaps the coding of the right one differs slightly and that might help it be fixed?

jscheuer1
11-21-2006, 04:43 PM
Ok, script is now live! Just another observation- in IE7, the right menu animation (fly in/out) is very choppy. Don't get that in IE6 though.

I'm not seeing this choppiness. I might be missing something though. I just tested the:

http://www.dynamicdrive.com/dynamicindex1/omnislide/

and the:

http://www.dynamicdrive.com/dynamicindex1/omnislide/demo.htm

links in IE 7. Is this where you see this? Is there anything special you have to do to get the choppiness?

ddadmin
11-21-2006, 09:55 PM
Hi John:
For some reason I'm getting that in IE7 for both pages above. Just to clarify though, by animation choppiness, I mean when the menu is expanding/ contracting onmouseover, and not the always being in view animation. And it's only for the right most menu- the other two's animation are very smooth.

Maybe it's just an issue with my computer somehow, though I don't see why the slowness is only showing up in one of the menus. I'll see if I can find out more about the problem.

blm126
11-22-2006, 02:30 AM
I just double checked Safari to make sure that it wasn't just djr33's computer. It happened on the Mac I tested too. I'm pretty sure it is a Safari Bug though. Because as soon as you start to scroll the lines all disappear. Now I need to go put back this Mac I just "borrowed"

jscheuer1
11-22-2006, 02:43 AM
DD,

I do notice some choppiness on my laptop but, it is on both the left and right menus, when they slide out and in. It is minor and definitely looks like it could be related to the monitor. What I am seeing looks as though the menu is made up of several divisions stacked vertically, each moving at a slightly different rate of speed, but all arriving at the same horizontal spot eventually. Is this a good description of what you are seeing on the right menu? In reality each menu is made up of two container divisions and one table so, I doubt that the layout has much of an effect. My only concern would be if you thought it was very pronounced and/or thought it really ruined the effect.

ddadmin
11-22-2006, 08:58 AM
I've played around with the menu some more in IE7. The choppiness I'm seeing is just limited to the right menu. The best way I can describe it is as if the delay in the setInterval() function used in the animation is set to too high, so you see the animation as steps, not a smooth slide.

An interesting observation is how this choppiness even extends to the other menus if the Right menu is still animating (ie: closing) as I move my mouse over the left menu. Then even the left menu becomes choppy until the right menu has stopped animating. So it would seem like the timer used for the right menu negatively affects the other menus as well. This doesn't happen for example between the top and left menu. Could be due to how IE7 renders a fixed positioned layer, since that's the only difference between the left and right menu.

The choppiness is pretty significant, but luckily the total distance needed to be traveled by the animation is always small, so I don't think it's a significant issue at that. :)

jscheuer1
11-22-2006, 09:36 AM
I'm not sure that we are observing similar phenomena. If we are, you can customize the 'interval' (it is really a repeating timeout) by using the menuspeed: property. The default is 20, using 10 made the choppiness I was seeing go away (actually made it just much harder to notice as, things were moving so fast). There is also a hard-coded interval of the keep_in_view function of 20 but, completely disabling this feature has no effect on the choppiness I am seeing.

However, playing with all of this has made me realize a coding error I made in mmenu.js. I have this:

if(!o.keepinview) {o.keepinview=30};

It really should be:

if(!o.keepinview) {o.keepinview=false};

otherwise, there would be no real way to disable this feature without hacking the script. This means that the:

keepinview:30, // For left and right menus and only with kviewtype:'absolute' - distance from top after page has scrolled beyond menutop

in:

http://www.dynamicdrive.com/dynamicindex1/omnislide/properties.htm

should also be changed. I think there may be a few other of these true/false properties where the default is other than false. In any case like that, there is no way to actually make them false as, configuring them false will make them revert to their default value, whatever that is. This might actually be good in some cases but, certainly not in this particular one. Once I look over all of that, I will make updated files available. But, fortunately this shouldn't have anything to do with what I am suggesting you try with:

menuspeed:10,

for the right hand menu in menuItems.js.

jscheuer1
11-22-2006, 06:58 PM
OK, I've updated the:

http://home.comcast.net/~jscheuer1/side/oo_omni_top_fixed/mmenu.js

and the:

http://home.comcast.net/~jscheuer1/side/oo_omni_top_fixed/properties.htm

files. These should be substituted for the ones in the distribution .zip as well as those used on/with the demo page. This doesn't address the choppiness issue, just fixes some faulty logic as mentioned in my previous post and organizes things a bit better in the properties listings.

When you get the chance though, set menuspeed:10, in menuItems.js for your right hand menu, to see if that helps the choppiness thing.

ddadmin
11-23-2006, 01:31 AM
Thanks for the update, I'll add in the changes this weekend.

Regarding the choppiness issue, I tried setting menuspeed to a lower number (ie: 10) for the right menu, though that didn't help. Well, the animation is faster naturally, but I could still clearly see that it's in steps, not a smooth slide. Actually if you set the speed to a large number (ie: 500), you can more clearly see what I'm describing. My original conjecture was that it's due to the right menu being fixed. However, I just tried changing it to "absolute", and it didn't make a difference. However, changing the right menu to be a left menu did fix the problem. So it would seem the right menu animation is giving IE7 some problems.

jscheuer1
12-01-2006, 05:45 AM
I think it may have something to do with your monitor. If I change both the left and right menus to menuspeed:500, - they both move out incrementally but identically and otherwise smoothly in all target browsers. In any event, I am unable (as far as I can tell, to date) to duplicate the phenomenon you are describing.

On another front, on the demo page where you have the link to:

menuItems.js

You have edited the file to get the menus to appear as it suits you. This is fine with me. However, it makes this language:


From the Demo Page's linked menuItems.js:


menu[1] = { //This menu uses the defaults and so requires only this declaration (REQUIRED!!), an id and links
id:'menu1', //use unique quoted id (quoted) REQUIRED!!
fontsize:'100%', // express as percentage with the % sign
linkheight:22 , // linked horizontal cells height
hdingwidth:210 , // heading - non linked horizontal cells width
// Finished configuration. Use default values for all other se . . .

and later in the same file:


From the Demo Page's linked menuItems.js:


menu[3] = { //This menu uses the defaults and so requires only this declaration (REQUIRED!!), an id and links
id:'menu3', //use unique quoted id (quoted) REQUIRED!!
bartext:'RIGHT MENU',
menupos:'right',
kviewtype:'fi . . .

a bit misleading. Could the red parts be removed from that file and any other of the configuration files (like from the .zip) where they might be similarly misleading?

Added Later:

I forgot to mention that I heard back from forkandspoonhelmet.com and the routine I used from their site is in the public domain, whew!

ddadmin
12-01-2006, 12:44 PM
I don't see how it could be my monitor (19" Dell LCD), though it could be my computer, if anything. It's rather antiqued by today's standards (P4 1.7). No worries.

I'll have to remember to get to updating this script in the next few days.

jscheuer1
12-03-2006, 03:22 PM
I didn't mean to disparage your monitor or anything else you are using. My main thought is that I cannot seem to duplicate what you are talking about and that the 'interval' (really a repeating timeout) is user defined. There is no hard coded interval involved other than the one used with the keep_in_view function. Why not try it without that?

For testing purposes, set the kviewtype to absolute and edit mmenu.js here:


function keep_in_view(o){
return;
if(o.keepinview){
if(o.m.ft){
o.m.ft=0;
o.m.topP=o.m.of . . .

That will, of course, take the keep_in_view function completely out of the equation. If the problem persists, it is due to the user defined (or default) menuspeed property and the particular coding I used (combined with how a given browser and system (OS and hardware) executes it) for moving the menu in and out of view.

If a smoother function can be written, I am all for it but, as I say, I do not see the problem so, it is hard for me to play around with it.

ddadmin
12-04-2006, 02:24 AM
Lol I hope you didn't think I thought you were disparaging my computer. I'm not that attached to it (yet).

I've tried out your suggestion above in IE7, though the right most menu remains choppy in terms of the sliding animation. As mentioned though, I no longer think it's an issue considering how you don't experience it, and I've yet to get any emails about it.

With that said, I've just updated the script (http://www.dynamicdrive.com/dynamicindex1/omnislide/index.htm) to include the new .js and properties files, plus removed the 2 comments inside menuItems.js as requested above. Since this is a very minor update, I probably won't annouce it in the Revised Scripts page.

jscheuer1
12-05-2006, 05:16 AM
OK, try this mod then:

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

It hit me while I was sitting on the sofa watching cspan - to increase the 'interval' and to decrease the increment of motion (for the right menu only). I have no idea if it will take care of the problem you see or not but, it is worth a shot. It may only improve it a bit, in which case I can take more drastic action along the same lines. In any case, if it does work, please do not take the mmenu.js file for use on the demo page just yet. I want to consider other possible ramifications of the changes I made before releasing the updated code for public use in the library. I do not like the idea of a default 'interval' of less than 20ms but, perhaps could learn to live with it.

ddadmin
12-05-2006, 07:59 AM
Nope, same deal in IE7 lol. I think we should agree to move on at this point. Too much time spent on chasing phatom ghosts that could be better used just watching TV. :)

Masterskinnie
12-06-2006, 08:39 PM
I use Firefox for my web needs. For some reason, after putting in the script, it says in line ten there is an error that there is to be something there but it does not know what.
Well, Frontpage says that on the same line it is expected that there be a ; at char. 8 Can you help me with this. :confused:

jscheuer1
12-06-2006, 08:53 PM
I use Firefox for my web needs. For some reason, after putting in the script, it says in line ten there is an error that there is to be something there but it does not know what.
Well, Frontpage says that on the same line it is expected that there be a ; at char. 8 Can you help me with this. :confused:

Sounds like a configuration problem. This probably should have been posted to the main DD scripts help section. Don't worry about that now. Which file does FF say that the error is in? Is it:

menuItems.js
mmenu.js

or your HTML page?

Also, FP is a poor choice for editing .js files, I hope you didn't use it for that. It could even mess up the script call on the HTML page. Best to use a text editor to install the script, the browser to test it and ftp to upload the file, stay out of FP whenever possible.

Masterskinnie
12-07-2006, 04:15 PM
Thanks for the help I appreciate it very much

Masterskinnie
12-07-2006, 04:42 PM
Sounds like a configuration problem. This probably should have been posted to the main DD scripts help section. Don't worry about that now. Which file does FF say that the error is in? Is it:

menuItems.js
mmenu.js

or your HTML page?

Also, FP is a poor choice for editing .js files, I hope you didn't use it for that. It could even mess up the script call on the HTML page. Best to use a text editor to install the script, the browser to test it and ftp to upload the file, stay out of FP whenever possible.

it is in the html on my line ten char 8 but i do not know what to do to fix it. it looks alright to me. do you want a copy of the page to see for yourself? I redid what I did in the notepad and the same error occured. FF says "............... goes here."

"menupos:'left'," <<< this is where the error is

jscheuer1
12-07-2006, 06:11 PM
it is in the html on my line ten char 8 but i do not know what to do to fix it. it looks alright to me. do you want a copy of the page to see for yourself? I redid what I did in the notepad and the same error occured. FF says "............... goes here."

"menupos:'left'," <<< this is where the error is

That belongs in the menuItems.js file not the HTML file. Usually an error of that type refers to the line above it not using the proper syntax, the browser is looking for closure on the next line and often will suggest ';' as that is the universal closing symbol in javascript but, not always the appropriate symbol to add to fix the problem. There should be no double quotes (red) around the entry:

"menupos:'left',"

But, I doubt that you have those in the file.

Masterskinnie
12-07-2006, 06:22 PM
Thanks, no I did not put the red quotes in there. Now where do i go for further assistance for the script?

jscheuer1
12-07-2006, 06:28 PM
Start a thread in main DD scripts help section:

http://www.dynamicdrive.com/forums/forumdisplay.php?f=2

Include the requested information and a link to your page or the code from the file(s) involved or at least a few lines above and below the 'error' line. I'm still not sure you know which file the error is in or if you have put code that belongs in one file in another. We can sort these things out in the main help forum.

Masterskinnie
12-14-2006, 07:46 PM
Start a thread in main DD scripts help section:

http://www.dynamicdrive.com/forums/forumdisplay.php?f=2

Include the requested information and a link to your page or the code from the file(s) involved or at least a few lines above and below the 'error' line. I'm still not sure you know which file the error is in or if you have put code that belongs in one file in another. We can sort these things out in the main help forum.

I said I already did, I even gave you a url:) :D

Or did I
Yes I did.
I thought I did let me give it to you

http://www.dynamicdrive.com/forums/showthread.php?t=15716

lodge 778
03-02-2007, 10:37 PM
I found your menu code and thought it would be cool for my website, www.lodge778.org. I down loaded the code and worked with it for a month. I got everything working and it lookes great on the website. But I went to work and found all the menus sitting on top of the page. I checked with IT and they said it was IE6 that was a problem. I can home a fired an old computer with IE6 and sure thing the menus did not work. I checked the code and did not find anythind wrong. Your demos on DymaicDrive work with IE6. Any idea what I did wrong?:eek: ?

jscheuer1
03-03-2007, 02:42 PM
No clue. Someone else mentioned something like this. Post help questions in the main help section. Include a link there to your problem page.

runr140
03-04-2007, 12:02 AM
I really like the possibilities of this script, however I cannot seem to find out how to change the font colors in the menus. I can figure out backgrounds and everything, but font colors for the linked images is driving me nuts.

Any help would be very welcome.

RUNR140

Masterskinnie
04-20-2007, 06:26 PM
I had the answer to this but cannot remember it right now. send a copy of what you have and maybe i can help