Flyout Block - jQuery

Question

I want a container inside the page to take the whole width of the page and overlayed on everything else, when active. This is what I have currently and its not working as I want:

$(function() {
    $('.main a').click( function() {
        var href = $(this).attr('href');
        $(href).animate({
            width: [940, 'swing'],
            height: [500, 'swing'],
            opacity: 'toggle'
        }, 500, 'linear');
        return false;
    });
});

http://jsbin.com/anoji4/2/edit

Thanks

Answer 1

you should just set via CSS

position:absolute;
z-index: 10; /* or higher */
top: 0;
left: 0;

to your expandable-div

and when you open them you set height and width with

$(href).animate({
      width: [$('body').width(), 'swing'],
      height: [$('body').height(), 'swing'],
      opacity: 'toggle'
}, 500, 'linear');

or instead of $('body') use $('html') or static size as you did