jQuery Listener for Responsive Content -
i'm building responsive site , when browser greater 500px wide, .bio content hidden, when it's on phone, shows.
good thing is, works on when page loaded within dimensions. if firefox window 400px , resize window 900, bio still visible. if load page @ 900px, bio hidden, should be.
how make jquery fire again when window size changes?
$(function(){ if($(window).width() > 500){ $('.speakers li').hover(function(){ $(this).find('.hide').toggle(); }); }else{ $('.speakers li .bio').removeclass('hide'); } });
figured out css using media queries, suggested mackieee.
what prevented me using media queries in beginning content being hidden display:none. in case, :hover not available since there's nothing hover over. opacity trick.
i guess, absolute positioning, swap z-index if needed click link under transparent div.
.ease {-webkit-transition:all 0.15s ease; -moz-transition:all 0.15s ease; -o-transition:all 0.15s ease; -ms-transition:all 0.15s ease; transition:all 0.15s ease;} .bio { @media(min-width:@screen){ opacity:0; /* more style */ } @media(max-width:@phone){ opacity:1; /* more style */ } } .bio:hover { @media(min-width:@screen){ .ease; opacity:1; } }
Comments
Post a Comment