Omni Slide Menu Left Offset + Firefox

**atsoum** · 07-04-2008, 09:15 PM

1) Script Title:
Dynamic-FX Slide-In Menu or OmniSlide Menu

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex1/davidmenu.htm
http://www.dynamicdrive.com/dynamici...lide/index.htm

3) Describe problem:
Hello. I am developing a website that is of 800px in width. and the page is always centered at the center of the browser window. As a result when the browser's width is larger than 800 px the website has a "left offset".
I would like to use either Dynamic-FX Slide-In Menu or OmniSlide Menu, only in case one of them provides visibility of the slide menu at as desired X offset position.

I studied the code in Dynamic-FX Slide-In Menu, I found the XOffset=0; attribute, but when I change this value the X Offset is working correctly only in IE. Firefox ignores completely any change I made on the XOffset attribute.

Any suggestions?

**jscheuer1** · 07-05-2008, 03:59 AM

I'm the author of Omni Slide and am familiar with the other script you mention as Omni Slide was adapted from it. A lot would depend upon the markup, layout and style of your page. If you could provide a link to the various (or at least the most promising) attempts you've made, that would help in figuring this out. They need not be officially part of your site. They could just be orphan pages on your domain that demonstrate what you've been trying.

Anyways, Omni Slide has developer modes which allow for just about any sort of custom installation of its left, top, right, or combination thereof slide in menus. And the David Menu (Dynamic-FX Slide-In Menu) may well work out for you if all you need is a left oriented slide in, except that it has certain disadvantages over Omni Slide when a user has anything other than the default text size set in their browser.

But, as I say, to be of much help, I would need to see what you are working with.

Please post a link to the page on your site that contains the problematic code so we can check it out.

**atsoum** · 07-06-2008, 08:34 PM

Thank you for your reply and my congratulations for your script which is very good

Here is the web page where i am willing to use your script and I would like to have only one left menu.

http://www.tzethan.gr/Products.php

As I said and as you can see the web page has a left (and right) offset. The page width is 800px. I want to use a left menu that will start where the page actually starts. Is this possible?

This is actually my first serious attempt to develop a web site so please don't be strict with me if you see things that are not very good

**jscheuer1** · 07-07-2008, 05:57 PM

Well, I've got a sort of custom version of this almost working, I will want to take some time a little later to make it more automatic, but it looks like it can be done. I basically just aligned the menu to the edge of the content and made a cover for (most of) it that has the same background color as the page.

**atsoum** · 07-07-2008, 06:47 PM

That will be very helpful for me. Are you going to paste this script? Could you give me an example of how to solve this issue?

**jscheuer1** · 07-07-2008, 08:02 PM

Now that I've got this working to my satisfaction, I will paste the one script file into this message here and attach the other one, together they are too long for the forum post message limit. The only one I need to paste is the menuItems.js file anyway, to explain its changes and why they are set like they are, as you may need to edit them if you change your page:

menuItems.js -

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[1] = {
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
contentWidth:770 , // use for centered content and left menu, otherwise skip or set to 0.
contentBorder:1 , // use for centered content and left menu, otherwise skip or set to 0.
coverColor:'#ccc', // use for centered content and left menu, usually should be set to the background color of the body element
// Finished configuration. Use default values for all other settings for this particular menu (menu[1]) ///

menuItems:[ // REQUIRED!!
//[name, link, target, colspan, endrow?] - leave 'link' and 'target' blank to make a header
["Menu"], //create header
["Dynamic Drive", "http://www.dynamicdrive.com", ""],
["What's New", "http://www.dynamicdrive.com/new.htm",""],
["What's Hot", "http://www.dynamicdrive.com/hot.htm", ""],
["Message Forum", "http://www.dynamicdrive.com/forums", ""],
["Submit Script", "http://www.dynamicdrive.com/submitscript.htm", ""],
["Link to Us", "http://www.dynamicdrive.com/link.htm", ""],

["FAQ", "http://www.dynamicdrive.com/faqs.htm", "", 1, "no"], //create two column row, requires d_colspan:2 (the default)
["Email", "http://www.dynamicdrive.com/contact.htm", "",1],

["External Links", "", ""], //create header
["JavaScript Kit", "http://www.javascriptkit.com", "_new"],
["Freewarejava", "http://www.freewarejava.com", "_new"],
["Coding Forums", "http://www.codingforums.com", "_new"]  //no comma after last entry

]}; // REQUIRED!! do not edit or remove



////////////////////Stop Editing/////////////////

make_menus();

The contentWidth is the width of the centered content on your page. The contentBorder is the border width of the centered content. And the coverColor is the color of the covering division that the menu will hide beneath when it is retracted. Unless you change your page layout, these values are already set for you. And I removed the other two menus, as you will not be using them. A top menu would still work with the altered mmenu.js file though on your page, but a right menu would still be all the way to the right. Here is the updated mmenu.js file (you shouldn't need to edit it):

Attachment 1889

There may be bugs or adjustments to be made, but I think I got all the broad strokes right.

Let me know how it works out.

**atsoum** · 07-07-2008, 09:40 PM

Thank you for your time and your help.
I have updated my web page http://www.tzethan.gr/Products.php with your new version.

However, there are some problems...

I noticed that the "cover" does not follow the menu when the page
is scrolling down and as a result the menu is revealed.

Another possible issue is the movement of the menu and the approach of it's final position. I have noticed some times that the menu speeds up when it closes to reach it's final destination, but I am not sure if this is always happening.

I would like to ask you 2 more things. If you click on a photo you will see that I applied the Lightbox Script. There is one problem when the Lightbox "begins" the effect as the SlideMenu script is appears somewhat strange in contrast to with the rest of the page. I suspect that this has to do with the z-index? Is there any solution to that?

My other question is a more general question and has to do with "bilingual" support for your script. Will it be possible to enter some kind of a parameter to your script so as to have the menu items listed in 2 languages?

Thank you very much in advance.

**jscheuer1** · 07-07-2008, 11:08 PM

I hadn't even thought to check for scrolling the page. Find this line in the new mmenu.js (it actually occurs twice in that file):

Code:

height = document.getElementById(o.id).getElementsByTagName('div')[0].offsetHeight + 2 + 'px';

Replace the first one with:

Code:

height = (window.innerHeight? window.innerHeight : truebody().clientHeight) + 'px';

Replace the second one with:

Code:

height = Math.max(document.documentElement.offsetHeight, document.body.offsetHeight) + 2 + 'px';

A few lines above it (in both cases) is:

Code:

top = o.menutop - 1 + 'px';

replace the first one with:

Code:

top = 0;

remove the second one.

The scrolling speed changes are elusive, and rather rare (I did notice them when first developing the menu). They mostly occur in FF, and only the first time or so the menu is moved. I believe they are the result of that browser's poor Math interface with Windows. FF is known to have problems with straightforward javascript animation calculations under Windows. This will probably be fixed in FF 3.

The issue with lightbox is easy to fix. In your lightbox.css file:

Code:

#lightbox{
	position: absolute;
	left: 0;
	width: 100%;
	z-index: 300;
	text-align: center;
	line-height: 0;
	}

and:

Code:

#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 290;
	width: 100%;
	height: 500px;
	background-color: #000;
	}

There is no built in multi-lingual support with this menu. However, all language specific content is configured in the relatively small menuItems.js file. Whatever mechanism you use to select different languages for your page may be used to select different menuItems.js files. Or, if using server side tokens to do this for your page, you could probably employ it inside menuItems.js, which could be renamed to menuItems.php, or menuItems.asp, whatever - as required for the server side tokens to be active within it.

**atsoum** · 07-10-2008, 09:15 PM

Hello,
Thank you for all your help and your support. It was very important to me. I have adopted the new changes of the code. You can see the results http://www.tzethan.gr/Products.php

I have some questions about some "minor" things. I am testing this site mainly in Firefox 2.0.X and IE 7. I have noticed some differences. The most significant of which is that while the page is loading, the menu is revealed for a few seconds and afterwards the "cover" hides the menu. In Firefox this phenomenon is more evident. It reveals almost half the menu. In IE it reveals a few pixels. I don't know if this has to do with a possible "bad design" of my web page (the browser is loading 5-6 images and this takes some time and as a consequence allows the menu to be revealed for a few seconds.) Is there a solution to that?

The second "problem" is minor. I noticed that in IE the menu is attached exactly in the actual start of the page and only the bar text is visible. In Firefox however, besides the bar text there are some pixels to the left
of the bar text that are also visible (you will notice a thin white line). I suppose that has to do with some kind of calculations that differ in FF and IE?

I should thank you once again for your time. Maybe if you visit Greece some time I will buy you a "Frappe" and a "souvlaki"

**jscheuer1** · 07-11-2008, 04:01 AM

These (from your source code):

Code:

   	<script src="./css/omnislide/mmenu.js" type="text/javascript"></script>
    <script src="./css/omnislide/menuItems.js" type="text/javascript"></script>

Should go in the head of the page, right after the title and any meta tags if that's workable, otherwise as soon as possible in the head (scripts should never be before the title or meta tags).

That will at least give the script a shot at loading up faster. The cover initiates in two phases, one as the page is loading, then finalizes once the page is fully loaded.

You can possibly adjust the way FF aligns the menu to the cover by adjusting the (from menuItems.js):

Code:

contentBorder:1 , // use for centered content and left menu, otherwise skip or set to 0.

If not, I can probably think of other ways to influence that (FF alignment). I made it so IE ignores that setting because it sees the border as part of the element when you set its width, in FF the border is additional to the width. This is due to IE and FF having different 'Box Models'.