CODEWITHSUNDEEP
javascriptjquery
Christopher Camplin
Christopher Camplin

Reputation: 313

How do you absolutely position elements into a grid layout using Javascript?

The following example shows tiled divs, that once clicked fade out, I have been trying to extend this so a child img is removed instead of the div.

When this happens the div loses any CSS defined width & height and the grid is broken.

Does anyone know how to still animate the image using JQuery UI effects which uses display none and maintain grid layout ?

http://jsfiddle.net/bzCbh/4/ - working example

Thanks

Upvotes: 1

Views: 807

Answers (1)

Jan
Jan

Reputation: 5815

Your tiles are set to display:inline which ignores height and width of said element. So it's natural they will collapse when the image is removed, height and width were never respected by the div to begin with. Change them to display:inline-block and it'll work.

.layer .tile { ... display:inline-block; ...}

You should also change the images to display:block to make them behave consistently

.layer .tile img { display:block; }

​ Working fiddle: http://jsfiddle.net/bzCbh/7/

Upvotes: 2

Related Questions