javascript - Conditionally toggling CSS on $(window).resize() -
i'm trying run following script , doesn't seem working. i'm noob , literally me testing , trying figure out how things work. there's better ways i'm doing here or maybe i'm misunderstanding functions.
basically, made link, gave class of .home
, toggling visibility
. first snippet of code works fine.
i decided mess around $(window).resize();
function toggle when resize detected. part isn't working.
$(document).ready(function(){ //click toggle $('.toggle').click(function() { if ($('.home').css('visibility') == 'hidden') { $('.home').css('visibility', 'visible'); } else { $('.home').css('visibility', 'hidden'); } }); //showhome var showhome = function () { if ($(window).width() > 799) { $('.home').css('visibility', 'visible'); }; }; $(window).resize(showhome); showhome(); });
you're missing else
-- when screen narrower 799px
?
//click toggle $('.toggle').click(function() { if ($('.home').css('visibility') == 'hidden') { $('.home').css('visibility', 'visible'); } else { $('.home').css('visibility', 'hidden'); } }); //showhome var showhome = function() { if ($(window).width() > 799) { $('.home').css('visibility', 'visible'); } else { $('.home').css('visibility', 'hidden'); } }; $(window).resize(showhome); showhome();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <p>other stuff</p> <p class="home">home</p> <button class="toggle">toggle</button>
Comments
Post a Comment