Pop ups not working in IE8

[harveylester]

Hi guys,

For some reason, in IE8, on product pages (Example) of my ecommerce site, the 'Size Chart' and 'Email to a Friend' popups don't work, and the product image lightbox won't work either. I have turned pop-up blocker off but they still don't work. These popups work in every other browser I have tested in, including IE7. It seems to only be IE8 that is having this problem.

Here is the HTML:

<div class="row ">

<label >Size: </label>

<strong class="fl"><select name="size" id="size" onchange="checkstock(this.value)"><option value="">Select Size</option><option value="S">S</option><option value="M">M</option><option value="L">L</option><option value="XL">XL</option><option value="XXL">XXL</option></select></strong> 
		  
<span style="text-decoration: underline;" class="size_chart more" title="size_chart1">+ Size Chart</span>

<div style="display: none;" class="size_chart1 hide" > <div class="close"></div>

<img src="http://www.projectdisobey.com/disobeyclothing/wp-content/themes/eCommerce3/images/size_chart.jpg" alt="" />
					  
</div>

<!-- size chart -->

</div>

<ul class="fav_link">
     
<li class="print"> <a href="#" onclick="window.print();return false;">Print</a> </li>
     
<li class="rss"> <a href="http://feeds.feedburner.com/DisobeyClothing">RSS</a> </li>
     
<li class="emailtofriend">
     
<span style="text-decoration: underline;" class="more" title="tellafrnd_div">Email to a Friend</span>
     
<span id="tellafrnd_success_msg_span"></span>
     
<div style="display: none;" id="tellfrnddiv" class="tellafrnd_div hide">
     
<iframe src="http://www.projectdisobey.com/disobeyclothing/?page=tellafriend_form&amp;pid=402" style="border: medium none ; width: 547px; height: 558px;" frameborder="0" ></iframe>
     
</div>
     
</li>
     
<li class="share"> <div class="a2a_kit addtoany_list"> <a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save"><img src="http://www.projectdisobey.com/disobeyclothing/wp-content/plugins/add-to-any/share_save_171_16.png" width="171" height="16" alt="Share"/> </a> </div>
     
<script type="text/javascript"><!--
var a2a_config = a2a_config || {};
a2a_config.linkname="Know Your Enemy";
a2a_config.linkurl="http://www.projectdisobey.com/disobeyclothing/?p=402";
a2a_config.color_main = "f3f3e7";a2a_config.color_border = "C0C88A";a2a_config.color_link_text = "332402";a2a_config.color_link_text_hover = "332402";a2a_config.color_bg = "7f6f2";
     
a2a_config.num_services = 14;
//--></script><script type="text/javascript" src="http://static.addtoany.com/menu/page.js"></script>
     
</li>
     
</ul>

Here is the Javascript:

<script type="text/javascript"> var closebutton='<?php bloginfo('template_directory'); ?>/library/js/closebox.png'; </script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/library/js/fancyzoom.js"></script>

<script type="text/javascript" charset="utf-8">
	$(document).ready(function() {
		$('div.photo a').fancyZoom({scaleImg: true, closeOnClick: true});
		$('#medium_box_link').fancyZoom({width:400, height:300});
		$('#large_box_link').fancyZoom();
		$('#flash_box_link').fancyZoom();
	});
</script>


<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){

$('.hide').hide();

$('body').append('<div id="infoBacking"></div><div id="infoHolder" class="large"></div>');
$('#infoBacking').css({position:'absolute', left:0, top:0, display:'none', textAlign:'center', background:'', zIndex:'600'});
$('#infoHolder').css({left:0, top:0, display:'none', textAlign:'center', zIndex:'600', position:'fixed'});
if($.browser.msie){$('#infoHolder').css({position:'absolute'});}


$('.more').mouseover(function() {$(this).css({textDecoration:'none'});} );
$('.more').mouseout(function() {$(this).css({textDecoration:'none'});} );

$('.more').click(function(){

if ($('.' + $(this).attr("title")).length > 0) {

	browserWindow()
	getScrollXY()

	if (height<totalY) { height=totalY; }

	$('#infoBacking').css({width: totalX + 'px', height: height + 'px', top:'0px', left:scrOfX + 'px', opacity:0.85});
	$('#infoHolder').css({width: width + 'px', top:scrOfY + 25 + 'px', left:scrOfX + 'px'});
	source = $(this).attr("title");

	$('#infoHolder').html('<div id="info">' + $('.' + source).html() + '<p class="clear"><span class="close"><?php _e('Close X');?></span></p></div>');

	$('#infoBacking').css({display:'block'});
	$('#infoHolder').show();
	$('#info').fadeIn('slow');
}

$('.close').click(function(){
	$('#infoBacking').hide();
	$('#infoHolder').fadeOut('fast');
});

});

/* find browser window size */
function browserWindow () {
	width = 0
	height = 0;
	if (document.documentElement) {
		width = document.documentElement.offsetWidth;
		height = document.documentElement.offsetHeight;
	} else if (window.innerWidth && window.innerHeight) {
		width = window.innerWidth;
		height = window.innerHeight;
	}
	return [width, height];
}
/* find total page height */
function getScrollXY() {
	scrOfX = 0; 
	scrOfY = 0;
	if( typeof( window.pageYOffset ) == 'number' ) {
		scrOfY = window.pageYOffset;
		scrOfX = window.pageXOffset;
	} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
		scrOfY = document.body.scrollTop;
		scrOfX = document.body.scrollLeft;
	} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
		scrOfY = document.documentElement.scrollTop;
		scrOfX = document.documentElement.scrollLeft;
	}
	totalY = (window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null ? document.body.clientHeight : null);

	totalX = (window.innerWidth != null? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null);
	
	return [ scrOfX, scrOfY, totalY, totalX ];
}

return false;
				});
/* ]]> */
</script>

Anybody have any suggestions as to what the problem might be (and how I can rectify it)? If you need more info, please let me know...

Thanks!

[JunkMale]

Maybe your browsers popup blocker is the issue? You say you have turned it off, have you tried adding them as allowed for that site or domains?

[harveylester]

Maybe your browsers popup blocker is the issue? You say you have turned it off, have you tried adding them as allowed for that site or domains?

Thanks! This seems to be what the problem was. I can't believe I didn't try this before!

[JunkMale]

Sometimes it takes more than one set of eyes to see.

[darklite]

I have the same problem. But what about your customers who don't know to turn off the pop up blocker? If the page doesn't load for them, they leave. That's the problem I'm trying to fix, is to get an overall method that works for the average web searcher so they don't have to tweak the browser. In any event, I still haven't figured it out yet. I can make the javascript work making popup windows of images no problem, but not with html pages.

[JunkMale]

Usually the "Popup blocker" will alert the user that a pop up was suppressed and if they want to open it.