SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    593
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Strange bouncing on jQuery portfolio

    Hello,

    I am building a new jQuery portfolio for my website:

    Link to Portfolio

    I am using a simple jQuery function to fade in all the thumbnail images.

    But for some reason each thumbnail bounces a few pixels when the image has finished loading.

    Can anybody tell me how to fix this?

    This is my CSS:

    Code:
    #portfolio td {padding: 0;}
    
    #portfolio div {width: 240px; height: 150px; background: url(/images/project-frame.png) center center no-repeat; padding: 5px; margin-right: 70px;}
    
    #portfolio div a {display: block; width: 240px; height: 150px; background: url(/images/loader.gif) center center no-repeat;}
    
    #portfolio div a img {width: 240px; height: 150px;}
    My jQuery function can be found here: Link to jQuery code (the one at the top)

    Thanks to anyone who can help!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Just a guess here, but I wonder what would happen if you set heights on the table cells.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    593
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Ralph,

    Thanks for your help. I just set the height to 20ems, but not much has changed :-(

  4. #4
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    593
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh and I just changed the <div> to a <span> tag because I think that's more semantically correct? Correct me if I'm wrong...

  5. #5
    SitePoint Evangelist Pixelateur's Avatar
    Join Date
    Feb 2006
    Location
    Hamburg, Germany
    Posts
    593
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, looks like I've the solution. There has to be a "display: block;" on the img for some reason. I have no idea why, but it works fine now...

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Hmm, I think I'd use a div rather than span; but still, glad you got it working.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    <div> and <span> have no semantic difference. It's just that one is an inline element and one is a block, use either as you desire. It was probably whitespace under the image, vertical-align:bottom would have fixed it as well (maybe) along with float:left (maybe )
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,117
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by RyanReese View Post
    <div> and <span> have no semantic difference. It's just that one is an inline element and one is a block
    I just suggested div there because it is sitting alongside other block elements, and the span only worked because it was set to display: block. So I figured that a block element was preferable anyway.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    I just suggested div there because it is sitting alongside other block elements, and the span only worked because it was set to display: block. So I figured that a block element was preferable anyway.
    I know, I was more referring to Pixelateurs' post in regards to him saying he changed it to a span because he thought it was more semantic .

    Sorry for the confusion.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  10. #10
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    I would be asking why the blazes are you making the page-load take twice as long by even using jquery to load the sub-images in the first place? You want to use it for that bloated slow lightbox nonsense, fine - but wrapping the load of six measly thumbnails in javascript for no good reason? Waste of time.

    Strip the javascripted nonsense for the 'loading' bit off those, use a normal lightbox effect on them, and load them flat.... and if you rip out trying to add heights to the TD and instead just declare the width and height on the image, you'll lose that up and down bouncing effect.

    Losing the 'table for nothing' wouldn't hurt much either... and the unneccessary classes couldn't hurt to take an axe to either - style off the parent.

    Where you have:
    Code:
    <table id="portfolio">
    
    <tr>
    
    <td>
    <span>
    <a class="zoom" href="http://new.designbits.de/images/portfolio/rub.jpg"><img class="attachment-fadeIn" src="http://new.designbits.de/images/portfolio/rub_thumb.jpg" alt="Webdesign Projekt Rolf & Bernd GmbH" /></a>
    </span>
    <ul>
    <li><b>Kunde: </b>Rolf & Bernd GmbH <em>(2010)</em></li>
    <li><b>Leistungen: </b>Webdesign & Programmierung</li>
    <li><a href="http://www.rolfundbernd.de">Website ansehen &rarr;</a></li></ul>
    </td>
    I'd probably have:

    Code:
    <div id="portfolio">
    	<div>
    		<a href="/images/portfolio/rub.jpg">
    			<img src="/images/portfolio/rub_thumb.jpg"
    				alt="Webdesign Projekt Rolf & Bernd GmbH"
    			/>
    		</a><br />
    		<b>Kunde: </b>Rolf & Bernd GmbH <em>(2010)</em><br />
    		<b>Leistungen: </b>Webdesign & Programmierung<br />
    		<a href="http://www.rolfundbernd.de">Website ansehen &rarr;</a>
    	</div>
    MORE than enough hooks there for the styling you are trying to accomplish.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •