jeudi 26 juin 2014

Jquery ready function and problems with media queries

yesterday i have faced a problem
i had  to make a design responsive according to a psd
i've found that some blocks that were injected by jquery thanks to
and mydiv had two styles
@media screen and (max-width: 767px){
    #mydiv STYLE1
@media screen and (min-width: 768px){
    #mydiv STYLE2
i found that mydiv had the style 2 and was the child of block 1 which is incorrect for me

finally it was wrong to use jQuery(function(){} which fires before application of media queries
i've used modernizr library
with this hack


    function doneResizing() {

        if('screen and (max-width:767px)')) {

        else if('screen and (min-width:768px)')) {


    var id;
    $(window).resize(function() {
        id = setTimeout(doneResizing, 0);


that's all

Aucun commentaire:

Enregistrer un commentaire