hide the right content according to the screen width

Question

when i using the following code in a file.

var width=jQuery(window).width();
    if(width<980){
        jQuery('.std .home-right').hide();
    }else{
     jQuery('.std .home-right').show();
     }

when i resize the window width less than 980px, the .std .home-right can't hide, when i resize the window width less than 980px to bigger than 980, the .std .home-right can't show. why?

Can you include your event handler code? How are you detecting window resize? — mrtsherman, Jan 21 '13 at 04:09
Are you calling this on the window resize event? Can you show where this code is being called from ? — Ravi Y, Jan 21 '13 at 04:09
what is .sid .home-right? If they are classes of same div, you can use one of those classes. else seperate them by a comma like jQuery('.std , .home-right').hide(); — defau1t, Jan 21 '13 at 04:13
possible duplicate of [Detect when a window is resized using JavaScript ?](http://stackoverflow.com/questions/2996431/detect-when-a-window-is-resized-using-javascript) — Ja͢ck, Jan 21 '13 at 04:25

score 3 · Answer 1 · edited Jan 21 '13 at 04:15

3

For your case, instead of jquery, use width detection in stylesheet may be simpler :

Add the following in your css:

@media all and (min-width: 980px) {  .std .home-right { display:none; } }

@media all and (max-width: 979px) {   .std .home-right { display:block; } }

Hope this help.

edited Jan 21 '13 at 04:15

Ja͢ck

170,779
38
263
309

answered Jan 21 '13 at 04:14

Bowie

992
3
10
25

does this is css3? what @media all and (min-width: 980px) is meaning? – learn116 Jan 21 '13 at 04:16
yes, the media type supported in css3. Take a look at this for reference: http://www.w3.org/TR/CSS2/media.html – Bowie Jan 21 '13 at 04:20

score 1 · Accepted Answer · answered Jan 21 '13 at 04:14

1

You need to monitor the resize event.

$(window).resize(function () {
  var width = $(window).width();
  console.log(width);
  if (width < 500) {
    $('.std .home-right').hide();
  } else {
    $('.std .home-right').show();
  }
});

http://jsfiddle.net/C2Kx9/

answered Jan 21 '13 at 04:14

mrtsherman

39,342
23
87
111

i using the code to ipad equipment,if the screen is 400x300, do the $('.std .home-right').hide(); ok? – learn116 Jan 21 '13 at 04:26
If you are asking whether iOS devices can run javascript... then yes. However, bigger picture, it sounds like you are using this to detect mobile devices in order to optimize the display. If that is the case then use the solution from @Bowie – mrtsherman Jan 21 '13 at 04:28

score 0 · Answer 3 · answered Jan 21 '13 at 04:14

add $(window) to resize event, like this:

function setWidth(){
    var width = $(window).width();
    if(width < 980){
        jQuery('.std .home-right').hide();
        console.log(1);
    } else {
        jQuery('.std .home-right').show();
        console.log(2);
    }
}
$(document).ready(function(){
    setWidth();
});
$(window).resize(function(){
    setWidth();
});

score 0 · Answer 4 · answered Jan 21 '13 at 04:14

What you have done is ( hopefully on document ready ) just set the width of the browser. If you want it work whilst whilst resizing you would need to do something like this;

$( window ).resize( function () {

    var width = $( window ).width();

    if ( width < 980 ) {
        $( '.std .home-right' ).hide();
    } else {
        $( '.std .home-right' ).show();
    }

});

That will cause the browse to hide and show the required elements. But before you go ahead and just dump that code in, may I recommend having a look at this page first

http://benalman.com/code/projects/jquery-throttle-debounce/examples/throttle/

The resize event will generate many events, this is usually considered a bad thing.

i using the code to ipad equipment,if the screen is 400x300, do the $('.std .home-right').hide(); ok? — learn116, Jan 21 '13 at 04:27

score 0 · Answer 5 · answered Jan 21 '13 at 04:22

You should write this code in the window resize function like this

$(window).resize(function () {
var width=jQuery(window).width();
    if(width<980){
        jQuery('.std .home-right').hide();
    }else{
     jQuery('.std .home-right').show();
     }
});

this may useful for you

hide the right content according to the screen width

5 Answers5