jquery help...? =P

[Robert Chan]

Hey guys!

I need some help =P  I'm hoping some of you guys know this, I can't seem to quite figure out what the issue is though:

I am attempting to resize large images on document load 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"); 
                } 
        }); 

[MikeClarke]

Hey

Remove the height and width from the img tag.
An additional bit of un-solicited css advice as well (which you can of
course take or leave).
if you have an element with a class or ID assigned to it you don't
need to reassign classes an ID's to unique elements that it contains.
Simply use the selectors to get the element inside of the container
with the class/ID.
for example

<li class="team_bulletin">
<h3 class="team_bulletin_title">Waterloo Festival 2009</h3>
<span class="team_bulletin_author"> posted by Robert Chan at
2.9.2009 at 9:07 p.m.</span>
<img src="ready-ready.org_%20Blazin%27%20Toros_files/waterloo.jpg"
class="team_bulletin_image">
<blockquote class="team_bulletin_body">Blazin'
Toros ended the season with a big gold division constellation win with
a final time of 2:15:54. Placing us in the final 6 to compete in the
Kiwanis Grand Championship final.
<br>
<br>Awesome season Toros!
<br></blockquote>
<ul class="team_bulletin_tools">
<!--<li class="team_bulletin_tools_read"><a href="bulletin/
62">read more</a></li>-->
<!--<li class="team_bulletin_tools_comments"><a href="bulletin/
62#comments">0 comments</a></li>-->
</ul>
</li>

re-written as

<li class="team_bulletin">
<h3">Waterloo Festival 2009</h3>
<span> posted by Robert Chan at 2.9.2009 at 9:07 p.m.</span>
<img src="ready-ready.org_%20Blazin%27%20Toros_files/
waterloo.jpg">
<blockquote>Blazin'
Toros ended the season with a big gold division constellation win with
a final time of 2:15:54. Placing us in the final 6 to compete in the
Kiwanis Grand Championship final.
<br>
<br>Awesome season Toros!
<br></blockquote>
<ul>
<!--<li class="read"><a href="bulletin/62">read more</a></li>--
>
<!--<li class="comments"><a href="bulletin/62#comments">0
comments</a></li>-->
</ul>
</li>

li.team_bulletin { }
li.team_bulletin h3 { }
li.team_bulletin span { }
li.team_bulletin img { }
li.team_bulletin blockquote { }
li.team_bulletin ul li.read { }
li.team_bulletin ul li.comments { }

or probably for the read and comments classes you only need
li ul li.read { }
li ul li.comments { }

M. Clarke

[Rob Wing Chan]

That is true. Very true.

Thanks for the advice. Yea I had a feeling I may have been overly
reassigning elements.

As for removing the width and height from the img tag: are you
referring to my css file?

[MikeClarke]

hey

no, you have width=600, height=0 in the img tag, this is hiding the
image.

MC

On Sep 4, 12:54 pm, Rob Wing Chan <robc...@gmail.com> wrote:
> That is true.  Very true.
>
> Thanks for the advice.  Yea I had a feeling I may have been overly
> reassigning elements.
>
> As for removing the width and height from the img tag: are you
> referring to my css file?
>

[Rob Wing Chan]

oh, I know what you're referring to, you're checking using firebug.

So after the jquery runs it's assigning the height and width values.
For some reason it's assigning height = 0 which is causing the values
to dissappear.
Hmm

[MikeClarke]

I think it's in your source code

when I remove the height & width references the jQuery runs fine.
resulting in this for an image that has an original size of 890x594
<img class="team_bulletin_image" src="ready-ready.org_%20Blazin
%27%20Toros_files/centre-island.jpg" style="height: 400.449px; width:
600px;"/>
ps - you might want to round your width.

MC

On Sep 4, 2:58 pm, Rob Wing Chan <robc...@gmail.com> wrote:
> oh, I know what you're referring to, you're checking using firebug.
>
> So after the jquery runs it's assigning the height and width values.
> For some reason it's assigning height = 0 which is causing the values
> to dissappear.
>  Hmm
>