Register FAQ / Rules Forum Spy Search Today's Posts Mark Forums Read
Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Jan 25, 2013, 10:40 AM   #1
CavemanUK
macrumors 6502
 
Join Date: Jun 2006
Location: Rhyl, North Wales
Splitview for iPad Safari?

Is there a way to create a splitview using html5 and css3? something similar to the settings menu on ipads. So you have a scrollable list down the left hand side and a static details page on the right. its specifically for an ipad webapp. im looking at jquery mobile currently but cant see a way to do that. a shame as everything else in jqm looks awesome and is easy to code.
__________________
MacBook Pro 2.33/250 Hybrid/3GB Lion
iPhone 4S 32GB | iPhone 4 16GB | New iPad 32GB | iPad 2 16GB
CavemanUK is offline   0 Reply With Quote
Old Jan 26, 2013, 06:55 AM   #2
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
see vendor information in user profile
Quote:
Originally Posted by CavemanUK View Post
Is there a way to create a splitview using html5 and css3? something similar to the settings menu on ipads. So you have a scrollable list down the left hand side and a static details page on the right. its specifically for an ipad webapp. im looking at jquery mobile currently but cant see a way to do that. a shame as everything else in jqm looks awesome and is easy to code.
The key is to create 2 div containers mimicking a frame set, and apply "position: absolute; overflow: scroll" (or auto) to the scrollable list and "position:fixed; overflow: auto" to the static details page. See the tested/working code below and of course up to you to play with the positioning and overflow and sizes to suit your needs. Tis is a demo of the concept, not a perfect iPad template, please be informed. But still cool!



Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My Fake iPad Settings Menu</title>
<style type="text/css">

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%; 
max-height: 100%; 
}

#framecontent{
position: absolute;
top: 0;
bottom: 0; 
left: 0;
width: 200px; /*Width of frame div*/
height: 100%;
overflow: scroll; /*Disable or enable scrollbars. Set to "scroll" to enable*/
background: navy;
color: white;
}

#maincontent{
position: fixed;
top: 0; 
left: 200px; /*Set left value to WidthOfFrameDiv*/
right: 0;
bottom: 0;
overflow: auto; 
background: #fff;
}

.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
padding: 0 0 0 200px; /*Set value to (0 0 0 WidthOfFrameDiv)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%; 
width: 100%; 
}

</style>


</head>

<body>

<div id="framecontent">
<div class="innertube">

<h1>CSS Left Frame Layout</h1>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>
<h3>Sample text here</h3>

</div>
</div>


<div id="maincontent">
<div class="innertube">

<h1>Setting for sample text (fake)</h1>

</div>
</div>


</body>
</html>
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT -5. The time now is 04:12 PM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC