Javascript; unset a function?

Question

I'm pretty new to javascript. I have this function and I'd like to unset it when the screen size is less than 1024. I have two functions: a document ready function and a window resize function. When resizing the screen below 1024 I'd like the function to be unset. How to manage this?

Here is my code

<script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
<script>
jQuery(document).ready(function($) {
    var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
    if(width > 1024) {
    setTimeout(function(){
        var lcol_height = $("#leftCol2").height() + 80; // add 80 for margin + padding
        var rcol_height = $("#rightCol2").height();

        if(rcol_height > lcol_height) $("#leftCol2").css('height',(rcol_height - 80) + 'px');
        else $("#rightCol2").css('height',lcol_height + 'px');
    }, 500);
    }
});


$(window).resize(function() { //Fires when window is resized
    var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
    if(width < 1024) {
//I'd like the margin function to be unset.
    }
    else {
        setTimeout(function(){
        var lcol_height = $("#leftCol2").height() + 80; // add 80 for margin + padding
        var rcol_height = $("#rightCol2").height();

        if(rcol_height > lcol_height) $("#leftCol2").css('height',(rcol_height - 80) + 'px');
        else $("#rightCol2").css('height',lcol_height + 'px');
    }, 500);
    }

});
</script>

Thank you so much!

Answer 1

There's no need to unset it, since you might be needing it again in case the window size increases beyond 1024px. Here is a slightly optimized version of your code:

function handleMargins() {
    var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
    if (width > 1024) {
        setTimeout(function () {
            var lcol_height = $("#leftCol2").height(); // use original margin
            var rcol_height = $("#rightCol2").height();

            if (rcol_height > lcol_height) $("#leftCol2").css('height', (rcol_height - 80) + 'px');
            else $("#rightCol2").css('height', lcol_height + 'px');
        }, 500);
    } else {
        setTimeout(function () {
            var lcol_height = $("#leftCol2").height() + 80; // add 80 for margin + padding
            var rcol_height = $("#rightCol2").height();

            if (rcol_height > lcol_height) $("#leftCol2").css('height', (rcol_height - 80) + 'px');
            else $("#rightCol2").css('height', lcol_height + 'px');
        }, 500);
    }
}

jQuery(document).ready(handleMargins);

$(window).resize(handleMargins);

Apart from being more readable, now the same code executes when you first open the page AND on resize (imagine what would happen in your original code if the window is initially smaller than 1024px).

---

UPDATE

See if this makes more sense (note, the boundary is set to 400px, so you need to shring that jsfiddle box to about twice the size of the divs): http://jsfiddle.net/wdey6ngf/

I've simplified your logic and everything, just wanted to show you how it works.

---

NOTE

Depending on how complicated your end logic is going to be, this is something you can accomplish using no JS, just plain CSS with media queries: http://jsfiddle.net/rags7zg2/ It will perform much better than the JS version.