Ars Informatica
June 23, 2017
Home
Health Care Informatics
Web-based MySQL/PHP Databasing
Programming
Web Development
Favourite Software
Hardware for the Frugal Fanatic
Graphic Design and Image Processing
Free Scripts and Software
About Us
Contact Us
Links
 
 

 Article Feed for this site

Addendum to SurgeMenu documentation: Code variations to accommodate idiosyncratic menu positioning

November 17, 2007

The SurgeMenu code as originally developed works on most pages without modification: see the examples grow_menu.php, funky_menu.php and deep_menu.php as included in the SurgeMenu12.zip file.

Still, it doesn't work on all pages. This has nothing to do with the quality of the code itself - it reflects the quirks of HTML code and various browsers' interpretations of HTML, CSS, and Javascript ...

For most if not all of these implementations, there's an easy answer.

Four alternate code variations are available, and called simply using one of the following declarations:

$code_variant = 1;
$code_variant = 2;
$code_variant = 3; or
$code_variant = 4;

Include one of the above in the code you use to call SurgeMenu, i.e. after the style definitions:

$menuitem_height = 20;
$menuitem_style = array('font' => '12pt times', 'color' => 'black',
'background' => 'white', 'indent' => '7px');
$menuitem_hover = array('font' => '12pt times', 'color' => 'white',
'background' => '#316ac5', 'indent' => '7px');
$menu_opacity = 100;
$menu_offset = array('x' => '0', 'y' => '22');

$code_variant = 1;

etc.

Even if your menu appears to display correctly, test it. Check it in Internet Explorer, Firefox, Safari, Opera - all the main browsers. If it breaks in one, try the other variations. Between the original code and the four variants, you should get it to work.

See my article Building a Multi-Browser Web Page Testing Suite for links to all commonly-used browsers for the Windows PC, Mac and linux platforms.
 

SurgeMenu Positioning Code - the Devil's in the Details

This following section explains why these code variants are needed, and how and why they work. None of this is required reading - it's only for those of you who want the nuts-and-bolts explanation.

Determining the page position of a menu should be easy, but isn't. It depends on whether the calling element is absolutely or relatively or not formally positioned, whether any of the parents are absolutely or relatively or not formally positioned, on whether the calling element is contained within a DIV or TABLE or whether its parents are, on how these are defined and how nested. On whether you use Internet Explorer or Firefox or Safari or others, on which version you're using.

I wish SurgeMenu could analyze the calling code and determine how to adapt for all of the above - and it may, in future versions, if the interest exists and I get around to it. Or if you, the user, choose to rework it until it does. It's open-source software, you're free to do so.

This is how it should work: the code sees if the calling element is contained within another (parent) element. If so, it calculates its left and top offsets, and adds these to the offsets of the calling element within its parent. And so on.

Here's the original, default code:

	divParent = divElement.offsetParent
		while (divParent != null) {
		divLeft += divParent.offsetLeft
		divTop += divParent.offsetTop
		divParent = divParent.offsetParent;
	}

Code Variant One

The default code doesn't work for all pages. Grow_menu.php, as implemented on the
grow.ars-informatica.ca web site, doesn't work this way. Here, the calling element's offsetLeft and offsetTop are its actual page positions for IE, Safari, or Google Chrome, but not the other Netscape/Mozilla browsers. The following is required, instead:

	if (navigator.appName == "Netscape"
		&& navigator.vendor != "Apple Computer, Inc."
		&& navigator.vendor != "Google Inc.") {
		obj = divElement.offsetParent
		while (obj = obj.offsetParent) {
			divLeft += obj.offsetLeft
			divTop += obj.offsetTop
		}
	}

Of course, it's too much to ask folks to make these code revisions themselves. If the original code doesn't work, try

$code_variant = 1;

in the PHP code call, following the style definitions.
 

Code Variant Two

SurgeMenu documentation pages SurgeMenu_doc_4.htm and SurgeMenu_doc_5.htm demonstrate another version of menu positioning code, one that accommodates for an absolutely-positioned parent. Unfortunately, this code doesn't integrate easily into the above two examples, since it is required for some such situations - but others with absolutely-positioned parents require either the default code, or the variant that follows this one:

	divParent = divElement.offsetParent
	while (divParent != null) {
		if (divParent.style.position == "absolute") break
		divLeft += divParent.offsetLeft
		divTop += divParent.offsetTop
		divParent = divParent.offsetParent;
	}

As above, you don't need to change the SurgeMenu.php code to try this code variant. Use the

$code_variant = 2;

declaration in the PHP code on the calling page instead.
 

Code Variant Three

Some of the articles demonstrating the SurgeMenu menu system on the Ars Informatica web site, i.e. that on SurgeMenu Basics: Example and Code, require yet another menu positioning code variation: one that stops adding parent offsets ONLY if the parent is absolutely defined AND it's a non-Netscape browser, Safari, or Google Chrome.

	divParent = divElement.offsetParent
	while (divParent != null) {
		if (divParent.style.position == "absolute"
			&& (navigator.appName != "Netscape" 
			|| navigator.vendor == "Apple Computer, Inc." 
			|| navigator.vendor == "Google Inc.")) break
		divLeft += divParent.offsetLeft
		divTop += divParent.offsetTop
		divParent = divParent.offsetParent;
	}

Again, you need not modify SurgeMenu.php yourself. Try:

$code_variant = 3;

Code Variant Four

Finally, some pages, i.e. documentation pages SurgeMenu_doc_2.htm and SurgeMenu_doc_3.htm, should not have parent offsets added to the calling element's offsets at all. So we omit this code altogether. Specify

$code_variant = 4;

to try this version.
 

Summary

If menus don't position correctly with SurgeMenu, try the above code variants.

Even if they appear to display correctly, TEST THEM. Try them in all browsers: Internet Explorer, Firefox, Safari, Opera, Netscape Navigator. If they break in one, try the other variations. Between them, these four variations should fix most, if not all, implementations.
 

More SurgeMenu

SurgeMenu: a multi-platform PHP/Javascript cascading Cascading Menu System
SurgeMenu Basics: Example and Code
SurgeMenu Sample Menu: Simple
SurgeMenu Sample Menu: Funky/Complex
SurgeMenu Sample Menu: Deeply-Nested, Complex
 

Source Code

magnifier iconview SurgeMenu Cascading Menu System source code

download icondownload SurgeMenu12.zip -
SurgeMenu code and documentation
 

The SurgeMenu Dynamic Cascading Menu System is free, modifiable software released under the GNU General Public License (GPL).

Copyright © 2017 Ars Informatica. All Rights Reserved.