Making sure my sliding panel remains centered on window resize?

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?

My code is as follows:

$(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 posit开发者_开发问答ion absolute
        $(window).resize($userPanel.css({ left: windowWidth - panelWidth })); // ???????????????

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

Can anyone offer me some advice as to where Im going wrong?

Regards Kyle

If the panel's width doesn't change, you don't need to listen for the resize event - you can do it straight CSS

div.panel {
    width: 500px; // example
    position:absolute;
    left: 50%;
    margin-left: -250px; // negative half of width
}

Update: If you want a variable width panel that's centered, you could (and should) still use CSS:

div.panel {
    width: auto;
    position:absolute;
    left:  200px;
    right: 200px;
}

The panel should then stretch to fulfill the left/right constraints.

As for the code (which I didn't look too hard at earlier), here's why I think it fails - just know, that I'm not a jQuery guy, so I may be wrong.

1. You're calculating the position only once, when the page has loaded, so the resize handler would, if it worked, just set the same left value again and again.
2. The resize handler should be a function. Right now it's a function call which returns a jQuery-wrapped element. So when resize occurs, it tries calling the object as though it's a function.
3. Your selector matches all div elements of class 'panel', so even if you have only 1 panel, you'll still get a list back, and not just a single element. I'd imagine you want a single, specific element (in which case you should use an id rather than a class to identify it). Otherwise, you'll need to set the position for each element in the list. But judging from the code, it looks like you're trying to use the list as though it's a single element, so I'm guessing you only have the one panel.

So try this (but still try the CSS approach first):

$(document).ready(function() {
    $(window).resize(function() { // everything must take place inside the event handler
        var panel = $('div#userpanel'); // get the panel by its id, not its class

        panel.hide().delay(2000);
        panel.show('slide', {direction: 'up'});

        var leftOffset = ($(this).width() - panel.width()) / 2;
        panel.css({
          left: String(leftOffset) + 'px'
        });
    });

    $('#closeMe').click(function(e) {
        e.preventDefault();
        $('div#userpanel').hide('slide', { direction: 'up' });
    });
});