CSS conditionally on $ (window) .resize ()

advertisements

I'm trying to run the following script and it doesn't seem to be working. I'm very much a noob and this is literally me testing and trying to figure out how things work. There's probably better ways to do what I'm doing here or maybe I'm just misunderstanding the functions.

Basically, I made a link, gave it the class of .home and am toggling visibility. The first snippet of code to do so works just fine.

I then decided to mess around with the $(window).resize(); function to do another toggle when a resize is detected. This 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 an else -- what to do when the screen is narrower than 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>