Thursday, June 26, 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
$(".yourdiv").append(.....)
jQuery(function(){
if($window.width()<768)
{
     $("#mydiv").appendTo("#block1");
}else{
         $("#mydiv").appendTo("#block2");
}
}
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($){

    function doneResizing() {

        if(Modernizr.mq('screen and (max-width:767px)')) {
                     $("#mydiv").appendTo("#block1");
        }

        else if(Modernizr.mq('screen and (min-width:768px)')) {
                                  $("#mydiv").appendTo("#block2"); 
        }

    }

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

    doneResizing();
})(jQuery);
 

that's all

No comments:

Post a Comment