Re: A problem with an apparently common JS menu...

From: RobG <rgqld@iinet.net.au>
Date: Wed Nov 16 2005 - 02:48:10 CET

Bryan wrote:
>>> Invalid markup, insufficient feature tests, proprietary referencing,
>>> evil[tm] eval(), and nonsensical, potential harmful comments (in that
>>> order) ... what do you expect?
>
> If I knew, I wouldn't need to ask... :P
>
> I removed all comments, got rid of eval, now I just need to know what
> part of the markup is invalid, what is "proprietary referencing", and
> what feature tests I should run...
>
> It still runs perfectly in IE, but the menu doesn't budge in Netscape
> when the submenu is made visible...

http://www.alistapart.com/articles/horizdropdowns/

>
> Code now looks like:
>
> <SCRIPT LANGUAGE="JavaScript">

The language attribute is deprecated, type is required:

Ta Tom :-)

[...]

The rest of your script is amazingly complex for something so simple.
Loading the href into the main frame is achieved with a target
attribute, so the 'loadframe' function seems redundant and makes your
page unnecessarily reliant on scripting.

Try the following - it works whether scripting is enabled or not (links
have been truncated to '#' and target attributes removed for the sake of
the simplicity). It needs further work before commercial use but shows
an alternative approach that doesn't require any in-page scripting: it
is dependent on the page structure and the use of matching 'titlex' and
'submenux' ids numbered consecutively from 1.

I've moved the submenu divs inside the title divs and allowed the
document flow to place elements. Use CSS to adjust their position, not
absolute positioning.

Feature testing is done up-front - if scripting or suitable features
aren't supported, the menus are shown in full (i.e. your site remains
fully functional).

<html>
<head>
<title>Loopy stuff</title>
<style type="text/css">
.submenu{
padding-left: 20px;
}
</style>

var smRefs = [];

function registerMenus(){

var body = document.body || document.documentElement;

// Do appropriate feature tests
if (!document.getElementById || !body || !body.style) return;

   var i=0, el;
   while ((el = document.getElementById('title' + ++i))){
     smRefs[i] = document.getElementById('submenu' + i)
     smRefs[i].style.display = 'none';
     var firstA = el.firstChild;
     while ('a' != firstA.nodeName.toLowerCase()){
       firstA = firstA.nextSibling;
     }
     firstA.onclick = toggleSubs;
   }
}

</script>
</head>
<body onload="registerMenus();">

<div class="title" id="title1">
   <a href="#">Column Covers</a>
   <div class="submenu" id="submenu1">
     <a href="#">Product Data</a><br>
     <a href="#">Gallery</a>
   </div>
</div>

<div class="title" id="title2">
   <a href="#">Ceiling Specialties</a>
   <div class="submenu" id="submenu2">
     <a href="#">Perimeter Pockets</a><br>
     <a href="#">Column Collars</a><br>
     <a href="#">Partition Closures</a><br>
     <a href="#">Baffle Ceilings</a><br>
   </div>
</div>

</body>
</html>

-- 
Rob

Received on Mon Nov 21 03:30:57 2005

comp.lang.javascript archive

Re: A problem with an apparently common JS menu...