CODEWITHSUNDEEP
javascriptinternet-explorerinternet-explorer-9compatibilitybackwards-compatibility
maurizio libravene
maurizio libravene

Reputation: 25

Javascript works in all browser exept IE 9

When I click a button, with the onClick function, I replace an image with another one. The code is this

<a class="blue_button" onClick="javascript:loading.style.display='block';zip.style.visibility='hidden';"
href="javascript:getsupport('zip')" id="download">
<img id="zip" src="img/zip.png">
<img id="loading" src="img/loading.gif">
</a>

in the css I have this:

    .blue_button{
    display:block;
    height:30px;
    margin-right:20px;
    float:left;
    width:110px;
    color:#FFF;
    font-size:12px;
        border-radius:4px;
        padding:0 23px 0 20px;
    }

        .blue_button img{
            position:relative;


top:5px;
        margin-right:7px;
    }

    .blue_button img#loading{
        display:none;
        float:left;
        top:-17px;
    }

it works in every browsers, exept IE9. If I active the Compatibility mode it works, but I need to maintain the standard mode.

== SOLVED == using unobtrusive js. Thanks to all

window.onload = loading;
function loading()
{
    document.getElementById('download').onclick = function()
    {
        document.getElementById('zip').style.visibility = 'hidden';
        document.getElementById('loading').style.display = 'block';
    }
}

Upvotes: 1

Views: 2822

Answers (3)

mplungjan
mplungjan

Reputation: 177691

As @Allan said, you have too many things going on and you are relying on side effects and scope overloading

This is how I would do it:

Plain JS

window.onload=function() {
  document.getElementById("download").onclick=function() {
    document.getElementById("loading").style.display='block';
   // use .display='none' to remove, 
   // visibility='hidden' to hide but leave the space
    document.getElementById("zip").style.display='none'; 
    getsupport('zip');
    return false;
  }
}

jQuery:

$(function() {
  $("#download").on("click",function() {
    $("#loading").show();
    $("#zip").hide(); 
    getsupport('zip');
    return false;
  });
});

HTML in both cases:

<a class="blue_button" href="#" id="download"><img id="zip" src="img/zip.png"><img id="loading" src="img/loading.gif"></a>

Upvotes: 0

VeXii
VeXii

Reputation: 3109

youre using a object called loading. but it dont exist its a DOM id. so you need to retrive it from the page first using document.getElementById("loading") (or the querySelector).

try changing youre code to

onClick="document.getElementById("loading").style.display='block';onClick="document.getElementById("zip").style.visibility='hidden';"

Upvotes: 1

Allan Kimmer Jensen
Allan Kimmer Jensen

Reputation: 4389

I think I found the problem:

onClick="javascript:loading.style.display='block';zip.style.visibility='hidden';"

the onclick event does not need the javascript:

If you included rest of the JavaScript, I might be able to test it.

Also you have both the onclick and href. You might want to just use one of them. You might want to have a look at addEventListener() you can read more about it here.

On another note your CSS class naming is pretty bad. You don't want to call them things like blue, red ect. that could be changed. You want to keep them semantic.

Read: What Makes For a Semantic Class Name?

Upvotes: 1

Related Questions