Pages

How to Stop Jquery code running on small screens

Using the IF ELSE statement and CSS media queries you can stop running a JQuery script on a Small screen or a mobile device which has a lowe screen resolution. This will be great to stop Jquery animations on the mobile phones

HTML Code

<div id="mobiledetech"></div>

<!--You can place this HTML somewhere in your HTML page-->

CSS Code

    .mobiledetech{
        display: block;
    }

    @media (min-width: 767px) {

        .mobiledetech {
            display: none;
            /* increases the carousel height so it looks good on phones */
        }
    }

/* This will detect the div tag to diaplay or display none*/


JQUery Code

<script>
//Apllying condition-
    $(window).scroll(function() {
        if ($(".toggleMenu").css("display") == "none") {
// Jquery code to run    
        var scroll = $(window).scrollTop();
        if (scroll >= 400) {
            $(".navbar-default").addClass("navbar-fixed-top slideDown hitebg");
            $('.line2').css('display', 'none');
        } else {
            $(".navbar-default").removeClass("navbar-fixed-top slideDown hitebg");
            $('.line2').css('display', 'block');
        }  
// END
        }
    });
</script>

// If the div tag is display none the Jquery will run on the page

No comments:

Post a Comment

Search This Blog