asked on
2 Scrollable divs
Hi Folks,
I was trying to create an app similar to USA Today app on honeycomb or CNBC App for the Ipad (just the news section) http://www.cnbc.com/id/35332013
Basically there will be 2 scrollable divs or something similar .
One Div on the left will be a scrollable menu with some header,content,graphic. This mimics the page layout on the right where the content is in a HTML5 page.
So you would touch on the left and the related content loads on the right side of the tablet.
I am trying to find out what Framework to use. I am little bit familiar with jquery mobile and HTML5/CSS3
Thanks
RG
I was trying to create an app similar to USA Today app on honeycomb or CNBC App for the Ipad (just the news section) http://www.cnbc.com/id/35332013
Basically there will be 2 scrollable divs or something similar .
One Div on the left will be a scrollable menu with some header,content,graphic. This mimics the page layout on the right where the content is in a HTML5 page.
So you would touch on the left and the related content loads on the right side of the tablet.
I am trying to find out what Framework to use. I am little bit familiar with jquery mobile and HTML5/CSS3
Thanks
RG
HTMLiPadAJAX
Last Comment
rgarimella
ASKER
Can you post a sample. I am unclear on how to load jquery comtent.
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
Sorry mplungjan
How do i update this HTML page, so that the Jquery function gets called. Right now the HTML page slides from the right and overwrites the 2 links
How do i update this HTML page, so that the Jquery function gets called. Right now the HTML page slides from the right and overwrites the 2 links
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>
<link rel="stylesheet" href="jquery.mobile-1.0.1.min.css" />
<script src="jquery.js"></script>
<script src="jquery.mobile-1.0.1.min.js"></script>
<script>
$(document).ready(function() {
alert("function called");
$("#leftdiv a").on("click",function(e) {
$("#rightDiv").load(this.href);
e.preventDefault();
});
});
</script>
</head>
<body>
<div id="leftdiv" style="position:absolute;padding-right:5%; overflow:scroll;">
<a href="te_01_01_0005.htm">Launch Index</a><BR />
<a href="te_01_01_0006.htm">Launch Page 1</a>
</div>
<div id="rightdiv" style="padding-left:30%">
</div>
</body>
</html>
I'll have a look
1)
2) spelling:
<div id="rightDiv" style="padding-left:30%">
$(document).ready(function() {
$("#leftdiv a").on("click",function(e) {
$("#rightDiv").load(this.href);
return false; // I was sure preventDefault would work
});
});
2) spelling:
<div id="rightDiv" style="padding-left:30%">
ASKER
Here is the updated code, still does not show up in the right DIV, it just loads the page without calling the function
<code>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-widt
<title>jQuery Mobile: Demos and Documentation</title>
<link rel="stylesheet" href="jquery.mobile-1.0.1.
<script src="jquery.js"></script>
<script>
$(document).ready(function
alert("function called");
$("#leftdiv a").on("click",function(e)
$("#rightDiv").load(this.h
//e.preventDefault();
return false;
});
});
</script>
</head>
<body>
<div id="leftdiv" style="position:absolute;p
<a href="te_01_01_0005.htm">L
<a href="te_01_01_0006.htm">L
</div>
<div id="rightDiv" style="padding-left:30%">
</div>
</body>
</html>
</code>
<code>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-widt
<title>jQuery Mobile: Demos and Documentation</title>
<link rel="stylesheet" href="jquery.mobile-1.0.1.
<script src="jquery.js"></script>
<script>
$(document).ready(function
alert("function called");
$("#leftdiv a").on("click",function(e)
$("#rightDiv").load(this.h
//e.preventDefault();
return false;
});
});
</script>
</head>
<body>
<div id="leftdiv" style="position:absolute;p
<a href="te_01_01_0005.htm">L
<a href="te_01_01_0006.htm">L
</div>
<div id="rightDiv" style="padding-left:30%">
</div>
</body>
</html>
</code>
ASKER
Thanks, worked for me too
Make the div position:absolute; overflow:scroll and ajax content into the other div onclick
and you are set