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

you need to set the screen element:

var screen = $(window)

for example:

$(document).ready(function () {

    var screen = $(window)    

    if (screen.width < 1024) {
        $("#floatdiv").hide();
    }
    else {

        $("#floatdiv").show();
    }

});

Answer 2

Media queries for the win

How do I make a div not display, if the browser window is at a certain width?

@media all and (max-width: 1024px) { /* Change Width Here */
  div.class_name {
     display: none;
  }
}

Answer 3

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");
}