Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

2 Scrollable divs

Posted on 2012-03-09
9
Medium Priority
?
369 Views
Last Modified: 2012-06-21
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
Comment
Question by:rgarimella
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 4
9 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37705191
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
 

Author Comment

by:rgarimella
ID: 37705336
Can you post a sample. I am unclear on how to load jquery comtent.
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 2000 total points
ID: 37705542
$(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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:rgarimella
ID: 37717021
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37718435
I'll have a look
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37718760
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
 

Author Comment

by:rgarimella
ID: 37720166
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37720290
I tested mine here:

jQuery Mobile Test

and it worked on my iPhone
0
 

Author Comment

by:rgarimella
ID: 37721364
Thanks, worked for me too
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

664 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question