JQuery: disable script based on window / media query width

Question

I have a jQuery script below, which causes the div to become floating. (What works, and I have no problem 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 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 . This is the gray square on the right that says "Poll"

My site is responsive, so when it is under 768 pixels, the polling div moves down below the content of the blog. Thus, the full width of the browser script works fine, but when I resize it, the div div goes haywire.

I am completely ready when it comes to jQuery - I am a great paste-paste instance, but I imagine that there is a fancy way in the existing script to make it turn it off when it matches the media request or browser width so that I can get rid of fixed-floating functionality -div.

If someone wants the local copy to get into a mess, here is a zip file with an html file (the type will look like I use Web fonts).

Answer 1

A friend without an account considered my question and provided an answer by e-mail. This is a deceptively simple solution. Just adding to the existing code:

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

The last block of code is as follows:

 $(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 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 checked all the other answers provided here, but no one worked correctly. Thank you very much, however, for your help.

Answer 2

Can you not just force the polling position to be relative, and not be fixed at a certain screen size using media queries?

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

Or you can use jQuery in your function

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

Answer 3

I ran into the same problem once, and this is how I addressed it:

Set the media query to hide the item if necessary:

 /* Somewhere above... */ div#toHide { display: block; /* ... */ } @media (min-width: 800) { div#toHide { display: none; } } 

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

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

Now, in my method, which I did not want to execute, all this is code, if the user cannot see it:

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

I don’t know whether it is elegant or not, it worked for me.

Answer 4

Perhaps something like:

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

Answer 5

matchMedia might be what you are 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 a trick. The resize () function will appropriately add / remove your fixed class when the window is resized.