• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 401
  • Last Modified:

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
0
rgarimella
Asked:
rgarimella
  • 5
  • 4
1 Solution
 
Michel PlungjanIT ExpertCommented:
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
0
 
rgarimellaAuthor Commented:
Can you post a sample. I am unclear on how to load jquery comtent.
0
 
Michel PlungjanIT ExpertCommented:
$(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
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
rgarimellaAuthor 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

0
 
Michel PlungjanIT ExpertCommented:
I'll have a look
0
 
Michel PlungjanIT ExpertCommented:
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%">
0
 
rgarimellaAuthor 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>
0
 
Michel PlungjanIT ExpertCommented:
I tested mine here:

jQuery Mobile Test

and it worked on my iPhone
0
 
rgarimellaAuthor Commented:
Thanks, worked for me too
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now