SlideShare ist ein Scribd-Unternehmen logo
1 von 5
Downloaden Sie, um offline zu lesen
Fluidic Sliding Panels – Auto adjust to any device screen without
browser refresh
Actual 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 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/
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,
The wire frame explains the secrets

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

Weitere ähnliche Inhalte

Kürzlich hochgeladen

Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXTarek Kalaji
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfDianaGray10
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-pyJamie (Taka) Wang
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024SkyPlanner
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UbiTrack UK
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 

Kürzlich hochgeladen (20)

Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
VoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBXVoIP Service and Marketing using Odoo and Asterisk PBX
VoIP Service and Marketing using Odoo and Asterisk PBX
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdfUiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
UiPath Solutions Management Preview - Northern CA Chapter - March 22.pdf
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 
20230202 - Introduction to tis-py
20230202 - Introduction to tis-py20230202 - Introduction to tis-py
20230202 - Introduction to tis-py
 
Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024Salesforce Miami User Group Event - 1st Quarter 2024
Salesforce Miami User Group Event - 1st Quarter 2024
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
UWB Technology for Enhanced Indoor and Outdoor Positioning in Physiological M...
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 

Empfohlen

PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Applitools
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at WorkGetSmarter
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...DevGAMM Conference
 

Empfohlen (20)

Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
 
More than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike RoutesMore than Just Lines on a Map: Best Practices for U.S Bike Routes
More than Just Lines on a Map: Best Practices for U.S Bike Routes
 
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...
 

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

  • 1. Fluidic Sliding Panels – Auto adjust to any device screen without browser refresh Actual 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 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/ 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,
  • 2. The wire frame explains the secrets 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 -->
  • 3. </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 {
  • 4. 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
  • 5. 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 Outbutton 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. 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.