how to re-calculate variables in javascript
<pre><code>function scrollContent(){
    var div = $('#scrolling-content'),
                 ul = $('ul.image'),
                 // unordered list's left margin
                 ulPadding = 0;

    //Get menu width
    var divWidth = div.width();

    //Remove scrollbars
    div.css({overflow: 'hidden'});

    //Find last image container
    var lastLi = ul.find('li:last-child');

    //When user move mouse over menu
    div.mousemove(function(e){

    //As images are loaded ul width increases,
    //so we recalculate it each time
    var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;   
    var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
      div.scrollLeft(left);
    });     
}
</code></pre>

<p>This is how I scroll my image list. The problem is that <code>#scrolling-content</code> element's size is dynamic. It changes on window resize. Here;</p>

<pre><code>$(window).resize(function() {
        $("#scrolling-content").css("width",$(window).width() + "px");
        $("#scrolling-content").css("height",($(window).height()-400) + "px");
});
</code></pre>

<p>So it has to recalculate the left value when user changes windows size. How sould I change script to do that? Recalling <code>scrollContent()</code> function with <code>window.resize</code> function is a noob solution I guess. And it creates conflict for IE.</p>
