title: Hide A DIV if screen is narrower than 1280px
body: <p>I'm trying to implement a floating div that automatically detects the screen resolution of the user. IF the resolution is lower than 1280, a certain div will be automatically hidden.</p>
  
  <p>I've read <a href="https://stackoverflow.com/questions/5277872/hide-a-div-if-screen-is-narrower-than-1024px">this</a> and <a href="https://stackoverflow.com/questions/4296012/hide-div-if-screen-is-smaller-than-1024">this</a> and tried to use those codes but it's not working for me. I'm using wordpress and pasted the js code in the <code>&lt;/header&gt;</code></p>
  
  <p>The codes i pasted in my header:</p>
  
  <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function () {
  
      var screen = $(window)    
  
      if (screen.width &lt; 1280) {
          $("#floatdiv").hide();
      }
      else {
  
          $("#floatdiv").show();
      }
  
  });
  
  //run on document load and on window resize
  $(document).ready(function () {
      //on load
      hideDiv();
      //on resize
      $(window).resize(function(){
          hideDiv();
      });
  }); 
  &lt;/script&gt;
  </code></pre>
  
  <p>unfortunately, i can't make it work. what seems to be the problem here?</p>