473,320 Members | 2,054 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

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



sorry about that,

This is the event handling element:

<div id="menu">
<ul>
<li>....
<li><a
href="javascript:expand_menu(document.getElementBy Id('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").getElementsByTagN ame("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.d isplay=="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.

Feb 7 '07 #1
2 1939
On Feb 7, 11:45 am, "webdeveloper" <augustsham...@hotmail.comwrote:
sorry about that,

This is the event handling element:

<div id="menu">
<ul>
<li>....
<li><a
href="javascript:expand_menu(document.getElementBy Id('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").getElementsByTagN ame("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.d isplay=="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.
--
Rob

Feb 7 '07 #2
On Feb 6, 7:07 pm, "RobG" <r...@iinet.net.auwrote:
On Feb 7, 11:45 am, "webdeveloper" <augustsham...@hotmail.comwrote:
sorry about that,
This is the event handling element:
<div id="menu">
<ul>
<li>....
<li><a
href="javascript:expand_menu(document.getElementBy Id('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").getElementsByTagN ame("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.d isplay=="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.

--
Rob


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

Feb 8 '07 #3

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
by: BigDadyWeaver | last post by:
I am using the following code in asp to define a unique and unpredictable record ID in Access. <% 'GENERATE UNIQUE ID Function genguid() Dim Guid guid =...
4
by: pete | last post by:
I found it in the view source of a corporate website. <script Language="Javascript"> <!-- var keyMacro= ]; //--> </script>
53
by: usenet | last post by:
See <ul> <li><a name="link1" onClick="alert(this.name);return false;" href="#">Link1</a></li> <li><a name="link2" href="javascript:alert(this);">Link2</a></li> <li>Item 3</li> </ul> ...
9
by: MLH | last post by:
Say I open a form (MyForm) in design view, then I close it and dbl-click it in the database window to open it. Shouldn't the Activate event occur in all such situations? What might the case(s) be...
1
by: webdeveloper | last post by:
An onclick event that activates two functions: one that expands a menu, another that swaps an image in the same menu hierarchy; in FF, only one click is required to both swap the image and expand...
7
by: mavigozler | last post by:
IE7 does not appear to set an event on contained text inside SPAN elements whose 'onclick', 'onmouseover', and 'onmouseout' events, defying the HTML recommendation. Firefox appears to conform. ...
2
by: rathour | last post by:
<?php session_start(); require_once('db.php'); include('functions.php'); $user = get_username ( $_SESSION ); //if ( $_SESSION ): checkLogin ( '1 2' ); ?>
5
by: Aaron Gray | last post by:
Here's a big issue, does IE8 support 'this' properly on events now ? It certainly confuses things if it does ! Aaron
2
by: bips2008 | last post by:
The code seems to work fine in other browser but in IE it throws this error. This is very urgent for me and any help would be greatly appreciated For your convienence i have posted the code for the...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.