View Full Version : [Tip] Adjusting vertical offset of JsDOMenubar

08-08-2008, 05:00 AM
1) Script Title: JsDOMenuBar

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

3) Describe problem: In Mozilla Firefox 2, the menubar appears where you put it on the page, but the submenu popups ALWAYS appears right near the top of the browser window. Subsequent lower child menus appear correctly near their parent though, so it's just the initial popup vertical component which we need to fix.

Solution: Open jsdomenubar.js, scroll down to line 80. Note that the preceeding code only checks for ie5, ie6, safari (I guess it assumes other browsers handle the offset calculation correctly?).

Edit: Oops, my previous "fix" screwed the offset for IE (I'm using IE6). The previous two "if { }" blocks were not if-else blocks; so my else statement was being executed for IE as well. Therefore you need to chain the if-else blocks.

Since I can't highlight the changes in [ code ] blocks, I'll have to paste "before" and "after" pics. Code starts at line 77 of jsdomenubar.js:

Original code:

if (safari) {
x += 8;
y += 13;
menuobj.style.left = . . .

Change it to this:

else if (safari) {
x += 8;
y += 13;
// --- begin custom code ---
else {
y = y + 200; // vertical offset for non-ie5, ie6, safari
// --- end custom code ---
menuobj.style.left = . . .

...replace 200 with how many pixels further down the page you want to bump it down. This fix is only for menubars defined as static; for other types just look at the nearby code (it's similar). Also, this only fixes one menubar; if you have other menubars defined for other pages, you'll have to fix them as well, probably by modifying a duplicate of jsdomenubar.js for each of them.

Might get messy with multiple includes on one page (browser'll probably complain about duplicate definitions), but I don't think having multiple menubars on one page is a good idea anyway.

If your particular browser still has a funny offset feel free to add another if { } block, but I think we've already covered the majority of cases. Sigh for strict standards compliance...

Hope this helps someone.

Edit 2:
Take a look inside jsdomenu.js, at the very last section.

var ie50 = isIE50(); // Private field
var ie55 = isIE55(); // Private field
var ie5 = isIE5(); // Private field
var ie6 = isIE6(); // Private field
var ie = isIE(); // Private field
var opera = isOpera(); // Private field
var safari = isSafari(); // Private field

As you can see (and I confirmed by looking through everything else), the script only adjusts for those browser's quirks. You'd think with the popularity of FF in recent years we'd see it there -- I was kinda surprised to see even Safari got tested for.

This means if JsDOMenubar is doing other funky things on FF then you'll have to write fixes for it as well. Fortunately most of the other functionality of the JsDOMenubar script seems to work as intended, so it isn't a big problem.