CODEWITHSUNDEEP
jquery
Armin
Armin

Reputation: 147

jQuery: Disable script based on window width/media query

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).

Upvotes: 6

Views: 16132

Answers (6)

Ashar Zafar
Ashar Zafar

Reputation: 402

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!

Upvotes: 0

Armin
Armin

Reputation: 147

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.

Upvotes: 1

damofknowledge
damofknowledge

Reputation: 1

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.

Upvotes: 0

Collin Henderson
Collin Henderson

Reputation: 1154

Probably something like:

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

Upvotes: 0

John the Painter
John the Painter

Reputation: 2615

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

Upvotes: 1

Esteban
Esteban

Reputation: 3139

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.

Upvotes: 0

Related Questions