Making a div expand with jQuery without moving divs floating to it

Question

I\'m trying to get an effect similar to what you can find at http://www.nokiausa.com/us-en/products/ with a grid of basic information, where a click expands information over

Answer 1

Is this what you were meaning?

Please excuse the horrendous formatting, I wrote it quickly

http://jsfiddle.net/y3QBw/5/

var li_original_height = $('#stuff1').css('z-index');

function growRight() {
    var $stuff = $('#stuff1'),
        li_left = $stuff.offset().left,
        li_top = $stuff.offset().top,
        li_stuff_width = $stuff.outerWidth(true) + 5,
        $sibling = $stuff.next();

    $sibling.css('margin-left', li_stuff_width);
    $stuff
        .css({
            'z-index': 1000,
            background: '#588EC8',
            position: 'fixed',
            top: li_top,
            left: li_left,
            margin: 0
        })
        .animate({
            width: "510px"
        }, 750, function() {});
}

function hideRight() {
    var $stuff = $('#stuff1'),
        $sibling = $stuff.next();

        $stuff.animate({
            width: "250px"
        }, 750, function() {
            $stuff.css({
                'z-index': li_original_height,
                background: '#B8B8B8',
                position: 'relative',
                top: 'auto',
                left: 'auto',
                margin: 5
           });
            $sibling.css('margin-left', 5);
        });

}

$('#stuff1 a').toggle(
    function () {
        growRight(); 
        return false;
    },
    function () {
        hideRight(); 
        return false;
    }
);

Answer 2

In my opinion, this calls for some clever usage of position:absolute. z-index only sets the order for elements that would appear on top of each other in the first place.

Answer 3

Ok, I managed to find a solution which pretty much follows the approach I mentioned in the question - this clones the cell, which in turn animates. CSS properties ensure "expandinatorright" sits absolutely on top of its parent (of course, with z-index making sure it is rendered above everything else).

    function growRight(){
        $('.stuff')
            .clone(false)
            .addClass('expandinatorright')
            .appendTo($('.stuff'));
        $('.expandinatorright').animate({
            backgroundColor: "#FF8600"
        }, 750 );
        $('.expandinatorright').animate({
            width: "510px"
        }, 750, function() {});
    }

I hope this is useful for anyone who might run into a similar problem.

Answer 4

Just taking a quick stab at this, I would suggest that before animating, add a z-index property to the element that you wish to enlarge. This should make it go above the neighboring element and hide it instead of pushing it down.

Something like:

function growRight(){
        $("#stuff1").css("z-index","5");
        $('#stuff1').animate({
            backgroundColor: "#FF8600"
        }, 750 );
        $('#stuff1').animate({
            width: "510px"
        }, 750, function() {});
    }