Js Launches Before Css

Question

This is currently happening in chrome, in firefox I haven't had this issue (yet). Here is a VERY simplified version of my problem. HTML:

Solution 1:

I think that these simple three steps will achieve the intended behavior (please read it carefully: I also suggest to read more about the mentioned attributes to deeply understand how it works):

Responsive and fluid layout issues should always be primarily (if not scrictly) resolved with CSS.
So, remove all of your JavaScript code.
You have positioned the inner a#clickMe element absolutely.
This means that it will be positioned within its closest relatively positioned element. By the style provided, it will be positioned within the body element, since there is no position: relative; in any other element (the default position value is static). By the script provided, it seems that it should be positioned within its direct parent container. To do so, add position: relative; to the div.thumbnail element.
By the script you provided, it seems that you need to place the a#clickMe at the bottom of div.thumbnail.
Now that we are sure that the styles added to a#clickMe is relative to div.thumbnail, just add bottom: 0px; to the a#clickMe element and it will be positioned accordingly, independently of the height that its parent has. Note that this will automatically rearrange when the window is resized (with no script needed).

The final code will be like this (see fiddle here):

JS:

/* No script needed. */

CSS:

div {
    width: 200px;
    height: 300px;
    background-color: purple;
    position: relative; //added
}
a {
    position: absolute;
    bottom: 0px; //added
}
@media (max-width: 991px) {
    div {
        height: 200px;
    }
}

If you still insist on media query change detection, see these links:

http://css-tricks.com/media-query-change-detection-in-javascript-through-css-animations/

http://css-tricks.com/enquire-js-media-query-callbacks-in-javascript/

http://tylergaw.com/articles/reacting-to-media-queries-in-javascript

http://davidwalsh.name/device-state-detection-css-media-queries-javascript

Twitter Bootstrap - how to detect when media queries starts

Bootstrap: Responsitive design - execute JS when window is resized from 980px to 979px

Solution 2:

I like your temporary solution (I did that for a similar problem before, I don't think half a second is too long for a user to wait but perhaps it is for your needs...).

Here's an alternative that you most likely have thought of but I don't see it mentioned so here it is. Why not do it all through javascript and remove your @media (max-width.... from your css?

functionresize() {
    var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
    if(width<992){
        $("div").each(function(e,obj){$(obj).height(200);});
    }
    $('#clickMe').offset({
        top: $parent.offset().top + $parent.height()-$('#clickMe').height()
    });

}

Solution 3:

In the html page, put the link to css file in head section; next, put the link to js file just before the /body tag and see what happens. In this way css will load always before js. Hope this help you.

Solution 4:

Did you try to bind the resize handler not to the window but to the object you want to listen to the resize ?

Instead of

$(window).on('resize', resize);

You can try

$("#clickMe").on('resize', resize);

Or maybe

$("#clickMe").parent().on('resize', resize);

Solution 5:

var didResize = false;
$(window).resize(function() {
    didResize = true;
});
setInterval(function() {
    if (didResize) {
        didResize = false;
        console.log('resize');
    }
}, 250);

JavaScript File