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

Discussion in 'Javascript' started by webdeveloper, Feb 7, 2007.

  1. webdeveloper

    webdeveloper Guest

    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.
     
    webdeveloper, Feb 7, 2007
    #1
    1. Advertising

  2. webdeveloper

    RobG Guest

    On Feb 7, 11:45 am, "webdeveloper" <> wrote:
    > 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.


    --
    Rob
     
    RobG, Feb 7, 2007
    #2
    1. Advertising

  3. webdeveloper

    webdeveloper Guest

    On Feb 6, 7:07 pm, "RobG" <> wrote:
    > On Feb 7, 11:45 am, "webdeveloper" <> wrote:
    >
    > > 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.
    >
    > --
    > 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
     
    webdeveloper, Feb 8, 2007
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Mr. SweatyFinger
    Replies:
    2
    Views:
    2,072
    Smokey Grindel
    Dec 2, 2006
  2. =?Utf-8?B?cGlja2VkYW5hbWU=?=

    aspmenu require click to activate

    =?Utf-8?B?cGlja2VkYW5hbWU=?=, Mar 5, 2007, in forum: ASP .Net
    Replies:
    2
    Views:
    705
    =?Utf-8?B?cGlja2VkYW5hbWU=?=
    Mar 6, 2007
  3. Junkone
    Replies:
    2
    Views:
    218
    Jarmo Pertman
    Oct 27, 2010
  4. webdeveloper
    Replies:
    1
    Views:
    92
  5. Ed
    Replies:
    4
    Views:
    160
Loading...

Share This Page