[DHTML] Omni Slide Menu script

[jscheuer1]

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

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]

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]

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]

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]

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/s...mni_top_fixed/

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

[ddadmin]

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]

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]

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]

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/s...mni_top_fixed/