treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Anything Slider - Whats wrong?

  • So I am using the anything slider to switch pages on this simple resume site. Why isn't it getting the correct height for 'portfolio' in Google Chrome? It works fine in the rest of the browsers. Chrome has rarely been the culprit for me. Here is the link:

    http://www.austincondiff.com/

    As you can see in portfolio, there are more portfolio items that are not visible, so the div is being resized shorter than the content.

    Any help would be great! Thanks.
  • Do you have floats that are left uncleared? One other thing that sometimes works is to run your code through the validator. This can show you errors that if you fix it might fix your problem. you have 27 errors and 10 warnings. A lot of them can be fixed. I saw problems with your body tag and head tag. This could surely cause a problem.
  • Thanks for pointing that out, however that didn't fix the problem. I do have a clearfix and I also applied it to .block which is each portfolio item. Any other ideas? Thanks.
  • Hi Austin!

    The problem appears to be that the images are loaded after the height of the panel is calculated. So the easiest solution would be to change
    $(function(){ ... })
    to
    $(window).load(function(){ ... })
    Or if that solution isn't the best, you could set the image height and width in the css
    .portfolio img { width; 425px; height: 230px; }
  • That did the trick! Thank you very much! =)
  • Oh btw... I forgot to mention that I noticed in your code you were animating using
    $("html,body")
    That won't scroll correctly in Opera. I'm not sure if you even care, but check out this post on how to fix it.
  • Hey now Mottie, don't hate on Opera users.