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
finally it was wrong to use jQuery(function(){} which fires before application of media queries
i've used modernizr library
with this hack
that's all
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(.....)and mydiv had two styles
jQuery(function(){
if($window.width()<768)
{
$("#mydiv").appendTo("#block1");
}else{
$("#mydiv").appendTo("#block2");
}
}
@media screen and (max-width: 767px){i found that mydiv had the style 2 and was the child of block 1 which is incorrect for me
#mydiv STYLE1
}
@media screen and (min-width: 768px){
#mydiv STYLE2
}
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