Grow your CSS skills. Land your dream job.

Help a js noob. How do I get this function to call immediately

  • # March 27, 2013 at 4:53 am

    I have a function which checks the height of some divs and set’s them all to have the same height as the highest one.
    This is done on windows resize, which it should. But it should also do it immediately when entering the page.

    How should the code be modified?

    $( document ).ready(function() {

    function resetHeight() {
    var maxHeight = 0;
    $(“.offer-info”).height(“auto”).each(function(){
    maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight;
    }).height(maxHeight);
    }
    resetHeight();

    // reset height on resize of the window:
    $(window).resize(function() {
    resetHeight();
    });

    });

    # March 27, 2013 at 6:27 am

    Seems to me like you’re already calling the function right after declaring it, so that should work. On resize is commented out though, so that shouldn’t work.

    # March 27, 2013 at 8:00 am

    It’s not commented out, I didn’t use the code formatting so it just looked like that. Fixed it now. It does not work on load so something must be wrong then. It does work whenever I resize the window though.

    # March 27, 2013 at 8:06 am

    Maybe the height isn’t calculated yet when the script runs, try `addEventListener(‘load’, resetHeight);` or run it after a small delay. (or something like `$(window).load(resetHeight);` for xbrowser shizzle)

    EDIT: jQuery’s `.load()` is deprecated, my bad. Use `$(window).on(‘load’, resetHeight);`.

    # March 27, 2013 at 9:34 am

    I just noticed that the height is calculated, however it’s really off. My height initially get’s a lot smaller than any of the containers are which is pretty weird. It look’s like this has something to do with Bootstrap because if I remove the bootstrap CSS then the it seems to work as it should.

    Ideas anyone?

    # March 27, 2013 at 10:01 am

    I should have said isn’t calculated correctly. Did you at least try to run the function on load event?

    # March 27, 2013 at 10:18 am

    Yes, it didn’t do any difference :(

    # March 27, 2013 at 10:34 am

    Yeah, something funky with bootstrap.. script works just fine:

    http://codepen.io/johnmotyljr/pen/gIpcB

    # March 27, 2013 at 12:21 pm

    Might be that images aren’t being loaded until after the script runs, which will cause things to be off.

    # March 28, 2013 at 5:03 am

    Yeah I made a testpage myself without bootstrap and it does work. It’s bootstrap.css that messes this up somehow. I’m not using any images yet so that can’t be the case either.

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

You must be logged in to reply to this topic.

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