Check screen width with jquery

Question

I have some code like this :

<script>
$(function(){
    $(".flip").flip({
        trigger: 'hover'
    });
});
</script>

I want to check if media screen smaller than 480px I want to change the trigger into 'click' not 'hover' again.

I have tried code like this, but it's not worked yet.

<script>
$(function(){
    if($(window).width() < 480){
        $(".flip").flip({
            trigger: 'click'
        });
    }else{
        $(".flip").flip({
            trigger: 'hover'
        });
    }
});
</script>

How could I check that screen width ?

Possible duplicate of [Do something if screen width is less than 960 px](http://stackoverflow.com/questions/7715124/do-something-if-screen-width-is-less-than-960-px) (And all you would have needed to do to find that would have been typing your question title into google verbatim ...) — CBroe, Oct 29 '16 at 04:22

score 0 · Answer 1 · answered Oct 29 '16 at 04:16

0

Use $(window).width() function

answered Oct 29 '16 at 04:16

selami

2,478
1
21
25

Could you give me some example about use $(window).width() with my code before ? – Nicholas Oct 29 '16 at 04:17
trigger: ($(window).width()>400?'hover':'click') – selami Oct 29 '16 at 04:29

score 0 · Answer 2 · answered Oct 29 '16 at 04:20

0

if($(window).innerWidth() <= 480) {
   ...
}

answered Oct 29 '16 at 04:20

react_or_angluar

1,568
2
13
20

While this code snippet may solve the question, [including an explanation](http://meta.stackexchange.com/questions/114762/explaining-entirely-code-based-answers) really helps to improve the quality of your post. Remember that you are answering the question for readers in the future, and those people might not know the reasons for your code suggestion. – andreas Oct 29 '16 at 10:46

score 0 · Accepted Answer · answered Oct 29 '16 at 04:24

Check The Code In Your Browser. So You Get Correct Idea.

function showWidth( ele, w ) {
  $( "div" ).text( "The width for the " + ele + " is " + w + "px." );
}
$( "#getp" ).click(function() {
  showWidth( "paragraph", $( "p" ).width() );
});
$( "#getd" ).click(function() {
  showWidth( "document", $( document ).width() );
});
$("#getw").click(function() {
  showWidth( "window", $( window ).width() );
});

 body {
    background: yellow;
  }
  button {
    font-size: 12px;
    margin: 2px;
  }
  p {
    width: 150px;
    border: 1px red solid;
  }
  div {
    color: red;
    font-weight: bold;
  }

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<body>
 
<button id="getp">Get Paragraph Width</button>
<button id="getd">Get Document Width</button>
<button id="getw">Get Window Width</button>
<div>&nbsp;</div>
<p>
  Sample paragraph to test width
</p>
 
<script>
function showWidth( ele, w ) {
  $( "div" ).text( "The width for the " + ele + " is " + w + "px." );
}
$( "#getp" ).click(function() {
  showWidth( "paragraph", $( "p" ).width() );
});
$( "#getd" ).click(function() {
  showWidth( "document", $( document ).width() );
});
$("#getw").click(function() {
  showWidth( "window", $( window ).width() );
});
</script>
 
</body>

Check screen width with jquery

3 Answers3