metro interface

[droctoganapus86]

I am trying to build something like the metro interface.

I have several tiles, which i would like to get bigger on mouseEnter, and get smaller on mouseLeave.

I've tried jquery Animate, but that messes up the float properties.

anyone who could push me in the right direction?

also, little demo over here

 

[descalzo]

I am trying to build something like the metro interface.

Which is ?

 

[essellar]

Which is ?

That's the new start/touchscreen interface for Windows 8.

And yes, messing about with the size of floating things is going to cause problems with content reflow. You'll need to provide stable anchor containers that won't need to reflow when the tiles the user can see resize (yes, more markup -- hooray!) or use (transparent) borders that shrink as the content expands. To scale up to window size, you'd probably want to duplicate the tile as an overlay and animate that instead. (Just conceptualizing; I haven't tried it yet.)

 

[droctoganapus86]

so what you're saying is basically:
mess with borders, or make a copy of the tile in the required size and display that?

 

[essellar]

That's about the size of it, yes, although "making a copy" would mean placing a new tile of the same size over top of the existing one, then dynamically scaling the copy. It would look like the original tile is being zoomed, but since it's on a different z-level it won't push any of the existing tiles around.

The only other solutions I can think of would mean de-floating the tiles and "pinning" them (using absolute positioning, probably with negative margins so you can place the pins somewhere other than the top-left corner), but that would make things resolution-dependent unless you go for a fixed two-high stack to accommodate the smallest expected screen rez and force horizontal scrolling (which is probably more acceptable than forcing a width and vertical scroll). Or you could do everything on a canvas and deal with the usability and JS programming issues...

 

[droctoganapus86]

I am not that much of a html hero... i'll just go and mess around