Use different CSS Resources based on Orientation

Language

XML

Tags

Author

Simon McLoughlin

Submitted on

February 14, 2012 at 2:00 AM

Rating

Downloads

Notes

The following was used in the Teamroom Lotus Sphere 2012 demo on the ipad. There was 2 panels "leftPanel" and "rightPanel" with the below styleclasses, when in landscape mode the mobile_landscape.css isused and floated the left panel so that both would be on the same line as the screen is wider. Then in portrait mode the mobile_portrait.css is used and the left panel is set to 100% so the right panel is forced underneath it as there is more screen to use length ways than sideways.

mobile_landscape.css :

.mblLeftPanel
{
width:45%;
float:left;
margin:5px 0px 5px 5px;
}

.mblRightPanel
{
width:45%;
float:right;
margin-right:-5px;
background-color:#E9E9E9;
margin:5px 0px 5px 0px;
}

mobile_portrait.css :

.mblLeftPanel
{
width:100%;
background-color:white;
}

.mblRightPanel
{
width:100%;
margin-top:5px;
background-color:#E9E9E9;
}

<link rel="stylesheet" media="all and (orientation:portrait)" href="mobile_portrait.css"></link>
<link rel="stylesheet" media="all and (orientation:landscape)" href="mobile_landscape.css"></link>

All code submitted to OpenNTF XSnippets, whether submitted as a "Snippet" or in the body of a Comment, is provided under the Apache License Version 2.0. See Terms of Use for full details.

No comments yetLogin first to comment...