The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #45040

    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:

    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?



    Any ideas? Thanks


    Try this:

    function onResize() {
    var sliderHeight = $(‘.flexslider’).height();
    $(‘#logo img’).css({‘max-height’: sliderHeight});
    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.


    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)
  • The forum ‘JavaScript’ is closed to new topics and replies.