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://jsphkhan.github.io/fluidic_sliding_panel/ (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.
The basic idea
Look at the image below,

First of all I have used 100% width and height, so this makes it auto adjust to any screen size. Next the two panels are placed at absolute positions – panel1 at left 0px and panel2 at left:100%. This ensures that whatever be the window width the second panel Panel2 is always at the extreme right (i.e window width) of Panel1. Both panels are inside a wrapper element which has overflow:hidden and occupies the size of the window. So at a time only one panel is displayed. The panels are then moved in and out of the wrapper and it looks like panels are sliding in and sliding out. I have used CSS3 transition to move them. Let’s look at the code now.
HTML
The basic markup is laid down below,
<div id="wrapper"> <div id="innerWrapper"> <div class="panel" id="panel1"> <!-- Panel1 content goes inside here --> </div> <div class="panel" id="panel2"> <!-- Panel2 content goes inside here --> </div> </div> </div>
You can see the two panels – panel1 and panel2 inside the wrapper. Both panel1 and panel2 has dummy content inside them. So check them out by viewing the source code of the demo app. This markup is complemented by the CSS. Let’s check that out.
CSS
html,body { margin:0; padding:0; font-family:Helvetica; font-size:14px; background-color:#ccc; color:#222; width:100%; height:100%; } #wrapper { width:100%; height:100%; overflow:hidden; } #innerWrapper { min-width:100%; min-height:100%; /*height:100%; width:100%;*/ position:relative; } #innerWrapper .panels { width:100%; height:100%; position:absolute; -webkit-transition:left 300ms; } #panel1 { left:0; } #panel2 { left:100%; }
You can see that I have given both html and body a width/height of 100%. This is important. This ensures that the outermost container occupies the window size. Next up I have the wrapper and innerWrapper, for which the style rules are self explanatory. Thereafter I have set the style rules for the panels. You can see that panels have been positioned absolute. Both panels have also been set the CSS3 transition rule, for which I have assigned the left property. So, any changes in the left property for the panels, they will be moved smoothly over time. Also panel2 is positioned at left:100%, I have talked about this in the basic idea section already. This is the basic style that will set up our markup. There are other style rules basically for the dummy contents inside the panels, you can check that out in the source code. Now, lets move onto our javascript which will actually move the panels.
JavaScript
The script is pretty simple. I have only two event listener functions for the buttons in the markup.
function slideIn() { document.getElementById("panel1").style.left = "-100%"; document.getElementById("panel2").style.left = "0"; } function slideOut() { document.getElementById("panel2").style.left = "100%"; document.getElementById("panel1").style.left = "0"; }
The slideIn() function is called when the Slide In button in panel1 is clicked. This sets the panel1’s left position to -100% and panel2’s to 0 (zero). And since we have set CSS3 transition movement to listen to the left style property, so the movement of both the panels is smooth over time. Similarly, the slideOut() function is called when Slide Out button in panel2 is clicked. Assigning a value of 100% to the left style property moves it by the width of the window towards left side. Hence even if you resize the browser window in your computer or change the orientation of the mobile device the sliding distance is always the width of the window.
So, overall a very simple technique to create sliding panels that automatically adjust without any browser refresh. Here is the link to the demo once again : http://jsphkhan.github.io/fluidic_sliding_panel/. For the source visit the Github repo: https://github.com/jsphkhan/jsphkhan.github.io/tree/master/fluidic_sliding_panel
You can utilize the same method to create a lot of other important functionalities for mobile web apps.
[…] I have an updated post regarding this. Please have a look at it here. 26.135685 91.791780 Rate this:Share this:PrintEmailFacebookTwitterLinkedInLike this:LikeOne […]
[…] I have an updated post regarding this. Please have a look at it here. 26.135685 91.791780 Rate this:Share this:PrintEmailFacebookTwitterLinkedInLike this:LikeBe the […]
Really clean and fluid 🙂 Nice work on this.
Thanks James…
How do i delay the slide?
You can increase the duration value in CSS. Look at the .css file and change the value in the line below,
-webkit-transition:left 300ms;
I’m not sure why but this website is loading extremely slow for me. Is anyone else having this issue or is it a problem on my end? I’ll check back later on and see if
the problem still exists.
Links to example aren’t working for me. u_u
Its working for me. Check in Chrome or Safari. Its meant to be for webkit browsers. Anyways, I will share the code with you.
Thanks Joseph, that’d be great. I checked it out, and I can hit it by a proxy, by not directly (and the proxy’s code obscures the target code.)
Joshua,
I have shared the code. Check your email.
Thanks.
Please also add transition and not only webkit-transition. The latter is actually being phased out and transition is supported by all new browsers now.
Thanks for that info…Chris. I will update it
Reblogged this on Descascando Pepino na Web.
how can you make it actually slide/swipe when using touch?
I would actually recommend you to start from here: http://jbkflex.wordpress.com/2012/01/09/replicating-the-swipe-gesture-iphone-gallery-for-mobile-web-html5-part-1/
Here I am using touch events to swipe or slide. It has demo links as well..