iPhone specific EPiServer website
labs.episerver.com now has a specific layout for the iPhone. If you go on labs using your iPhone or iPod Touch the layout will be altered as a webapplication for the iPhone. The main feature of the iphone labs is the sliding effect inbetween windows. When a new link is loaded a loading message is shown and then the page slides in. Changin between properties on a page does not reload the page instead the sliding effect happens on the fly.
Clicking on the search button will also reveal the search bar hidden behind the menu. You can also click the arrow on the top right corner revealing the main menu options in iphone format on the top. It is also possible to comment on blog posts.
If you do not have an iphone or ipod touch you can use the iphone sdk iphone similator but this requires Mac OS X.
The special rendering uses Allan's post on multirendering and it does not redirect you to another site. A new masterpage and most pages were remade specific for the iphone.
In order to create all the special sliding effects webkits were used with some javascript assistance. For example
<div id="test" class="hide">
<p>this is at first hidden but later appears</p>
</div>
<a href=#" onclick="slide()">click this to make it slide</a>
the css:
.hide{
-webkit-transform: translateX(150px);
-webkit-duration: 1s;
-webkit-property: -webkit-transform;
}
.hide.show{
-webkit-transform: translateX(0px);
-webkit-duration: 1s;
-webkit-property: -webkit-transform;
}
the script:
function slide(){
document.getElementByID('test').className = 'hide show';
}
This will make the div slide on once the link is clicked. besides translateX there is translateY, Skew, Scale and Rotate.
20 August 2008