Fluidic Sliding Panels – Auto adjust to any device screen without browser refresh

Let’s talk about creating a sliding panel system that adjusts automatically to any screen size or rather any device resolution. The sliding is implemented using CSS3 Transitions and I have targeted only webkit based browsers. So the app will run on any iOS, Android devices including computer browsers such as Google Chrome and Apple Safari. If you have seen a Sencha Touch app which uses a nested list or the sliding animated panels then you must have noticed that the same app adjusts itself to any screen size as well as the portrait and landscape mode. So our demo will do the same. I have a very simple implementation of auto adjusting sliding panels.

In one of my previous tutorials I talked on the same Sliding Panel concept but the problem was that it did not auto adjust. If you check the demo on Google Chrome you will notice that only first time the app adjusts itself to the window width and height. Now resize Chrome on your computer and check– the app goes haywire isn’t it. Same thing will happen if you check the app in a mobile webkit browser and go from portrait to landscape mode or vice versa. The content you are looking is cut off. You have to refresh Chrome again to adjust the app. Now look at the new demo below,

New Demo link – http://rialab.jbk404.site50.net/fluidicslidingpanels/ (the demo is specifically meant for webkit based browsers)

Open it in the same Google Chrome browser and resize it. You will notice all the contents auto adjusts and even the sliding is now bounded to the new window size. So, by now you must have got an idea of what I am trying to communicate.

CSS3 Expandable-Collapsible Panel for iPhone

Many of you might have worked upon or have used a collapsible panel in one of your projects before reading this post. And the best chances were that the collapsible panel core logic was developed using traditional methods of animating HTML objects using the setTimeout() or the setInterval() methods. Here I have listed down a quick example of building a collapsible/expandable panel using the latest CSS3 technique of transitions. Of course, you have to use a little bit of java script for handling the style elements dynamically. This example is mainly focused on iPhone (iOS) and Android touch devices and targets the mobile web kit browsers. You can also use the same code for desktop web kit browsers such as Chrome and Safari, and a little generalization of the code would let you use the application for all the other browsers supporting the newer CSS3 style rules (e.g. latest version of Firefox). Check out the images below, of the application in portrait and landscape mode of my iPod. And here is the link to the demo app, check in Safari or Chrome.

http://jbk404.site50.net/html5/mobile/collapsiblepanel/

Expanded in portrait mode

Collapsed in portrait mode

Landscape mode

Fade-in/Fade-out animation using CSS3

Let us try a simple fade-in and fade-out animation in CSS3. Looks very simple, lets see how to achieve it. We will be using only CSS3 for the animations and only a little bit of java script for changing the CSS classes dynamically. First let’s check the demo,

Demo link: http://jbk404.site50.net/css3/fade/  (Check in Android/iOS mobile browser or Chrome/Safari/Firefox/Opera in your computer)

and this is is how the demo looks.

Fade in /Fade out animation