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
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
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
1 2 3 4 5 6 7 8 9 | $( ".yourdiv" ).append(.....)<br> jQuery( function (){<br> if ($window.width()<768)<br> {<br> $( "#mydiv" ).appendTo( "#block1" );<br> } else {<br> $( "#mydiv" ).appendTo( "#block2" );<br> }<br> }<br> |
1 2 3 4 5 6 | @media screen and (max-width: 767px){<br> #mydiv STYLE1<br> }<br> @media screen and (min-width: 768px){<br> #mydiv STYLE2<br> }<br> |
finally it was wrong to use jQuery(function(){} which fires before application of media queries
i've used modernizr library
with this hack
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | ( 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" );<span class= "Apple-tab-span" style= "white-space: pre;" > </span> } } var id; $(window).resize( function () { clearTimeout(id); id = setTimeout(doneResizing, 0); }); doneResizing(); })(jQuery); |
that's all