Disable certain javascript code only to mobile devices

Question

I have a javascript code to rotate several divs using the .fadeOut .fadeIn functions and I have those same divs float on the sidebar so the position stays fixed while you scroll. This works perfectly when the window is larger than 980px but starts to overlap when on mobile devices. I was wondering if someone would be able to help me out with a code to have the the scroll function not run when the window is less than 980px. Below is the script i am using to fix the sidebar while scrolling.

$(function(){
    var stickyRibbonTop = $('.rotate').offset().top;

    $(window).scroll(function(){
            if( $(window).scrollTop() > stickyRibbonTop ) {
                    $('.rotate').css({position: 'fixed', top: '0px'});
            } else {
                    $('.rotate').css({position: 'relative'});
            }
    });

});

The test site is am using is beta.badsentinel.com. Please check and shrink the window size to get a better idea of what i am talking about. The sidebar will start to overlap.

thanks in advance.

if(document.body.clientWidth > 980)return; should work

Travis J
– Travis J

2014-07-21 22:27:35 +00:00
Commented Jul 21, 2014 at 22:27 — Travis J
– Travis J, Commented Jul 21, 2014 at 22:27

472084 · Accepted Answer · 2014-07-21 22:27:31Z

3

Instead of setting the CSS, add and remove a class. That way you can set what each class does using media queries.

answered Jul 21, 2014 at 22:27

472084

17.9k10 gold badges67 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

hutingung Over a year ago

Please provide sample code. I think your answer is more like comment.

Paul Over a year ago

So i just made another rotate class (.rotate-mobile) and used the Media query to only apply it to max-width: 980px. I set the CSS on rotate-mobile to relative position so it doesn't stay fixed. I am just not sure how I would apply that to the code above. Sorry but im still a little new to javacripting.

Paul Over a year ago

NVM I was able to get it with just setting the media query to max-width 980 and having the CSS on the div class with a relevant position. Thanks alot. Its working exactly how i wanted it to.

Abdul Shakoor Kakar · Accepted Answer · 2014-07-21 23:17:37Z

0

You should try:

function widthDetect(){
if (($(window).width() <= 980  )) {
    var stickyRibbonTop = $('.rotate').offset().top;
    $(window).scroll(function(){
            if( $(window).scrollTop() > stickyRibbonTop ) {
                    $('.rotate').css({position: 'fixed', top: '0px'});
            } else {
                    $('.rotate').css({position: 'relative'});
            }
    });
}}
widthDetect();
$(window).resize(function(){
    widthDetect();
});

and you can also do it with css media query.

@media only screen and (max-width: 980px) { 
.rotate { position:relative !important;}
}

edited Jul 21, 2014 at 23:17

answered Jul 21, 2014 at 22:38

Abdul Shakoor Kakar

62112 silver badges23 bronze badges

Collectives™ on Stack Overflow

Disable certain javascript code only to mobile devices

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related