[jQuery] Image Resize onload - works 50% of the time : help?
Hey everyone,
Still new to jquery, I was just using it to resize large images to
ensure my css wouldn't break. Sometimes it works, and sometimes it
doesn't.
By working, it's working as intended.
By not working, the images aren't showing at all (FF, IE, Saf4) -- or
safari 4.0 isn't rendering it correctly -- as in there are images
larger than the maxWidth specification.
You can observe the bug here: http://www.ready-ready.org/teams/27
If the images don't show, they will after a quick refresh.
Any help or insight would be appreciated.
My code is as follows (kinda redundant, but I'm more focused on making
it work):
$(function(){
$(".team_bulletin_image").each(function(){
var maxWidth = 600;
if($(this).width() > maxWidth){
newWidth = maxWidth;
newHeight = $(this).height() * (maxWidth / $(this).width());
$(this).height(newHeight).width(newWidth);
}
});
$("#team_logo").each(function(){
var maxWidth = 254;
if($(this).width() > maxWidth){
newWidth = maxWidth;
newHeight = $(this).height() * (maxWidth / $(this).width());
$(this).height(newHeight).width(newWidth);
}
});
$("#nav_tools").each(function(){
var maxHeight = 134;
var logoHeight = $("#team_logo").height()
if(logoHeight > maxHeight){
$(this).css("margin-top", (logoHeight - maxHeight) + "px");
}
});
});