我的脚本运行完美，直到我将其包装在if（screen.width <980）{}语句中以检查屏幕大小

Question

@John

Ok, I had the greater than sign mixed up. The simple things....What I'm looking to do is have codeMagic() run on page load only if the browser.width() > 941px, if the page is resized < 941px stop codeMagic() from running. If the page is again resized & the browser width is >= 941px turn codeMagic() on. Then of course if the page loads less than 941px don't run codeMagic(), but keep the resizing awareness.

Here is my example code:

CSS:

<style>
    body { margin: 0; }
    footer { padding: 10px; margin: 10px; height: 100%; } 
  </style>

HTML:

<div id="home">home!</div>
<footer>footer!</footer>

<script src='lib/js/vendor/jquery.js'></script>
<script src='../den.js'></script>

JS:

jQuery( document ).ready(function($) { 
// set element height based on 'window height' - 'footer height' 

function codeMagic() {

    var docHeight = parseInt($( window ). height());     
    var footerHeight = parseInt($( 'footer' ).outerHeight( true ));
    var homeHeight = +docHeight - +footerHeight + 'px';

        $( 'body #home' ).height(homeHeight);
        console.log( homeHeight, footerHeight);         
};

if (jQuery(window).width() >= 941) {  

codeMagic(); // init codeMagic

//Set codeMagic to run on browser resize
$( window ).resize( function() { 

    codeMagic();

    });
   }
});

What is the proper way to do this?

Answer 1

Your resize event never gets triggered if the browser is bigger than 941 px on DOM init because you didn't bind it than. You need to change it like the following:

if (jQuery(window).width() >= 941) {  
  codeMagic(); // init codeMagic
}


//afterwards bind to the resize event
$( window ).resize( function() { 
  //check size again
  if (jQuery(window).width() >= 941) {  
    codeMagic();
  }
});