CODEWITHSUNDEEP
javascriptjqueryhtmlcss
EugenSunic
EugenSunic

Reputation: 13703

Clearing white space created by relative positioning and keeping the moved object unaffected

I have a div which is placed near the header. When I click on it, the div moves down towards the center of the page (I'm using the jquery animate function).

Once the div has moved to the center of the page I want the other elements (the other div's which are placed near the header) to fill the white space which was left because of the div which moved to the center of the page.

I have successfully removed the white space and other elements have filled the space.

The main problem is, when taking care of the left white space the div which is now in the center is also being affected!

Click on the first element: http://jsfiddle.net/maven123/vpumfujd/3/

$(document).ready(function () {
    $(".icons").click(function () {
         var icon_position = $(this).offset();
        $(this).animate({
            left: (window.outerWidth / 2) - icon_position.left-400,
            top: (window.outerHeight / 2) - icon_position.top
        }, 1200, function () {
            $(this).css({
                position:"relative",
                marginLeft:"-100px"
            });
        });
    });
});

Upvotes: 0

Views: 76

Answers (1)

C3roe
C3roe

Reputation: 96325

Of course it gets affected by the negative margin-left you set on it; if you don’t want that, don’t set that margin, and use another way to make the remaining elements move left.

I’d suggest to switch the box to absolute positioning to move it to the middle, and animate margin-left for the next box after it from 100px to 0.

Upvotes: 1

Related Questions