CODEWITHSUNDEEP
jqueryfunctionif-statement
Atomix
Atomix

Reputation: 125

How to run a jquery function only when viewport width is less than chosen?

I would like to run a jquery function only when vieport width is less than 816 px but i can't get it to work..Can someone tell me what am i doing wrong ?

I'm mostly using google chrome dev tools emulator but it apperars also in my private mobile (Desire 820 (1280x720 screen)).I;ve tried to use window.width but with no succes.

<!-- language: lang-js -->
if ($('body').width() >= 816) 
{ 
    $(function()
    {
        $('.top-container').data('size','big');

        $(window).scroll(function()
        {
            if($(document).scrollTop() > 0)
            {
                if($('.top-container').data('size') == 'big')
                {
                    $('.top-container').data('size','small');
                    $('.top-container').stop().animate({height:'8vh'},600);
                    $('li').toggleClass('scroll');
                    $(".top-logo").toggleClass('scroll-logo');
                    $('.top-logo > a > img').toggleClass('scroll-logo');
                }
            }
            else
            {
                if($('.top-container').data('size') == 'small')
                {
                    $('.top-container').data('size','big');
                    $('.top-container').stop().animate({ height:'18vh' },600);
                    $('li').toggleClass('scroll').animate({},600);  
                    $(".top-logo").toggleClass('scroll-logo');
                    $('.top-logo > a > img').toggleClass('scroll-logo');

                }
            }
        });
    });
};

<!-- language: lang-html -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 0

Views: 448

Answers (1)

ProgrammerV5
ProgrammerV5

Reputation: 1962

This will do the trick for you:

$( window ).resize(function() {

  if ($('body').width()  >= 816) {  
    console.log('run my code!');
  };

  $( "body" ).prepend( "<div>" + $( window ).width() + "</div>" );
});


    $( window ).resize(function() {
    
      if ($('body').width()  >= 816) {  
      	console.log('run my code!');
      };
      
      $( "body" ).prepend( "<div>" + $( window ).width() + "</div>" );
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
&nbsp;
</div>

https://jsfiddle.net/p19qkb33/

Upvotes: 1

Related Questions