[jQuery] Re: Image Resize onload - works 50% of the time : help?

Sat, 05 Sep 2009 18:41:50 -0700

document.ready doesn't mean images are loaded 

you need load handlers in order to do what you want. A quick google search found this fairly good explanation and a plugin to help

http://enhance.qd-creative.co.uk/2008/12/06/the-magic-of-onload-revealed/

Roboto wrote: 
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");
		}
	});
});

Reply via email to