JQuery under IE

Question

Hello.

Im using JQuery with css to show div's on a page with the Click command.

like this code here.

$("#img1_hover").click(
 function(){
    $('#img1_show').addClass('img1_show_vis');
    $('#img_shower_1').addClass('img_shower_vis');
    $('#close_btn_1').addClass('img1_show_x_vis');
 }

The code work fine under Firefox but it doesnt work under IE. Anyone have an idea why??

Thanks for your reply!

the page can be seen at http://martinesavard.com/template.php

Answer 1

Try returning false.

$("#img1_hover").click(function(){
  $("#img1_show").addClass("img1_show_vis");
  $("#img_shower_1").addClass("img_shower_vis");
  $("#close_btn_1").addClass("img1_show_x_vis");
  return false;
});

One, thing about your code is that you have a div tag that receives the clicks and I'm starting to think that div is collapsed or not is the proper place where you expected it to be. Try adding a border to the divs that will receive the click to visualize if they are where they need to be.

In Firebug I ran this:

jQuery("#img1_hover").css("border", "3px solid #f09");

Which does show the outline of where the click needs to happen. I then set the display to none so it can be hidden.

jQuery("#img1_hover").css("display", "none");

and when you can see the click area is no longer there and clicking in the same area does nothing. Just maybe that will be the issues in IE.

Answer 2

Try running you event attachment stuff in a '$(document).ready' instead of in a <script> outside of any function - maybe IE doesn't have the DOM quite ready yet when your code runs.

Answer 3

Try closing your parenthesis:

$("#img1_hover").click(
 function(){
    $('#img1_show').addClass('img1_show_vis');
    $('#img_shower_1').addClass('img_shower_vis');
    $('#close_btn_1').addClass('img1_show_x_vis');
 }

becomes:

$("#img1_hover").click(
 function(){
    $('#img1_show').addClass('img1_show_vis');
    $('#img_shower_1').addClass('img_shower_vis');
    $('#close_btn_1').addClass('img1_show_x_vis');
 });

Answer 4

Your images are behind your outer frame. Your clicks aren't making it through. (The div with class "frame" has a z-index of 100, while your image divs have 99.)