0
$(function () {
    $(window).resize(function () {
        if ($(window).width() > 1100) {
            $("#logo").on('mouseenter.anim', function () {
                $(this).stop(true).animate({
                    paddingTop: "0px",
                    paddingBottom: "20px"
                }, 200);
            }).on('mouseleave.anim', function () {
                $(this).stop(true).animate({
                    paddingTop: "20px",
                    paddingBottom: "0"
                }, 200);
            });
        } else {
            $("#logo").off('mouseenter.anim mouseleave.anim');
        }
    }).resize();
});

How can I replace the window width in this script to use the viewport width instead so that it matches with my CSS media query?

oceanic815
  • 483
  • 2
  • 9
  • 20
  • By viewport I'm assuming you mean the window not including scrollbars. Check out http://stackoverflow.com/questions/18546067/why-is-the-window-width-smaller-than-the-viewport-width-set-in-media-queries which explains the differences between browsers. – ioseph Feb 24 '14 at 01:48
  • I understand the difference, I'm asking how to implement. – oceanic815 Feb 24 '14 at 01:59
  • From the linked answer, replace $window.width() with: window.innerWidth Which is what is used for media queries – ioseph Feb 24 '14 at 02:10
  • Could you post a jsFiddle with your css & html? – ioseph Feb 24 '14 at 02:32

0 Answers0