Why does IE6 require a doulbeclick for an onclick event to activate full code?

[webdeveloper]

sorry about that,

This is the event handling element:

<div id="menu">
<ul>
<li>....
<li><a
href="javascript:expand_menu(document.getElementById('extend'))"
id="extend">Text <img src="" id="arrow" src="arro-u.gif"> </a>
<ul>
<li>......</li>....</ul></div>

Once that linked is clicked on, it's supposed to expand the menu
below, as well as swap the image, simultaneously.
It's what happens in FF. But in IE it takes 2 clicks, one for the
image to swap, another for the menu to expand. But only on the first
click. On any subsequent clicks, only one click is needed for both
functions to fire even in IE. But now the image displayed is the wrong
one.

These are the functions:

onload=function()
{document.getElementById("menu").getElementsByTagName("ul")
[1].setAttribute("style","display:none;")
} //just to ensure the inline style attribute, don't remember why it
was necessary


function swap_img() { //function to swap the image inside the <a>

m=document.images.arrow;
if(m.src.indexOf("arrow-u")>0) {
m.src=m.src.replace(/arrow-u/,"arrow-d");
}
else {
m.src=m.src.replace(/arrow-d/,"arrow-u");
}
}



function expand_menu(node) { //function to expand the menu div


drop=node.parentNode || node.parentElement;
kids=drop.childNodes[2];


if(kids.nodeName.toLowerCase()=="ul"&&kids.style.display=="none") {
kids.style.display="block";
}
else {
kids.style.display="none";
}

swap_img(); //the image swap function above is called from this
function

}


Hope that wasn't too cluttered thanks for any help.

 

[RobG]

sorry about that,

This is the event handling element:

<div id="menu">
<ul>
<li>....
<li><a
href="javascript:expand_menu(document.getElementById('extend'))"
id="extend">Text <img src="" id="arrow" src="arro-u.gif"> </a>

Do not insert script into a link's href attribute, it causes problems
with IE (as you've discovered) and is a bad design choice. Use a
meaningful href attribute and move the code to an onclick handler. If
there is no suitable href value, don't use a link, use some other
element and style it to appear like a clickable element.

Also, you are using getElementById to get a reference back to the same
element. Just pass 'this' to the function (which means you probably
don't need the ID at all):

<li><a href="" id="extend" onclick="expand_menu(this)">Text <img

<ul>
<li>......</li>....</ul></div>

Once that linked is clicked on, it's supposed to expand the menu
below, as well as swap the image, simultaneously.
It's what happens in FF. But in IE it takes 2 clicks, one for the
image to swap, another for the menu to expand. But only on the first
click. On any subsequent clicks, only one click is needed for both
functions to fire even in IE. But now the image displayed is the wrong
one.

These are the functions:

onload=function()
{document.getElementById("menu").getElementsByTagName("ul")
[1].setAttribute("style","display:none;")
} //just to ensure the inline style attribute, don't remember why it
was necessary

If you are going to use script to reveal the menu items, it is good
practice to hide them using script in the first place, otherwise users
without scripting won't be able to use the menu. Therefore browser-
friendly collapsible menus will ensure that they work without any
scripting and add all the script stuff (classes for "clickable"
elements, collapsing the tree, etc.) only if appropriate support is
detected.

You can also do most of the hiding, showing and image swaps by
toggling a CSS class rather than explicitly via script. Make the
arrow-d image and display:none part of a "hide" class, and arrow-u and
display:default part of a "show" class. Then just toggle the class of
the UL.


[...]

if(kids.nodeName.toLowerCase()=="ul"&&kids.style.display=="none") {
kids.style.display="block";
}
else {
kids.style.display="none";
}

You can replace the entire if block if you write this toggle as:

if(kids.nodeName.toLowerCase()=="ul") {
kids.style.display = (kids.style.display == 'none')? '' : 'none';
}


Use a similar function to swap the className.

 

[webdeveloper]

sorry about that,

This is the event handling element:

<div id="menu">
<ul>
<li>....
<li><a
href="javascript:expand_menu(document.getElementById('extend'))"
id="extend">Text <img src="" id="arrow" src="arro-u.gif"> </a>

Do not insert script into a link's href attribute, it causes problems
with IE (as you've discovered) and is a bad design choice. Use a
meaningful href attribute and move the code to an onclick handler. If
there is no suitable href value, don't use a link, use some other
element and style it to appear like a clickable element.

Also, you are using getElementById to get a reference back to the same
element. Just pass 'this' to the function (which means you probably
don't need the ID at all):

<li><a href="" id="extend" onclick="expand_menu(this)">Text <img
src="" id="arrow" src="arro-u.gif"> </a>

<ul>
<li>......</li>....</ul></div>

Once that linked is clicked on, it's supposed to expand the menu
below, as well as swap the image, simultaneously.
It's what happens in FF. But in IE it takes 2 clicks, one for the
image to swap, another for the menu to expand. But only on the first
click. On any subsequent clicks, only one click is needed for both
functions to fire even in IE. But now the image displayed is the wrong
one.

These are the functions:

onload=function()
{document.getElementById("menu").getElementsByTagName("ul")
[1].setAttribute("style","display:none;")
} //just to ensure the inline style attribute, don't remember why it
was necessary

If you are going to use script to reveal the menu items, it is good
practice to hide them using script in the first place, otherwise users
without scripting won't be able to use the menu. Therefore browser-
friendly collapsible menus will ensure that they work without any
scripting and add all the script stuff (classes for "clickable"
elements, collapsing the tree, etc.) only if appropriate support is
detected.

You can also do most of the hiding, showing and image swaps by
toggling a CSS class rather than explicitly via script. Make the
arrow-d image and display:none part of a "hide" class, and arrow-u and
display:default part of a "show" class. Then just toggle the class of
the UL.

[...]

if(kids.nodeName.toLowerCase()=="ul"&&kids.style.display=="none") {
kids.style.display="block";
}
else {
kids.style.display="none";
}

You can replace the entire if block if you write this toggle as:

if(kids.nodeName.toLowerCase()=="ul") {
kids.style.display = (kids.style.display == 'none')? '' : 'none';

}

Use a similar function to swap the className.

Thanks for the attention. I'm going to try it. Not quite sure if i
used <a onclick="" initially, and changed it later for some reason,
but will try and see anyway.
I'm planning on placing menu links elsewhere on the page, so non-
javascript users should be ok. Thanks! Hope it works