Making sure my sliding panel remains centered on window resize?
<p>I have created a sliding panel that should appear in the center of any sized window, my problem however is that I have added window.resize around my css calculations which doesnt seem to work, when the page is resized then the window crashes?</p>

<p>My code is as follows:</p>

<pre><code>$(document).ready(function() {
        var $userPanel = $('div.panel');

        // hide div.panel then show it and slide into view
        $userPanel.hide().delay(2000);
        $userPanel.show('slide', { direction: 'up' });

        // work out the window width / 2 to get the center and the same for div.panel
        var windowWidth = $(window).width() / 2;
        var panelWidth = $userPanel.width() / 2;
        // subtract the div.panel width from the window width / 2
        var positionCentered = windowWidth - panelWidth;

        // add css to the left property of position absolute
        $(window).resize($userPanel.css({ left: windowWidth - panelWidth })); // ???????????????

        $('#closeMe').click(function(e) {
            e.preventDefault();
            $userPanel.hide('slide', { direction: 'up' });
        });
    });
</code></pre>

<p>Can anyone offer me some advice as to where Im going wrong?</p>

<p>Regards
Kyle</p>
