CODEWITHSUNDEEP
jquerycssjquery-animate
Booker
Booker

Reputation: 766

CSS removing white space in a specific situation

Take a look at this.

http://jsfiddle.net/DTxQf/18/

When you click on the body of the lower right box, "TOO" is appended to the ul and animated upwards. This results in white space being added to #window-frame. I do not want this. I want no gap between "TOO" and "NEXT ITEM". Can this be done using CSS? I'd rather not fool with heights using JS. Also, any insight as to why this is happening?

Thanks

Upvotes: 4

Views: 387

Answers (3)

Jasper
Jasper

Reputation: 76003

Try using margin-top instead of animating the top property:

$('#latest-image-list').animate({marginTop: "-=20"}, "fast");

Here is a demo: http://jsfiddle.net/DTxQf/27/

Also, on a side-note, you created the height variable without the var statement which put it in the global scope (otherwise it would have been inside the window.load event handler scope). Always use var to make sure you aren't creating global variables unnecessarily (which creates extra overhead each time the variable is looked-up).

Upvotes: 4

ANeves
ANeves

Reputation: 6365

This should explain: http://jsfiddle.net/DTxQf/32/

Where is MOO? Not visible (under the top fold), but still there.
Despite translating the list up by 20px, it still takes the same space.

Upvotes: 0

Wes Pearce
Wes Pearce

Reputation: 259

If the list must be relatively positioned, animate marginTop instead of top.

JSFiddle

Upvotes: 4

Related Questions