I am attempting to create an iPad app using jQuery and jQTouch for the second time. I want to split the existing jQTouch theme designed for iPhone, which uses one window, into two separate windows optimized for the iPad.
My goal is to have navigation on the left side of the page with a main window on the right. When a user clicks on a navigation link, the information corresponding to that link should appear in the main window with a smooth transition animation.
Currently, all menu links are displayed on the page, and when a link is clicked, the menu slides to reveal the selected option. However, my vision is to have the menu links permanently positioned on the left and only display the selected content with a sleek transition effect on the right window.
I would greatly appreciate any assistance or guidance in achieving this design. Feel free to take a look at the example URL for reference:
This is the current layout of the website:
<script type="text/javascript" charset="utf-8">
var jQT = new $.jQTouch({
icon: 'jqtouch.png',
addGlossToIcon: false,
startupScreen: 'jqt_startup.png',
statusBar: 'black'
});
</script>
</head>
<body>
<div id="page1">
<div class="toolbar">
<h1>CISM Diary App</h1>
</div>
<ul class="edgetoedge">
<li><a class="pop" href="#page2">Latest News</a></li>
<li><a href="#page3">Important Uploads</a></li>
<li><a href="#page4">Personal Details</a></li>
<li><a href="#page5">Timetable</a></li>
<li><a href="#page6">Tasks</a></li>
<li><a href="#page7">Staff Lookup</a></li>
<li><a href="#page8">University Information</a></li>
</ul>
</div>
<div id="page2">
<div class="toolbar">
<a href="#" class="back">back</a>
<h1>Latest News</h1>
</div>
<div class="info">
Hello this is page one huiphguipghuipbuytbouybtouokhjpoinugbougnouygnou
</div>
</div>
... (more content omitted for brevity)
</body>