Hide A DIV if screen is narrower than 1024px

Question

I found (from this question - Hide div if screen is smaller than a certain width) this piece of coding

  $(document).ready(function () {

    if (screen.widt         


        

Answer 1

OLD ANSWER USING JQUERY:

//the function to hide the div
function hideDiv(){

    if ($(window).width() < 1024) {

            $("#floatdiv").fadeOut("slow");

    }else{

        $("#floatdiv").fadeIn("slow");

    }

}

//run on document load and on window resize
$(document).ready(function () {

    //on load
    hideDiv();

    //on resize
    $(window).resize(function(){
        hideDiv();
    });

});

EDIT: Please note that now there is much more cross browser support for css3 media queries it would be much more effective to use those rather than javascript.

USING CSS.

/* always assume on smaller screen first */

#floatdiv {
    display:none;
}

/* if screen size gets wider than 1024 */

@media screen and (min-width:1024px){
    #floatdiv {
        display:block;
    }
}

Note that in most modern browsers you can also run media queries in javascript using window.matchMedia

if(window.matchMedia("(min-width:1024px)").matches){
    console.log("window is greater than 1024px wide");
}