Question

I have an idea to make a list of elements and when you click one the list slides to the left, loads a page through AJAX and displays the information about the clicked element.

The dream is to make something simular to the new gmail interface on android 3.

Watch this video from 0:49 to 0:59 to see what I mean

video

I’ve tried to use the jQuery UI Mobile interface, but I am not sure it is possible to use this for a website that is not made for mobiles.

I want to place the interface in a div on the site with other elemets around it.

Any ideas on how to use jqueryUI mobile for this?

Do you know any liberies that whould do this?

Answer 1

Yes, this is possible. But it´s tricky since you will have to check and handle all the dimensions.
But I dont know if with jquery ui mobile.

you could do it like this

<div class="wrapper ui-helper-clearfix" style="overflow:hidden;max-width:screen-width">
  <div class="inner" style="width:navigation+maillist+mailcontent">
   <div class="navigation" style="float:left">
   </div>
   <div class="maillist" style="float:left">
   </div>
   <div class="mailcontext" style="float:left">
  </div>
</div>

Now you could, if you find out the screen width, split this width and set the width for navigation and maillist. If somebody clicks on the maillist, you will set the offset of the “.inner” “-(the pixel of the navigation)” to left. While the content hides overflow you could reach this effect. It´s not tested by myself, but im sure this could work…