Responding to window resize with JavaScript/jQuery

Question

I have <header> and <nav> blocks that are affected by JavaScript. What I would like is for the <nav> block to become position: static if the user resizes the window to smaller than 1119px wide. The script currently works only on page load, but does not detect resize.

I've tried applying the solution from this question, but with no luck. Here's a link to the webpage in question:

http://alookat.org/resize-js/

Here's my JavaScript so far:

<script>
$(document).ready(function(){
    var $window = $(window);


    function checkWidth() {
        windowsize = $window.width();

        if (windowsize > 1119) {
           $(window).scroll(function() {
                if ($(this).scrollTop()>119)
                {
                    $('header').fadeOut();
                    $('nav').css({position: 'fixed', top: '0px'});
                }
                else
                {
                    $('header').fadeIn();
                    $('nav').css({position: 'absolute', top: 'auto'});
                }
            });
        }
        else {
            $('nav').css({position: 'static', top: '0px'});
        }
    }

    // can trigger the resize handler instead of
    // explicitly calling checkWidth()
    $(window).resize(checkWidth).resize();
});
</script>

windowsize = $window.width(); try adding var before windowsize. — Jai
– Jai, Commented Jan 14, 2014 at 12:20
and move the function in global scope outside of doc ready handler. — Jai
– Jai, Commented Jan 14, 2014 at 12:21
Seems more like a job for CSS media queries to me. Kind of pointless to do this in JS. At least the > 1119 part. The scrolling part will still need to be handled in js — Jeff Shaver
– Jeff Shaver, Commented Jan 14, 2014 at 12:24

Khamidulla · Accepted Answer · 2014-01-16 08:22:23Z

1

Use .trigger() for this:

$(window).resize(checkWidth)
         .trigger('resize');

Try following demo. When you open console try to resize window in console log should be outputed when ever you resize it.

Try this code in your server:

$(document).ready(function(){
    var $window = $(window);

    $window.on('resize', function () {
        windowsize = $window.width();

        if (windowsize > 1119) 
        {
            $window.scroll(function() {
                if ($(this).scrollTop()>119)
                {
                    $('header').fadeOut();
                    $('nav').css({position: 'fixed', top: '0px'});
                }
                else
                {
                    $('header').fadeIn();
                    $('nav').css({position: 'absolute', top: 'auto'});
                }
            }).scroll();
        }
        else 
        {
            $('nav').css({position: 'static', top: '0px'});
            $('header').fadeIn();
            $window.off('scroll');
        }
    }).resize();

});

DEMO

edited Jan 16, 2014 at 8:22

answered Jan 14, 2014 at 12:20

Khamidulla

2,9736 gold badges39 silver badges60 bronze badges

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

4 Comments

Danny Over a year ago

I can see the message in the console, which is great. The functionality of the JavaScript is the same as before though—it breaks if I resize from 1119px wide or wider downwards and then scroll. I've added a link to the actual webpage with the code in context here so you know what I mean. Thanks for your help.

Khamidulla Over a year ago

can you add debugger; inside of your checkWidth function for testing purpose?

Khamidulla Over a year ago

Do you want to do something like this? If it does what you want just let me know I will update my answer accordingly. Or if you want some addition put here you comments.

Danny Over a year ago

That is exactly what I meant. Works great. Thanks so much! Legend!

venimus · Accepted Answer · 2014-01-20 13:17:39Z

1

Use media queries in CSS (add somewhere in css)

@media (max-width: 1119px) {
  nav {position: 'static' !important; opacity: 1 !important;}
}

You can simplify your js

<script>
$(document).ready(function() {
    $(window).scroll(function() {
        if ($(this).scrollTop()>119) {
            $('header').fadeOut();
            $('nav').css({position: 'fixed', top: '0px'});
        } else {
           $('header').fadeIn();
           $('nav').css({position: 'absolute', top: 'auto'});
        }
     });
});
</script>

The scroll function will still execute, but will not make any visual changes. This is good, because it will keep track of the changes and resizing after scrolled down will react properly.

edited Jan 20, 2014 at 13:17

answered Jan 14, 2014 at 12:29

venimus

6,1372 gold badges32 silver badges41 bronze badges

2 Comments

Danny Over a year ago

Thanks for the answer. The problem with the media query (even with the !important;) is that the JavaScript overrides it. I've uploaded a proper webpage with the code to make it easier to understand.

venimus Over a year ago

I think you missed !important for nav. Also i see there is a mistake in my code '.nav' should be 'nav'

Nick R · Accepted Answer · 2014-01-14 12:21:27Z

0

Your current code only runs once when the document loads. You need to use something like:

$(window).on('resize', function () {
// your code here

});

So you bind to the $(window)

answered Jan 14, 2014 at 12:21

Nick R

7,8142 gold badges24 silver badges33 bronze badges

1 Comment

Danny Over a year ago

This is really close. Thanks for your help. A problem with this code though is that the browser (Chrome, Safari) almost crashes if I spend too long resizing (I think it's checking and noting different window sizes lots of times a second). I also want to retain the ability to check the screen size on page load, as well as page resize. Here's a link to the actual webpage with the original code to make it easier to understand the problem. The page breaks if I resize from 1119px wide or wider downwards and then scroll.

Collectives™ on Stack Overflow

Responding to window resize with JavaScript/jQuery

3 Answers 3

4 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related