UPDATE: So due to this page: yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/, I realized that finding the window dimensions is not safari's problem. Instead it's finding the image .width() and .height(). I tried some of the ideas on this page: http://36flavours.com/2010/01/jquery-document-ready-bug-in-safari-webkit/ but nothing is working. Has anyone had success with getting Safari to calculate the dimensions of any image (set to 'auto' width and height in css)?
ORIGINAL: Hello.
I have a 100% width and height div with the id of "blackOut" that fades in when you click an image. What I want to happen is have it display the image centered and resized according to the window. The code I have below works fine in Firefox and Chrome, but doesn't do much in Safari. Safari seems to not recognize the first two alerts I have set up for testing purposes, and only alerts "newH = 0, newW=0". Is there a way I can get it to work for all browsers?
I read in a related question that Safari doesn't let you resize the window...is it that Safari doesn't let you use the user's window size at all? Even if it did I'm using blackOut's dimensions as my window size (since it's 100% of the window) so that shouldn't make a difference right?
Thanks!
$('.post img').click(function(){
var source = $(this).attr('src');
$('#blackOut').fadeIn().html('<img src="' + source + '" />');
var imgH = parseInt($('#blackOut img').css('height').replace('px', ''));
var imgW = parseInt($('#blackOut img').css('width').replace('px', ''));
var winH = parseInt($('#blackOut').css('height').replace('px', ''));
var winW = parseInt($('#blackOut').css('width').replace('px', ''));
if (imgH >= imgW) {
if (imgH >= winH) {
$('#blackOut img').css('height', (winH*.7) + 'px');
alert('Too Tall');
alert('imgH = ' + imgH + ', imgW = ' + imgW + ', winH = ' + winH + ', winW = ' + winW);
}
}
else {
if (imgW >= winW) {
$('#blackOut img').css('width', (winW*.7) + 'px');
alert('Too Tall');
alert('imgH = ' + imgH + ', imgW = ' + imgW + ', winH = ' + winH + ', winW = ' + winW);
}
}
var newH = parseInt($('#blackOut img').css('height').replace('px', ''));
var newW = parseInt($('#blackOut img').css('width').replace('px', ''));
alert('newH = ' + newH + ', newW = ' + newW);
$('#blackOut img').css('position', 'absolute').css('top', ((winH-newH)*.5) + 'px').css('left', ((winW-newW)*.5) + 'px');
});