Hide div if screen is smaller than a certain width

Question

I want to hide a floating div if the user screen is  lt  1024px as it will overlay with my blog content area  I found this jQuery on the net but I am not sure how to use it     document  ready function      if   screen width gt 1024            if screen size is 1025px wide or larger         yourClass   css  display    none       you can also use     yourClass   hide      elseif   screen width lt  1024             if screen size width is less than 1024px         yourClass   css  display    block       here you can also use show            If my floating div class name is sharecontent  should I replace the above script like below  If yes  it s not working     document  ready function      if   screen width gt 1024            if screen size is 1025px wide or larger         sharecontent   css  display    none       you can also use     yourClass   hide      elseif   screen width lt  1024             if screen size width is less than 1024px         sharecontent   css  display    block       here you can also use show            I also tried replacing the screen width with window width but still no success

User · Answer

The problem I was having is my css media queries and my IF statement in Jquery clashing. They were both set to 700px but one would think it's hit 700px before the other.

To get around this I created a empty Div right at the top of my HTML(outside my main container)

<div id="max-width"></div>

In css I set this div to display none

 #max-width {
        display: none;
    }

In my JS created a function

var hasSwitched = function () {
    var maxWidth = parseInt($('#max-width').css('max-width'), 10);
    return !isNaN(maxWidth);
};

So in my IF statement instead of saying if (hasSwitched<700) perform the following code, I did the following

if (!hasSwitched()) { Your code

}

else{ your code

}

By doing this CSS tells Jquery when it's hit 700px. So css and jquery are both synchronized... rather than having a couple of pixels difference. Do give this a try peeps it shall definitely not disappoint.

To get this same logic working for IE8 I used the Respond.js plugin(which also definitely works) It lets you use media queries for IE8. Only thing that wasn't supported was the viewport width and viewport height... hence my reason to try get my css and JS working together. Hope this helps you guys

User · Answer

The problem with your code seems to be the elseif-statement which should be else if  Notice the space     I rewrote and simplyfied the code to this     document  ready function           if  screen width  lt  1024                yourClass   hide              else                yourClass   show

User · Answer

Is your logic not round the wrong way in that example  you have it hiding when the screen is bigger than 1024   Reverse the cases  make the none in to a block and vice versa

User · Answer

Use media queries  Your CSS code would be    media screen and  max-width  1024px         yourClass           display  none  important

User · Answer

I have the almost the same situation as yours  that if the screen width is less than the my specified width it should hide the div  This is the jquery code I used that worked for me     window  resize function        if    this  width    lt  1024             divIWantedToHide   hide         else            divIWantedToHide   show

[jquery] Hide div if screen is smaller than a certain width

Examples related to jquery

Examples related to hide

Examples related to resolution

Examples related to show