Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Why does IE6 require a doulbeclick for an onclick event to activate full code?

Reply
Thread Tools

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

 
 
webdeveloper
Guest
Posts: n/a
 
      02-07-2007


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.

 
Reply With Quote
 
 
 
 
RobG
Guest
Posts: n/a
 
      02-07-2007
On Feb 7, 11:45 am, "webdeveloper" <(E-Mail Removed)> wrote:
> 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

 
Reply With Quote
 
 
 
 
webdeveloper
Guest
Posts: n/a
 
      02-08-2007
On Feb 6, 7:07 pm, "RobG" <(E-Mail Removed)> wrote:
> On Feb 7, 11:45 am, "webdeveloper" <(E-Mail Removed)> wrote:
>
> > 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

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
what does this error mean `activate': can't activate activesupport (=3.0.1, runtime) for ["activerecord-3.0.1"] Junkone Ruby 2 10-27-2010 09:13 AM
OpenRico: How to activate an AccordionTab with "onClick()"? Kay-Uve Höhns Javascript 4 08-21-2007 11:24 AM
aspmenu require click to activate =?Utf-8?B?cGlja2VkYW5hbWU=?= ASP .Net 2 03-06-2007 11:26 AM
Why does IE6 require a doulbeclick for an onclick event to activate full code? webdeveloper Javascript 1 02-05-2007 12:03 PM
findcontrol("PlaceHolderPrice") why why why why why why why why why why why Mr. SweatyFinger ASP .Net 2 12-02-2006 03:46 PM



Advertisments