jQuery: Disable script based on window width/media query

Question

I have the jQuery script below that triggers a div to become floating-fixed. (Which is working and I have no problems with it).

$(document).ready(function() {
    ctop = $('#comment').offset().top - parseFloat($('#comment').css('margin-top').replace(/auto/, 0));
});
$(window).scroll(function (event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();
    var abottom = $('#individual_second_tier').offset().top - parseFloat($('#individual_second_tier').css('margin-top').replace(/auto/, 0));

    // whether that's below the form
    if (y >= ctop) {
        // if so, ad the fixed class
        $('#comment').addClass('fixed');
        if (y > abottom-$('#comment').height()){
            $('#comment').offset({'top': abottom-$('#comment').height()-y});
        }
        else
        {
            $('#comment').offset({'top': 0 });
        }
    } else {
        // otherwise remove it
        $('#comment').removeClass('fixed');
    }
    var newWidth = $('#comment').parent().width();
    $('#comment').width(newWidth);

    });

You can see it in action here. It's the gray box on the right that says "Poll"

My site is responsive so when it goes under 768 pixels, the poll div moves down under the blog content. So in full browser width the script works great, but when I resize it the poll div goes haywire.

I am complete noob when it comes to jQuery -- I am an excellent copy-paster -- but I am imagining that there is a fancy way in the existing script to instruct it to disable it when it matches a media query or browser width, so that I can get rid of the fixed-floating-div functionality.

If anyone wants a local copy to mess with, here is a zip file with the html file (type will look off as I am using webfonts).

I wanted to mess around with your zip but... authentication required on the ftp. — Esteban
– Esteban, Commented May 30, 2013 at 4:46
@Esteban ah sorry about that. Forgot to change the path to be http:// instead of ftp:// — link updated in post. — Armin
– Armin, Commented May 30, 2013 at 11:34

John the Painter · Accepted Answer · 2013-05-30 15:08:32Z

1

Can you not just force the position of the poll to relative, rather than fixed at a designated screen size using media queries?

@media (min-width: 768) {
    #comment { 
        position: relative !important; 
        top: 0 !important; 
    }
}

Or, you could use jQuery within your function

if ($(window).width() > 768) { 
    $('#comment').removeClass('fixed');
}

enter image description here

answered May 30, 2013 at 15:08

John the Painter

2,6158 gold badges64 silver badges105 bronze badges

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

Comments

Armin · Accepted Answer · 2013-05-30 20:14:26Z

1

A fellow without a Stack Overflow account saw my question and provided the answer by e-mail. It's a deceivingly simple solution. Simply adding to the existing code:

if ($(window).width() > 768) {

The final block of code looks like this:

$(document).ready(function() {
    ctop = $('#comment').offset().top - parseFloat($('#comment').css('margin-top').replace(/auto/, 0));
});
$(window).scroll(function (event) {

    if ($(window).width() > 768) {

        // what the y position of the scroll is
        var y = $(this).scrollTop();
        var abottom = $('#individual_second_tier').offset().top - parseFloat($('#individual_second_tier').css('margin-top').replace(/auto/, 0));

        // whether that's below the form
        if (y >= ctop) {
            // if so, ad the fixed class
            $('#comment').addClass('fixed');
            if (y > abottom-$('#comment').height()){
                $('#comment').offset({'top': abottom-$('#comment').height()-y});
            }
            else
            {
                $('#comment').offset({'top': 0 });
            }
        } else {
            // otherwise remove it
            $('#comment').removeClass('fixed');
        }
        var newWidth = $('#comment').parent().width();
        $('#comment').width(newWidth);
    }
});

I tested all the other answers provided here, but none worked the right way. Many thanks, though, for your help.

answered May 30, 2013 at 20:14

Armin

1471 gold badge1 silver badge15 bronze badges

2 Comments

Esteban Over a year ago

Don't forget to mark this as the accepted answer other people might have the same issue as you and will eventually look for questions with accepted answers.

Armin Over a year ago

Yes, indeed. Since I answered my own question, the system didn't let me check it as answered until 24 hours later.

Esteban · Accepted Answer · 2013-05-30 05:26:57Z

0

I faced the same issue sometime ago and this is how I addressed it:

Set a media query to hide the element when needed:

/* Somewhere above... */
div#toHide { display: block; /* ... */ }

@media (min-width: 800) {
    div#toHide { display: none; }
}

Then in my .js file I've created a function like this:

function isDivVisible() {
    return $('div#toHide').is(':visible');
}

Now on my method which I didn't want to execute all it's code if the user won't be able to see it:

function someHugeFunction() {
    if(isDivVisible()) {
        // some crazy stuff here.
    }
}

I don't know if this is elegant or not, this worked for me.

answered May 30, 2013 at 5:26

Esteban

3,1273 gold badges34 silver badges52 bronze badges

2 Comments

Armin Over a year ago

If I understand the answer above correctly... It's hiding the DIV altogether. I still want to show the DIV but disable the script.

Esteban Over a year ago

@Armin: you could change that easily, honestly, as I've said, I did research about this when I had the same issue. But I couldn't find out how to do it without javascript. If you want to change this behavior, just to be sure, would you like this to avoid hiding the div, and only stopping the script's loop?

Collin Henderson · Accepted Answer · 2013-05-30 15:12:44Z

0

Probably something like:

$(window).resize(function(){
  if( $(this).width() <= 768 ) {
    $('foo').removeClass('bar') //whatever css class is doing the undesired effect at breakpoint
  } 
});

answered May 30, 2013 at 15:12

Collin Henderson

1,15411 silver badges22 bronze badges

Comments

damofknowledge · Accepted Answer · 2013-05-30 15:33:03Z

matchMedia may be what you're looking for: http://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media-queries-in-javascript/

Add something like this outside your scroll function:

var isWide,
    width768Check = window.matchMedia("(min-width: 768px)");

width768Check.addListener(setWidthValue);
function setWidthValue (mediaQueryList) {
    isWide = width768Check.matches;
}
isWide = width768Check.matches;

$(window).resize(function(){
    if (isWide) {
        $('#comment').addClass('fixed');
    } else {
        $('#comment').removeClass('fixed');
    }
});

And then in your scroll

if (y >= ctop && isWide) {
...
}

Not perfect but does the trick. The resize() function will appropriately add/remove your fixed class when resizing the window.

Ashar Zafar · Accepted Answer · 2018-09-13 09:03:18Z

0

jQuery: Disable script based on window width/media query Jquery for mobile view only

Add The Javascript

After you have added jQuery you can use the following code in your custom javascript file. You may change the "739" to a different number depending on the device resolution you are targeting.

if ( $(window).width() > 739) {      
  //Add your javascript for large screens here 
} 
else {
  //Add your javascript for small screens here 
}

The End

Yep, we're already done! You can now execute your javascript to target different screen sizes. Let me know if you have any questions or feedback below. Thanks!

answered Sep 13, 2018 at 9:03

Ashar Zafar

4123 silver badges11 bronze badges

Collectives™ on Stack Overflow

jQuery: Disable script based on window width/media query

6 Answers 6

Comments

2 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

2 Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related