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,
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.
This tutorial speaks about a simple sliding touch photo gallery for iPhone. The app is meant to run on the mobile safari web browser. We start off by looking at a demo first and then talk about the code in details. Note that the same logic and implementation will work even on Android devices, you just need to correct the dimensions/positions and place the elements according to screen resolution.
The images used in the demo are not of great quality or appeal as I am not a Photoshop expert. Once you have cool assets you are good to go.
The demo is all about having two panels, one with the thumbnail images and the other panel with the corresponding bigger image of the thumbnail selected in the first panel. The two panels have been placed side by side – horizontally and they slide in and out of the viewport to give a sliding effect. The sliding of panels uses the same concept (using CSS3 transitions and transformations) that I discussed in one of my earlier post. Here in this tutorial I will not go into the details of how to create sliding touch panels. You can refer my previous post.Read More »
Update: Before you move further, if you are looking for a more responsive sliding panel, so when changing to landscape or re-sizing the browser window, the panels automatically respond without a browser refresh then you might want to look at it here(I have a separate post regarding this)
In this tutorial I will discuss about creating a sliding touch panel meant for mobile web apps. You must have seen, that in iPhone or iPod settings when you tap on a menu item the whole panel slides out and a detailed panel slides in. I am going to talk exactly on how to create something similar for iPhones and Android devices using CSS3 transitions and a little bit of java script. Even those who have worked with mobile web apps using Sencha Touch must be aware of sliding touch panels. Before moving on check out the demo on an iPhone or Android device,
You can check the demo in a desktop browser also – Google Chrome or Safari.
The concept is to have two equally sized panels horizontally laid out inside a wrapper container. The wrapper occupies the dimensions of the mobile device. The size of each panel is same as the wrapper. Now, the wrapper has overflow as hidden so you only see one panel at a time. Now that the basic set up is done, we just need to move the two panels left and right. The image below visualizes the things that I have spoken above.