Scaling the width of a fixed position div with window resize

Question

This may seem like a fairly abstract concept, but I'll try to explain it as best I can.

Div goes from position relative to fixed to absolute depending on the scroll of the window, separate function from this one, but that's just for context.

Now, site's responsive and I'd like content to reflow when the window is resized, including the div that's fixed position. But after trying this function here I realised I was taking the wrong approach.

    $(document).ready(function () {

    var sidebarwidth = $(".sidebarholder").width();
        controlwidth = $(".loop-contain").outerWidth();
        innerwidth = $(".front-contain").outerWidth();
        //get side-contain width dynamically    
        //derivative variable   
            sidecon = (controlwidth - innerwidth);



    $(window).on('resize', function(){
         $('.side-contain').css({
            position: "fixed",
            left: sidebarwidth + innerwidth,
            top: "50px",
            width: sidecon - "24"

        });
        console.log (sidecon);
    });
});

The content will not reflow since it only calculates the variables at the page load, I think.

Any ideas how I can make a fixed position div reflow both it's size and position as a page is resized? I've been digging deep around the web on this one and I just can't come up with anything. And strangely, the console.log shows sidecon width as the initial width even as the page is resized over and over again, despite the fact that the variables are changing. If I'm resizing the page and controlwdith and innerwidth are changing, shouldn't that then change the position of .side-contain?

Answer 1

Move all dimensions calculations inside resize event:

$(document).ready(function () {

$(window).on('resize', function(){

    var sidebarwidth = $(".sidebarholder").width();
        controlwidth = $(".loop-contain").outerWidth();
        innerwidth = $(".front-contain").outerWidth();
        //get side-contain width dynamically    
        //derivative variable   
        sidecon = (controlwidth - innerwidth);


     $('.side-contain').css({
        position: "fixed",
        left: sidebarwidth + innerwidth,
        top: "50px",
        width: sidecon - "24"

    });
    console.log (sidecon);
});

});