PDA

View Full Version : 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/dynamicindex1/omnislide/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?:confused:

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 -


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

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):


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

Replace the first one with:


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

Replace the second one with:


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

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


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

replace the first one with:


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:


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

and:


#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?:confused:

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":) :D

jscheuer1
07-11-2008, 04:01 AM
These (from your source 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):


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'.

jscheuer1
07-11-2008, 04:21 AM
I just did some testing and it looks like for your setup that if you add this to the head of the page:


<style type="text/css">
#menu1cover {
border-right:1px solid #646464;
}
</style>
<!--[if IE]>
<style type="text/css">
#menu1cover {
border-right:none;
}
</style>
<![endif]-->

it should work out.

jscheuer1
07-11-2008, 12:20 PM
This may be an even better way, because if it works like I think it will (it did in a local demo), it will cover properly from the beginning.

By now I think you know that in mmenu.js there are two sections where we set the cover's styles. They both begin:


with(document.getElementById(o.id+'cover').style){

And in each of these sections there is a line for left:


left = getedge(o) - document.getElementById(o.id).getElementsByTagName('div')[0].offsetWidth - o.barwidth/2 + 'px';

and:


left = getedge(o) - document.getElementById(o.id).getElementsByTagName('div')[0].offsetWidth - (!o.firsttime? o.barwidth/2 : o.contentBorder) + 'px';

respectively.

If you get rid of both of these 'left' lines, or comment them out, you can control the left/right orientation of the cover using css alone. Here are the styles to use:


<style type="text/css">
#menu1cover {
border-right:1px solid #646464;
right:50%;
margin-right:386px;
}
</style>
<!--[if IE]>
<style type="text/css">
#menu1cover {
border-right:none;
}
</style>
<![endif]-->

The 386 is arrived at by taking half the width of your content (770/2) which is 385 and adding the width of your content's border (1 in this case).

If either of these things changes, you can adjust the value.

Now, this is less than ideal from my point of view because it requires a bit of math on your part, which makes it a little tricky for someone unfamiliar with the menu to deal with. However, I'm sure you can handle it.

atsoum
07-12-2008, 09:37 AM
Hello again and thanks for all.

Regarding my previous question by setting contentBorder:1 to 0 the problem solved in FF. I tried to follow your advise and put these lines


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

at the top of my page. The problem unfortunatelly persists. Afterwards I thought to
have these lines after the


<body bgcolor="#CCCCCC">

the problem still remained.

Late at night I saw your posts and followed your instructions. I did as you said in your second post. The only thing I changed was border-right:1px from 1px to 0px(because is 0).

The results are that the problem is perfectly solved in IE but in FF I still have it. You can see the results here :

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

To perform a good test I cleaned browser's cache, so as to see the page loading as a visitor would see it. I would like to remind you that I am using FF 2.0.0.15 and IE 7.0

As you can see the results in FF are that the menu is visible until the browser loads all the images. I was wondering again if I should change something else in my code. I am accessing a database to get model names and using these names to show the right images. Should I use a preload method? I am a little bit confused... I cannot understand why IE respects the changes you suggest me but FF does not. :confused::confused:


Now, I would like to report some other minor things, as if I were a "beta tester" :)

The first one is that in IE if someone scrolls down the page before all the images are fully loaded then the menu will be revealed for a while. I really didn't try that in FF. :rolleyes:

The other thing is a suggestion. When the menu opens and I click in a link the menu stays opened. I would like to try at first the menu to be closed and afterwards load the page. I don't know if this is a good technique, but my links are targeting to ("") same browser window and this causes the menu to be opened for a while.

Thank you again for your time:)

jscheuer1
07-12-2008, 02:52 PM
The border style of 1px is required in FF and others (IE will not need it or use it) to maintain the look of your page. But the contentBorder property should probably be set to 1 as well to maintain proper alignment in non-IE.

This should take care of the problem we have been working on about the menu not being covered when it appears -

Add this to the styles (highlighted):


<style type="text/css">
#menu1 {
visibility:hidden;
}
#menu1cover {
border-right:1px solid #646464;
right:50%;
margin-right:386px;
}
</style>
<!--[if IE]>
<style type="text/css">
#menu1cover {
border-right:none;
}
</style>
<![endif]-->

Then in the mmenu.js file, right before the line that says:

o.firsttime = true;

Add these two lines:

if(o.firsttime)
document.getElementById(o.id).style.visibility = 'visible';

so you end up with:


if(o.firsttime)
document.getElementById(o.id).style.visibility = 'visible';
o.firsttime = true;

To get the menu to retract when one of its links is clicked, find:


<a href="'+o.menuItems[i_tem][1]+'"

in the mmenu.js file, it should only appear once in that file. It's in a rather long line. Add to it so it looks like so:


<a onclick="var m = document.getElementById(\'' + o.id + '\');m.onmouseover = null;moveout1(m, true);var ref = this;setTimeout(function(){window.open(ref.href, ref.target? ref.target : \'_self\');m.onmouseover=function(){movein(m);};}, 100);return false;" href="'+o.menuItems[i_tem][1]+'"

And find:


function moveout1(el){
var aw=el.menupos=='top'? el.b.offsetHeight : el.b.offsetWidth, m1=el.getElementsByTagName('div')[0];
if(el.moving)
clearTimeout(el.moving);
if (parseInt(m1.style[el.menupos])>aw-(el.menupos=='top'? m1.offsetHeight : m1.offsetWidth)+10)
move(el, -10);
else {
m1.style[el.menu . . .

Change it to:


function moveout1(el, mm){
var aw=el.menupos=='top'? el.b.offsetHeight : el.b.offsetWidth, m1=el.getElementsByTagName('div')[0];
if(el.moving)
clearTimeout(el.moving);
if (!mm && parseInt(m1.style[el.menupos])>aw-(el.menupos=='top'? m1.offsetHeight : m1.offsetWidth)+10)
move(el, -10);
else {
m1.style[el.menu . . .

atsoum
07-15-2008, 09:12 PM
Hello again my friend.

The script now runs perfectly. You can see it here

www.tzethan.gr/Products.php

I didn't add your last changes to retract the menu because I tested it locally and the menu disappeared in FF. In IE I had error messages about line 89. I suppose there is an error in the .js file. I suspect that this has to do with " and '.

However, I am very pleased right now with the menu functionality and the feature that "hides" the menu is very useful. So I will not stick to retract functionality. You've already helped me so much!!:)

I would like to ask you something else. By mistake in a .css file, an interesting effect was created. If you visit the page with IE and place the mouse upon a photo then the background color of the photo changes (as it is a PNG transparent image), but the problem is that in FF I cannot have the same results:(

The code is the above:


<div class="img-left-border-notopmargin">
<a class="imagelink" href="T102_Big.png" rel="lightbox[Toasters]" >
<img src="T102_Small.png" alt="" width="180" height="230" /></a>
</div>


in the .css file


.img-left-border-notopmargin
{
float: left;
margin: 10px 80px 0px 50px;
}



.content2 a.imagelink:link {color: rgb(75,75,75);}


.content2 a.imagelink:hover{
background-color:DeepSkyBlue;
color: rgb(150,150,150);
text-decoration: none;
}


.content2 a.imagelink:visited{color: rgb(75,75,75);}

What am I doing wrong?

atsoum
07-18-2008, 09:51 AM
Any suggestions?

jscheuer1
07-18-2008, 02:17 PM
I didn't realize there was another question in there. I stopped at 'works perfectly' last time I read this. Links are inline elements and therefore orient to the baseline and are not filled out by other elements that they contain. IE chose to make an exception here though, I think because it is so counter intuitive.

I believe that if you set the display:


.content2 a.imagelink:link {
color: rgb(75,75,75);
display:table-cell;
display:-webkit-inline-box;
}

It can work out (table-cell is valid, but ignored and unecessary in IE, but messes up Safari, which likes its proprietary -webkit-inline-box).

Safest to use is:


.content2 a.imagelink:link {
color: rgb(75,75,75);
display:block;
}

But that can mess up layouts because it adds a line break, but usually only if none already exists, which it looks like it does, so should be fine in this particular case.