Grow your CSS skills. Land your dream job.

Image not showing on page load when a max-height is being assigned via jQuery

  • # May 24, 2013 at 8:21 am

    I have an issue.

    I’m using jQuery to assign a max-hight to an image. The max height value is generated by getting the height of the slideshow the logo image is next to. Please take a look at the site: http://debourg-dev.ch/lestroisverres/

    The affected code is:

    var sliderHeight = $(‘.flexslider’).height();
    $(‘#logo img’).css({‘max-height': sliderHeight});

    $(window).resize(function() {

    var sliderHeight = $(‘.flexslider’).height();
    $(‘#logo img’).css({‘max-height': sliderHeight});

    });

    Once you start resizing the window the logo appears and scales fine as it should, so the issue looks like the script is loading before the slideshow height is determined. I’ve tried wrapping the affected code in a $(window).load function but it makes no difference.

    Any help?

    Thanks

    # May 27, 2013 at 7:46 am

    Any ideas? Thanks

    # May 27, 2013 at 7:53 am

    Try this:

    function onResize() {
    var sliderHeight = $(‘.flexslider’).height();
    $(‘#logo img’).css({‘max-height': sliderHeight});
    }
    $(window).resize(onResize);
    setTimeout(onResize, 10);

    The last line waits a small amount of time (10ms) before kicking in, that can help with dimension issues. Maybe you should wrap that last line in a load handler.

    # May 27, 2013 at 10:06 am

    Hi, thanks for your suggestion but it still gives me the same problem: assigning the logo image a height of ‘0’, as above it works once you start resizing the window manually though.

    When I tried wrapping the last line in a $(window).load handler, the logo appears (flashes) on page load but then goes once fully loaded.

    Any other suggestions? Thanks again.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".