Question

I am fluent in CSS and JS. Using jQuery on this project. I have a fluid grid which is comprised of an unordered list (with ‘li’ tags). Each ‘li’ (tile) has the same width and height. As the browser expands or contracts, the tiles wrap down or up to fill the space.

When a user clicks a tile I want the tile to expand to a larger fixed height and width, equivalent to TWO tiles width and FOUR tile heights. The surrounding tiles will of course have to shift to fit the inflated tile. But I need the tiles to continue to flow around this now larger tile, with no gaps.

I am wondering if the final composition of the tiles (with an inflated, floating tile) can be achieved with native CSS or if I need to write Javascript to help position the tiles around the inflated one.

Answer 1

The best way I can think of would be adding a class to selected li and using CSS3 pseudo selectors to apply and clear floats based on position.

e.g.

li.active ~ li:nth-of-type(1n+2) {
    float: left
}

li.active ~ li:nth-of-type(1n+2):after {
    content: '\0a00' // whitespace
    width: 0;
    height: 0;
    line-height: 0;
    clear: left;
}

Incase you have not come across them I will explain the selectors.

/ the ~ ( tilde ) is an adjacent element selector, imagine the following html

<li></li>
<li></li>
<li class="active"></li>
<li></li>
<li></li> 

And css 

li.active ~ li {
    background-color: green;
}

// the ~ would select all the li elements that come after the the occurence of 
// .active element and apply a green background. illustrated below with an *

<li></li>
<li></li>
<li class="active"></li>
<li></li> *
<li></li> *

The nth-of-type selector allows you to select independent siblings of the matched element

using previous html

with this css

// the nth-of-type value can also be an equation e.g. 1n + 2
li:nth-of-type(2) {
    background-color: green;
}

<li></li>
<li></li> *
<li class="active"></li>
<li></li>
<li></li>

Combined together

li.active ~ li:nth-of-type(2) {
    background-color: green;
}

<li></li>
<li></li> 
<li class="active"></li>
<li></li>
<li></li> *

This is a very elegant solution, it might take some fiddling to get the results you want, but you certainly have the tools in CSS to do it.

Here is a full list of CSS3 selectors and what they do.

http://www.w3.org/TR/css3-selectors/#selectors

You may need to dig around to find better use examples than the ones provided in the the document, but at least you will know what to search for.

It is obviously modern browsers only that support this, but you can fix IE support with

ie9.js

http://code.google.com/p/ie7-js/

Or if that solution doesn’t grab your fancy

I strongly recommend the previous suggestion of jQuery masonry

http://masonry.desandro.com/