Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Jun 2012
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts

    onclick not working in IE

    Hello, I need a little help with the onclick event which is not working properly in IE, but working just fine in FF and Chrome. Basically, I have an image menu with four links. The images are named "home-on.png", "home-off.png", "about-on.png", "about-off.png", etc. These images are background images in the menu <ul>. The default "off" images are set using the CSS background property. The menu needs to handle 3 events:

    1) onmouseover, change the "-off" image to the "-on" image.
    2) onmouseout, change the "-on" image back to the "-off" image.
    3) onclick, the "-on" image should stay on until a different button is clicked.

    I wrote 3 javascript functions to handle this. Here is the javascript:

    Code:
    function setActive(id) { // to set the active button
        // first turn off all buttons
        document.getElementById('home').style.background="url(images/home-off.png)";
        document.getElementById('about').style.background="url(images/about-off.png)";
        document.getElementById('portfolio').style.background="url(images/portfolio-off.png)";
        document.getElementById('contact').style.background="url(images/contact-off.png)";
      
        // then turn on only the button that was pressed
        var imgsrc = "url(images/" + id + "-on.png)";
        document.getElementById(id).style.background=imgsrc;
        activeButton = id;
    }
    
     function turnOff(id) { // for onmouseout, turn off the button, unless it's the "active" button
       if(id == activeButton) {
         var imgsrc = "url(images/" + id + "-on.png)";
          } else {
         var imgsrc = "url(images/" + id + "-off.png)";
          }
         document.getElementById(id).style.background=imgsrc;
     }
    
     function turnOn(id) { //for onmouseover, turn on the button
         var imgsrc = "url(images/" + id + "-on.png)";
         document.getElementById(id).style.background=imgsrc;
     }
    And the html for the menu:

    Code:
    <ul id="menu">
       <li><a class="home" href="#section1" id="home" onmouseout = "turnOff('home')"
            onmouseover = "turnOn('home')" onclick="setActive('home')">Home</a></li>
     
     <li><a class="about" href="#section2" id="about" onmouseout = "turnOff('about')" 
            onmouseover = "turnOn('about')" onclick="setActive('about')">About</a></li>
     
     <li><a class="portfolio" href="#section3" id="portfolio" onmouseout = "turnOff('portfolio')" 
            onmouseover = "turnOn('portfolio')" onclick="setActive('portfolio')">Portfolio</a></li>
     
     <li><a class="contact" href="#section4" id="contact" onmouseout = "turnOff('contact')" 
            onmouseover = "turnOn('contact')" onclick="setActive('contact')">Contact</a></li>
    
    <ul>
    The images are name "home-on.png", "home-off.png", "about-on.png", "about-off.png" etc, so you can see the functions just take the ID that was passed to it (home, about, etc) and append either "-on.png" or "-off.png" to the end to get the image name. As I said, this works fine in FF and Chrome, but not in IE. In IE, when I hover over an image, it turns on, but after clicking it, it goes back to the off state when the mouse is moved away.

    Additionally, since the default page is the "home" page, I have a window.onload function which calls setActive to turn the home button on by default. This works in IE, so it seems IE doesn't have a problem with my setActive function. However, when I click any of the other buttons, the "home" button stays on, and the other button that I clicked does not change to on, nor does the home button turn off. So it seems the problem lies within the onclick. I searched around before making this post, and have tried "onclick", "onClick", "onMousedown" which seemed to help other people, but they don't work for me.

    I hope I have described my problem clearly enough. If anyone can offer me any help, I would greatly appreciate it.
    Last edited by kan3xiao; 09-23-2012 at 10:27 AM.

  • #2
    New Coder
    Join Date
    Jun 2012
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I've tried everything I can think of now. I rewrote my javascript functions so that instead of changing the background image, they change the class name of the object. Then I created new classes which had the "on" images as their background images. Again, this works perfectly in FF and Chrome. As before, the mouseover and mouseout effect works in IE, but it still won't change the one that is clicked to the "on" image. I've been reading a lot online and seen a lot about onclick and href not mixing well together, but even if I remove the href from the code, it still doesn't work.

    I have discovered that the onclick works, because I can do onclick = "alert('help me')" and that works fine. It just doesn't seem to want to work with my setActive function. The new setActive function which uses classes is here:

    Code:
    function setActive(id) { 
         // turn them all off 
        document.getElementById("home").className='home';
        document.getElementById("about").className='about';
        document.getElementById("portfolio").className='portfolio';
        document.getElementById("contact").className='contact';
          
        // turn on only the one that was clicked
        clsname= id + "On";
        document.getElementById(id).className=clsname;
        activeButton = id;
    }
    where "home" is the class with the "home-off.png" background image and "homeOn" is the class with the "home-on.png" background image, etc.

    I won't post my code for the onmouseover and onmouseout because those seem to work fine, even in IE. I tried changing single quotes to double quotes, and vice-versa. I just can't get this setActive function to work right in IE.

    Please help!! I would greatly appreciate it

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,180
    Thanks
    23
    Thanked 603 Times in 602 Posts
    Ok two things.
    Your end tag for the <ul> is not </ul>, so you have no end tag.
    And

    function turnOff(id) { // for onmouseout, turn off the button, unless it's the "active" button
    if(id == activeButton) {......


    activeButton is not defined according to IE8.

  • #4
    New Coder
    Join Date
    Jun 2012
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hey sunfighter, thanks for the reply. You were right about the missing end tag for the <ul>. I fixed that.

    About the activeButton, you may be on to something, but I'm not experienced enough to be sure. activeButton was my own variable that is used to make sure the "active" button is not turned off onmouseout. When an image link is clicked, the image is changed to the "on" state, and the ID for it gets saved in the activeButton variable. Then, for the turnOff function, it checks to make sure the ID for the current onmouseover item is NOT the same as the ID saved in activeButton. If it is the same, then it won't turn "off" that button onmouseout (because that's the current active button). If its not the same, that means the user is hovering over a different image, not the "active" one, and so therefore it's okay to revert to the "off" image onmouseout. I hope I explained that clearly.

    Do you see a problem with the way I have defined the variable that somehow FF and Chrome recognize but IE doesn't? All of my functions are in a separate .js file like this:

    Code:
    window.onload = function() {
         var activeButton = null;
         var clsname = null;
         setActive('home');  // turn "on" home button by default
    }
    
    function setActive(id) {
       // turn off all buttons
        document.getElementById("home").className='home';
        document.getElementById("about").className='about';
        document.getElementById("portfolio").className='portfolio';
        document.getElementById("contact").className='contact';
    
       //turn on only the one that is clicked   
        clsname= id + "On";
        document.getElementById(id).className=clsname;
        activeButton = id;
    }
    
     function turnOff(id) {
       if(id == activeButton) { //don't turn off the "active" button
         clsname= id + "On";
          } else {
         clsname= id; // revert back to default "off" buttons
          }
         document.getElementById(id).className=clsname;
     }
    
     function turnOn(id) {
         clsname= id + "On";
         document.getElementById(id).className=clsname;
     }
    Again, "home" is the class with the "home-off.png" background and "homeOn" is the class with the "home-on.png" background image. So the default classes with the "off" images for all of the objects have the same name as the ID of the object. So to turn "on" the image, the functions append "On" to the ID that is passed to it, and change the class name to that.

    I'm really at a loss of what to do next. Any suggestions would be greatly appreciated!
    Last edited by kan3xiao; 09-23-2012 at 07:12 PM.

  • #5
    New Coder
    Join Date
    Jun 2012
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    The trouble really seems to be with the "onclick" itself. If I call my turnOn function from the onmouseover event, that works, but if I call turnOn from onclick, it doesn't work.

    I've been reading online about this issue and some people have said there's a conflict with onclick and href. But as I said, even if I remove the href (which would defeat the whole purpose of the menu), onclick still doesn't work with IE.

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,990
    Thanks
    203
    Thanked 2,536 Times in 2,514 Posts
    Try this:-

    Code:
    document.getElementById('home').style.backgroundImage="url('images/home-off.png')";
    But the problem may be that you are using the same name ("home" and so on) for the class and the id.

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 09-23-2012 at 07:40 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    New Coder
    Join Date
    Jun 2012
    Posts
    17
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Hey Philip - I tried that too, still no luck. However, after wasting an entire day yesterday because of IE, I came across a script that fit my needs perfectly. I would have liked to have made it work with my own functions but alas, it's working now nevertheless. Thanks to everyone who tried to help


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •