Firefox Issue: obtaining dynamic image width
Hi I have written a script for thumbnail images.
Based on the orientation and size of the container and the thumbnail image, it allows for the thumbnail image to be best centered and resized within the container.
It works great in Chrome, Safari, ie6, ie7, ie8, Opera but firefox seems to have difficulty obtaining the width of the image after the first resize. On reloading the page Firefox will then present properly what it takes every other browser the first go.
To see whats happening view:
http://red-idesign.com/~washingt/
My code is($jQ is used so as not to conflict with other javascript libraries)
$jQ(function(){
if (jQuery.browser.safari && document.readyState != "complete"){
setTimeout( arguments.callee, 50 );
return;
}
$jQ("[class='turtleThumb']").each(function(){
//Add relevant CSS
$jQ(this).css("position","relative");
$jQ(this).find("img").css("position","absolute");
//Attain the measurements for image and container
var cw = $jQ(this).width();
var ch = $jQ(this).height();
var tw = $jQ(this).find("img").width();
var th = $jQ(this).find("img").height();
//Portrait
if (tw<th) {
$jQ(this).find("img").width(cw);
var adjth = $jQ(this).find("img").height();
if(adjth<ch) {
var adjtw = (ch-adjth)+ch;
$jQ(this).find("img").width(adjtw);
var centerw = (adjtw-cw)/2;
$jQ(this).find("img").css("left" , -centerw);
$jQ(this).find("img").height(ch); }
else {
var centerh = (adjth-ch)/2;
$jQ(this).find("img").css("top" , -centerh); }
}
//Landscape
else if(tw>th) {
$jQ(this).find("img").height(ch);
var adjtw = $jQ(this).find("img").width();
if(adjtw<cw) {
var adjth = (cw-adjtw)+ch;
$jQ(this).find("img").height(adjth);
var centerh = (adjth-ch)/2;
$jQ(this).find("img").css("top" , -centerh);
$jQ(this).find("img").width(cw); }
else {
var centerw = (adjtw-cw)/2;
$jQ(this).find("img").css("left" , -centerw); }
}
//Regular
else {
//if container is potrait
if (cw<ch) {
$jQ(this).find("img").height(ch);
var adjtw = $jQ(this).find("img").width();
var centerw = (adjtw-cw)/2;
$jQ(this).find("img").css("left" , -centerw); }
//if container is landscape
else if (cw>ch) {
$jQ(this).find("img").width(cw);
var adjth = $jQ(this).find("img").height();
var centerh = (adjth-ch)/2;
$jQ(this).find("img").css("top" , -centerh); }
//if container is regular
else if (cw==ch) {
$jQ(this).find("img").width(cw);
$jQ(this).find("img").height(ch); }
}
});
});