Jquery Media Query

Question

The Code below is for a header that expands and shrinks accordingly based on scrolling position. The script itself is fine, but in the mobile version the expansion feature isn't necessary, so I was wanting to disable this based on screen size, similarly to how css can be changed and disabled with media-queries. I was wanting to disable the execution of this code based on screen size:

$(document).ready(function() {

  var pageWidth = $(window).width();    
  var scroll = getCurrentScroll();
  var shrinkHeader = 300;

  $(window).scroll(function() {
    var scroll = getCurrentScroll();
      if ( pageWidth > 800 && scroll >= shrinkHeader ) {
           $('.nav_container').addClass('shrink');
      }
      else {
           $('.nav_container').removeClass('shrink');
    }
 });

function getCurrentScroll() {
  return window.pageYOffset || document.documentElement.scrollTop;
}
});

I have updated the code

*****With the addition of the window width script it works, but it is still pretty buggy. when it falls under 800 window width size the code doesn't execute (as intended), but the css of the expanded header remains as default (i guess), when it should be the css of the smaller header (removeClass ('shrink')

Answer 1

You need to check your window width inside of the scroll function so it is the correct width each time

$(window).scroll(function() {
    var scroll = getCurrentScroll();
    var pageWidth = $(window).width(); 

    if ( pageWidth > 800 ) {
        ( scroll >= shrinkHeader ) ? $('.nav_container').addClass('shrink') : $('.nav_container').removeClass('shrink');
    }
});

Remove the window width var from doc ready. If the page is smaller than 800px then nothing in the scroll gets executed. You only need to check for the shrinkheader if the page is bigger than 800px.

If you want your page to change when you resize then you need to do the same thing inside of $(window).resize(function () { } at which point you should put the code in a function and just call it for scroll and resize

Answer 2

Are you rezising the window? If so, then you need an event handler, something like:

$(window).resize(function () { 

// Your code here

});

Another point is, you should check the orientation of the device.

Answer 3

You shouldn't rely on JavaScript to make your pages responsive to different resolutions or screens sizes, CSS can handle that for you using media-queries .

But you can do something like this and create two different CSS pages. Then whenever the screen resolution adjusts to a certain size the CSS will change as well.

function adjustStyle() {
        var width = 0;
        // get the width.. more cross-browser issues
        if (window.innerHeight) {
            width = window.innerWidth;
        } else if (document.documentElement && document.documentElement.clientHeight) {
            width = document.documentElement.clientWidth;
        } else if (document.body) {
            width = document.body.clientWidth;
        }
        // now we should have it
        if (width < 800) {
            document.getElementById("myCSS").setAttribute("href", "css/narrow.css");
        } else {
            document.getElementById("myCSS").setAttribute("href", "css/main.css");
        }
    }

    // now call it when the window is resized.
    window.onresize = function () {
        adjustStyle();
    };