CODEWITHSUNDEEP
javascriptjquerycssinternet-explorerfancybox
Robert Klubenspies
Robert Klubenspies

Reputation: 438

jQuery Click event not working with Fancybox call in IE

Ok so this is a HUGE problem. The site I am building relies on Fancybox and it has to be IE compatible.... I just came to learn that when clicking on a div that launches a fancybox (in safari and firefox) it does not come up in IE 7 (IE 8 seems to be working). My script looks like this:

jQuery(document).ready(function() {
    $(".students_button").click(function(){
        $.fancybox(
            '<p>HTML content here</p>',
            {
                'autoDimensions'    : false,
                'width'             : 600,
                'height'            : 'auto',
                'transitionIn'      : 'fade',
                'transitionOut'     : 'fade'
            }
        );
    });
});

My CSS for the button appears as so:

#content #home #buttons {
  width: 310px;
  float: left;
  margin-right: 10px;
  margin-right: 0;
}
#content #home #buttons #button {
  display: block;
  height: 70px;
  border-radius: 15px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  background: #3a79f7 url(/images/blue_button_bg.png) repeat-x;
  filter: e("progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d7cfa', endColorstr='#2463e1')");
  background: -webkit-gradient(linear, left top, left bottom, from(#3d7cfa), to(#2463e1));
  background: -moz-linear-gradient(top, #3d7cfa, #2463e1);
  pointer: hand;
  margin-bottom: 10px;
}
#content #home #buttons #button #text {
  color: #ffffff;
  font-size: 22pt;
  text-align: center;
  position: relative;
  top: 13px;
  z-index: 1000;
}

And finally, my HTML is this:

<div id="content">
   <div id="home">
    <div id="buttons">
        <div id="button">
            <div id="text" class="students_button">Students</div>
        </div>
    </div>
   </div>
</div>

If it matters, I'm using a bit of IE specific CSS to call as border-radius hack:

#content {
    #home {
        #buttons {
            #button {
                behavior: url(/border-radius.htc);
            }
        }
    }
}

The border-radius.htc file can be located here. I am using jQuery 1.5.1 and Fancybox 1.3.4 if it matters.

Thank you for any help you can provide in fixing this!

Upvotes: 1

Views: 2640

Answers (1)

Evil E
Evil E

Reputation: 633

I copied and pasted your code, and it worked as expected in IE7 and IE8. But, it did not work when IE was in Quirks mode. Is it possible IE is loading the page in quirks mode? If you don't know, you can find out by hitting F12 to open IE Developer Tools and looking in the Document Mode field.

If that is the problem, you can prevent IE from opening in Quirks mode by using a valid DocType. Try adding this to the top of your html document:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Hope that works!

Upvotes: 1

Related Questions