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

Popular posts from this blog

html - Sizing a high-res image (~8MB) to display entirely in a small div (circular, diameter 100px) -

java - IntelliJ - No such instance method -

identifier - Is it possible for an html5 document to have two ids? -