• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Fluidic Sliding Panels – Auto adjust to any device screen without browser refresh
 

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

on

  • 879 views

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

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.
For the full post download this file or visit the actual blog post link: http://jbkflex.wordpress.com/2012/08/18/fluidic-sliding-panels-auto-adjust-to-any-device-screen-without-browser-refresh/

Statistics

Views

Total Views
879
Views on SlideShare
879
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft Word

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • Fluidic Sliding Panels – Auto adjust to any device screen withoutbrowser refreshActual Blog post link: http://jbkflex.wordpress.com/2012/08/18/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 deviceresolution. The sliding is implemented using CSS3 Transitions and I have targeted only webkit based browsers. Sothe 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 havenoticed that the same app adjusts itself to any screen size as well as the portrait and landscape mode. So our demowill 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 autoadjust. If you check the demo on Google Chrome you will notice that only first time the app adjusts itself to thewindow width and height. Now resize Chrome on your computer and check– the app goes haywire isn’t it. Same thingwill 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 newdemo below,New Demo link – http://rialab.jbk404.site50.net/fluidicslidingpanels/Open it in the same Google Chrome browser and resize it. You will notice all the contents auto adjusts and even thesliding is now bounded to the new window size. So, by now you must have got an idea of what I am trying tocommunicate.The basic ideaLook at the image below,
    • The wire frame explains the secretsFirst of all I have used 100% width and height, so this makes it auto adjust to any screen size. Next the two panelsare placed at absolute positions – panel1 at left 0px and panel2 at left:100%. This ensures that whatever be thewindow width the second panel Panel2 is always at the extreme right (i.e window width) of Panel1. Both panels areinside a wrapper element which has overflow:hidden and occupies the size of the window. So at a time only onepanel is displayed. The panels are then moved in and out of the wrapper and it looks like panels are sliding in andsliding out. I have used CSS3 transition to move them. Let’s look at the code now.HTMLThe 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 contentinside them. So check them out by viewing the source code of the demo app. This markup is complemented by theCSS. Let’s check that out.CSShtml,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 theoutermost container occupies the window size. Next up I have the wrapper and innerWrapper, for which the stylerules are self explanatory. Thereafter I have set the style rules for the panels. You can see that panels have beenpositioned absolute. Both panels have also been set the CSS3 transition rule, for which I have assigned the leftproperty. 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 setup our markup. There are other style rules basically for the dummy contents inside the panels, you can check that outin the source code. Now, lets move onto our javascript which will actually move the panels.JavaScriptThe 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 SlideOutbutton in panel2 is clicked. Assigning a value of 100% to the left style property moves it by the width of thewindow towards left side. Hence even if you resize the browser window in your computer or change the orientation ofthe 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. Also right click to view the source.http://rialab.jbk404.site50.net/fluidicslidingpanels/You can utilize the same method to create a lot of other important functionalities for mobile web apps.