CODEWITHSUNDEEP
jqueryinternet-explorerfirefoxfancyboxfancybox-2
Ty Morton
Ty Morton

Reputation: 733

FancyBox + Windows IE/FF = Fail

I have a FancyBox (2.0.5) page that displays beautifully on every browser but IE and FF for Windows. I might just need some fresh eyes on it.

Here is my code:

$('.fancybox').fancybox({
 'type': 'iframe', 
 'width': 800, 
 'height': 580
});

As you can see, it's pretty basic. I'm not using any helpers, nor have I modified the default CSS.

On every Mac browser, and Chrome for PC, I get this:

enter image description here

Which is exactly what I should get (although I could do without the scrollbars).

On IE 7 & 8 (haven't tried 9) and FF for Windows, I get this:

enter image description here

No frame, no background, and no close button. Also, you can't close it; you have to refresh.

Is there something I'm missing here?

Here is a link: http://www.downtownmuncie.org/business/search2/arts/ You'll want to click on the "Zoom Map" link under the smaller map.

Upvotes: 0

Views: 917

Answers (1)

JFK
JFK

Reputation: 41143

There are many things you need to fix in your website if you want to make fancybox workable (and most probably other stuff too.)

First, line 153 and 154 : you are loading 2 instances of fancybox when you actually need a single one

<script src="http://www.downtownmuncie.org/s/fancybox/jquery.fancybox.js" type="text/javascript"></script>
<script src="http://www.downtownmuncie.org/s/fancybox/jquery.fancybox.pack.js" type="text/javascript"></script>

choose any of them, but not both.

Second, the real problem of your issue is the line 155

<link href="http://www.downtownmuncie.org/s/fancybox/jquery.fancybox.css" type="text/javascript" type="text/css" rel="stylesheet" >

Notice that you have type="text/javascript" and type="text/css" and this why the fancybox css file cannot be loaded so it displays weirdly (copy and paste can be so dangerous.) Remove type="text/javascript" from that line AND it is also advisable to move it to the <head> section of your document.

Third, line number 4 you have and extra double quote " so your document has no character encoding information; this part:

content="text/html; charset="utf-8"

should be

content="text/html; charset=utf-8"

if you can find the difference (hint: all goes as the content value)

Fourth and last, line 158

<script type="text/javascript">
$('a.fancybox').fancybox({
 'type': 'iframe', 
 'width': 800, 
 'height': 580
});
</script>

wrap your script within the .ready() method like

<script type="text/javascript">
$(document).ready(function(){
 $('a.fancybox').fancybox({
  'type': 'iframe', 
  'width': 800,
  'height': 580
 });
});
</script>

That is documented by the way http://fancyapps.com/fancybox/#instructions

It is also advisable to use a validator to check and fix all your little html coding bugs.

Upvotes: 4

Related Questions