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://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.