CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2475268
user2475268

Reputation: 33

Responsive jQuery script load

I have a script that fades in my logo based on the scroll position (based on Daniel Stuart's solution: http://danielstuart.ie/2010/09/20/my-jquery-mini-logo/ )

    <script>
        var $scrolled = new Boolean(false);
        jQuery.noConflict();
        jQuery(window).scroll(function () {
            position = jQuery(window).scrollTop();
            if(position >=250 && $scrolled == false){
                $scrolled = new Boolean(true);
                jQuery('.small-logo').fadeIn('normal', function() { });
            }else if(position <250 && $scrolled == true){
                $scrolled = new Boolean(false);
                jQuery('.small-logo').fadeOut('normal', function() { });
            }
        });
    </script>

The issue is that the site is responsive and I don't want this to load when the browser width is less than 768px. How can I make this happen, or not happen as it were?

Upvotes: 0

Views: 212

Answers (3)

Justinas
Justinas

Reputation: 43507

Check if window width is good for your script:

<script>
    var $scrolled = new Boolean(false);
    jQuery.noConflict();
    jQuery(window).scroll(function () {

        if ($(window).width() < 768)
            return false;

        position = jQuery(window).scrollTop();
        if(position >=250 && $scrolled == false){
            $scrolled = new Boolean(true);
            jQuery('.small-logo').fadeIn('normal', function() { });
        }else if(position <250 && $scrolled == true){
            $scrolled = new Boolean(false);
            jQuery('.small-logo').fadeOut('normal', function() { });
        }
    });
</script>

Upvotes: 0

JanR
JanR

Reputation: 6132

You can use the following jQuery functions to find out the size of the screen:

$(window).height();   // returns the height of browser window
$(window).width();   // returns the width of browser window

You can use it in an if statement and only run your desired content if the screen width > 768:

if ($(window).width > 768)
{
   //do magic here
}

Upvotes: 0

SomeKittens
SomeKittens

Reputation: 39522

$(window).width() is what you need:

jQuery(window).scroll(function () {
      if (jQuery(window).width() > 768) {
        position = jQuery(window).scrollTop();
        if(position >=250 && $scrolled == false){
            $scrolled = new Boolean(true);
            jQuery('.small-logo').fadeIn('normal', function() { });
        }else if(position <250 && $scrolled == true){
            $scrolled = new Boolean(false);
            jQuery('.small-logo').fadeOut('normal', function() { });
        }
      }
    });

Upvotes: 2

Related Questions