Modern UI (Metro) style tile in HTML 5?

javascript css html modern-ui
Bastien Vandamme picture Bastien Vandamme · Apr 24, 2013 · Viewed 13k times · Source

I would like to know if it's possible to recreate the tile system of modern UI from Windows 8 on a HTML page.

I already created this from this website. Here is the code 

<div class="tile pos1-1 w1h1 techolive"></div>
<div class="tile pos1-2 w1h1 techblue"></div>
<div class="tile pos2-2 w1h1 techred"></div>
<div class="tilebanner" style="font-size: 20px !important;">
    <a class="tile pos2-3 w2h1 techdarkblue" href="...">
                    List of<br/>
                    Sessions
    </a>
</div>

Now i would like to add the same slide movement effect of modern UI. I guest I need javaScript to create that. Perhaps this feature or a similar feature is included in HTML 5 or CSS. Do you know where I can find a sample?

Answer

Jan Hommes picture Jan Hommes · Apr 24, 2013

There is a plugin for jQuery called Metro JS. Maybe you can use this to create the tiles with jquery and javascript.

Related questions

Retrieve the position (X,Y) of an HTML element relative to the browser window

I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript relative to the browser window.

Read More
Set cookie and get cookie with JavaScript

I'm trying to set a cookie depending on which CSS file I choose in my HTML. I have a form with a list of options, and different CSS files as values. When I choose a file, it should be saved …

Read More
Failed to load resource: the server responded with a status of 404 (Not Found)

I can't solve my link problem. Could you help on to this to link CSS and JS File? CSS: <link href="../Jquery/jquery.multiselect.css" rel="stylesheet"/> <link href="../Jquery/style.css" rel="stylesheet" /> <link …

Read More