JQuery resize only works when starting in full screen

Question

I am not very good at JQuery so I was hoping anybody here could help me.

I created this small JQuery script to change the position of a div upon resizing the window. However it only works when starting at full screen.

Should I refresh the page when the window is resized, and then resize to a bigger window, the JQuery doesn't work. I have to refresh the page at full screen to get it working again. So it only works on the way to, but not on the way back.

To show what I mean, here's a JSFiddle.

If you start at a big screen, you don't see a scrollbar in #rightsection.

Resize the JSFiddle Result window, and press 'Run' when the #rightcontent falls below the #leftsection. When you make the Result window bigger, the scrollbar inside the #rightsection appears.

If anybody can help me with this, I'd appreciate it.

JQuery

$(document).ready(function() {
    $.fn.hasScrollBar = function() {
        return this.get(0).scrollHeight > this.height();
    }

    if($("#rightsection").hasScrollBar()){
        $('#rightsection').css({
            "position":"static",
            "margin":"-75px 0 -55px 150px"
        });
    }

    $(window).resize(function(){
        var w = $(window).width();
        /*Making the screen smaller*/
        if(w < 960){ 
            $('#rightsection').css({
                "margin":"0"
            });
        }

        /*Making the screen bigger*/
        if(w > 960){ 
            $('#rightsection').css({
                "margin":"-75px 0 -55px 150px"
            });
        }
    });
});

Answer 1

Simple... if the box is large enough to trigger the hasscrollbar function, the position:static is being set. But if it doesn't trigger, it doesn't get set in the first place.

Just add it to your 'Making screen bigger' and you'll be good to go.

As another note, I'd set the width triggers as shown below (as it stood nothing would happen at 960px wide. As neither would get applied) .

$(document).ready(function() {
    $.fn.hasScrollBar = function() {
        return this.get(0).scrollHeight > this.height();
    }

    if($("#rightsection").hasScrollBar()){
        $('#rightsection').css({
            "position":"static",
            "margin":"-75px 0 -55px 150px"
        });
    }

    $(window).resize(function(){
        var w = $(window).width();
        /*Making the screen smaller*/
        if(w <= 960){ 
            $('#rightsection').css({
                "margin":"0"
            });
        }

        /*Making the screen bigger*/
        if(w >= 961){ 
            $('#rightsection').css({
                "position":"static",
                "margin":"-75px 0 -55px 150px"
            });
        }
    });
});

Answer 2

Name your handling function, then call it within document ready and within window resize events.

$(document).ready(function() {
    $.fn.hasScrollBar = function() {
        return this.get(0).scrollHeight > this.height();
    }

    if($("#rightsection").hasScrollBar()){
        $('#rightsection').css({
            "position":"static",
            "margin":"-75px 0 -55px 150px"
        });
    }

    function render()
    {
        var w = $(window).width();
        /*Making the screen smaller*/
        if(w < 960){ 
            $('#rightsection').css({
                "margin":"0"
            });
        }

        /*Making the screen bigger*/
        if(w > 960){ 
            $('#rightsection').css({
                "margin":"-75px 0 -55px 150px"
            });
        }
    }

    // call on document load
    render();


    $(window).resize(function(){
        // call on window resize
        render();
    });
});