Question

I have web page that has a collection of tiled elements as a background. Positioned above this, I have another set of tiles (that are twice as large) acting as an overlay. Each of these larger tiles has a ‘margin-right’ equal to the size of one of the smaller background tiles. You can see an example of this @ http://jsfiddle.net/dhx2r/2/ *updated

At first glance this displays correctly. The problem is that due to each larger tile having this right margin, it means if you expand the window, a tile won’t slide up to fill the gap unless it’s larger than 3 small tiles wide. (like this: http://img444.imageshack.us/img444/1412/70953496.png)

Ideally I’d somehow attach to the window.resize event and set the ‘margin-right’ to ‘0’ when a gap of 3 small tiles becomes available. I tried to do this with the code in the js panel of jsfiddle yet it didn’t give the correct results. Since the code I’m using relies on the ‘window.resize’ event, the jsfiddle doesn’t demonstrate what actually happens but it at least shows the code I’m using.

I’ve been struggling with this problem for ~7 hours today so my mind is a little fried! My intention after fixing this initial problem was to then somehow stagger the odd rows so they have a ‘margin-left’ of the width of the small tiles, to give this effect: http://img507.imageshack.us/img507/3600/57663338.png

I managed to calculate even/odd rows using (assuming small tiles were 150px and large 300px):

if ((pos != 0) && (pos % 600 != 0)) {
    // The row is even, stagger the tiles.
}
else {
    // The row is odd, do nothing.
}

.. however I never got past this inital problem to work on the logic.

Anyway if anyone has a solution on how I can get this working I’d greatly appreciate it! I feel like I’ve wasted a whole day banging my head against a wall.

Thanks 🙂

Answer 1

I have a beginning of the solution but sometimes the color is not set correctly. I’m searching to resolve it.

Fiddle 1

Finally all problems are solved here.

Thanks you, it was funny for me to find asolution. I hope this solution is good for you.