We help IT Professionals succeed at work.

2 Scrollable divs

rgarimella
rgarimella asked
on
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
Comment
Watch Question

Michel PlungjanIT Expert
SILVER EXPERT
Top Expert 2009

Commented:
jQuery mobile should work just fine.

Make the div position:absolute; overflow:scroll and ajax content into the other div onclick
and you are set

Author

Commented:
Can you post a sample. I am unclear on how to load jquery comtent.
IT Expert
SILVER EXPERT
Top Expert 2009
Commented:
$(document).ready(function() {
  $("#leftdiv a").on("click",function(e) {
    $("#rightDiv").load(this.href);
    return false;
  });
});

this will make all links in left div use ajax to load their hrefs into the right div and stop the links themselves from being followed

Note:  e.preventDefault(); is not supported

Author

Commented:
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

<!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>

Open in new window

Michel PlungjanIT Expert
SILVER EXPERT
Top Expert 2009

Commented:
I'll have a look
Michel PlungjanIT Expert
SILVER EXPERT
Top Expert 2009

Commented:
1)

$(document).ready(function() {
  $("#leftdiv a").on("click",function(e) {
    $("#rightDiv").load(this.href);
    return false; // I was sure preventDefault would work
  });
});

Open in new window


2) spelling:

<div id="rightDiv" style="padding-left:30%">

Author

Commented:
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-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>
$(document).ready(function() {
      alert("function called");
  $("#leftdiv a").on("click",function(e) {
    $("#rightDiv").load(this.href);
    //e.preventDefault();
      return false;
  });
});

</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>
                                           
</code>
Michel PlungjanIT Expert
SILVER EXPERT
Top Expert 2009

Commented:
I tested mine here:

jQuery Mobile Test

and it worked on my iPhone

Author

Commented:
Thanks, worked for me too

Explore More ContentExplore courses, solutions, and other research materials related to this topic.