I Disabled certain jQuery script at certain screen size but how do I get it check when screen is resized?

Question

I got this to disable on screen sizes below 1020 but any idea how to get it to check dynamically as the browser window is being resized?:

<script>
$(document).ready(function() {

/*Set height of sections to window height*/
$( "#homepage-fold" ).each(function(){
if ($(window).width() >= 1020) {
    var $this = $(this);}
    $this.css({'height':($(window).height())+'px'});

    /*Recalculate on window resize*/
$(window).resize(function(){
        $this.css({'height':($(window).height())+'px'});
    });
 });

 });</script>

Any idea how to get the if statement I added to work dynamically as the browser's being resized. i tried wrapping that first if tag in the second Recalculate section but I must not have put it in the correct spot.

Thanks!!

--

First off, this seems to be a simple solution but the solution I tried didn't work. I'm newer to jQuery so I'm guessing it was an error in my syntax - probably improper placement of this rule. If somebody could help me figure out how to get this to work I'd greatly appreciate it. I only want this script to be active on screen sizes greater than 1020px. Screens below 1020 should see the page without this active script.

   <script>
   $(document).ready(function() {

    /*Set height of sections to window height*/
    $( "#homepage-fold" ).each(function(){
        var $this = $(this);
        $this.css({'height':($(window).height())+'px'});

        /*Recalculate on window resize*/
        $(window).resize(function(){
            $this.css({'height':($(window).height())+'px'});
        });
    });

});</script>

I thought by adding

    if(screen.width >= 1020){

Like this: $(document).ready(function() {

    /*Set height of sections to window height*/
    $( "#homepage-fold" ).each(function(){

if(screen.width >= 1020){

        var $this = $(this);
        $this.css({'height':($(window).height())+'px'});

        /*Recalculate on window resize*/
        $(window).resize(function(){
            $this.css({'height':($(window).height())+'px'});
        });

Added: }); });

});</script>

Any thoughts on where I messed up this code? Thank you!!

Answer 1

This would be my approach. The setFold function sets the height of the desired element to the window's height or - if the window's width is smaller than the breakpoint (1020) to a default value (999). I've also wrapped the onresize callback into a timeout which delays its execution until the resize event has actually ended (thus making it a onresizeend really). This sometimes is a good idea because resize is fired multiple times while someone resizes the window. Depending on what is done onresize this can cause quite a lag and in most cases it's totally ok for it to just happen once when the user stopped resizing (you can play around with callbackDelay here or just remove the timeout stuff completely).

$(document).ready(function(){

    // DOM READY
    var $window    = $(window), // cached
        $fold      = $('#homepage-fold'),
        breakpoint = 1020,
        defaultHeight = 999,
        resizeTimeout,
        callbackDelay = 200; // ms


    function setFold(){
        if( $window.width() < breakpoint ){
            $fold.css('height', defaultHeight );
        }
        else {
            $fold.css('height', $window.height() );
        }
    }

    setFold(); // initial setting

    // Attach event
    $window.on('resize', function(){
        clearTimeout( resizeTimeout );
        resizeTimeout = setTimeout(function(){
            setFold();
        }, callbackDelay );
    })

});

Answer 2

Do it like this:

if ($(window).width() >= 1020) {

}

Also, you're probably going to want to write this into a resize function as well so that if somebody resizes their browser window the script will fire or not fire based on the resized dimensions instead of just the initial dimensions.