Solved

jQuery Mobile

Posted on 2013-01-16
7
755 Views
Last Modified: 2013-02-14
This questions is regarding jQuery Mobile:

How can I make the side panel content scrollable in case there are many items, without scrolling the content on the main page (in JQM 1.3 Beta)? I am trying to implement this for an application running on both Desktop and Mobile browsers. Have looked everywhere, but cannot find the answer.

Thank you
0
Comment
Question by:yevheniyc
7 Comments
 
LVL 1

Expert Comment

by:SirLagz
ID: 38785658
You can use a div with the overflow property set to eitiher auto or scroll.
I'm assuming the sidepanel is already a div ? if that has lots of content, then using overflow on that div should do it. You may need to set a specific size for the div though.
0
 
LVL 30

Expert Comment

by:LZ1
ID: 38787463
Just give it a fixed position, put it where you want and then as SirLagz said set the overflow property to scroll.

I'm not sure jQuery mobile has something exactly what your looking for. You may just have to do it manually.

CSS: 
.sidebar{position:fixed;left:0;top:0;overflow:scroll;}

HTML:
<div class="sidebar">
content content content content content content content 
content content content content content content content 
content content content content content content content 
content content content content content content content 
</div>

Open in new window

0
 

Author Comment

by:yevheniyc
ID: 38788585
I embedded a snippet of my code (hopefully it will be visible to you) and an image after I implemented your advice.  

1. jQuery Mobile has a data-role="panel" class that makes the content appear as a sliding panel (from the left or right)
2. I tried to do what you have told me and the panel becomes fixed, however, I still cannot scroll through the content (even though a scroll panel appears) - please, refer to the image.
3. This is a tricky question, at least to me, as I've tried to find the answer for a while.
4. One thing to mention, jQuery Mobile 1.3 Beta just came out (on the 15th), and the sliding panel has just been implemented.

Example
<head>
	<meta charset="utf-8">
	<!--<meta name="viewport" content="width=device-widt<wbr ></wbr>h, initial-scale=1">-->
	<title>Patient View</title> 
	
	<meta id="extViewportMeta" name="viewport" content="width=device-widt<wbr ></wbr>h, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
	

	<link rel="stylesheet" href="http://code.jquery.c<wbr ></wbr>om/mobile/<wbr ></wbr>1.3.0-beta<wbr ></wbr>.1/jquery.<wbr ></wbr>mobile-1.3<wbr ></wbr>.0-beta.1.<wbr ></wbr>min.css" />
	
	<style type="text/css">
.sidebar {
			position: fixed;
			left:0;
			top:0;
			overflow:scroll;
		}
</style>

<!--jQuery Mobile page syntax-->
<div data-role="page" class="pages" id="home">
        
        <div data-role="header" data-position="fixed" data-theme="b">
        	
        	<div data-role="navbar" >
        		
        			<ul>
				       	<li><a href="#">Home</a></li>
				        <li><a href="#">Other</a></li>
				  
			        </ul>
	        	
	       </div> <!--navbar div-->

        </div><!--header div-->
        
        	
<!--jQuery Mobile syntax for the panel. Later I will reference a button to the id-->

<div data-role="panel" id="myPanel" data-theme="a" class="ui-response sidebar" data-position="left">
                        <!-- puts content in a nice list view-->
        		<ul data-role="listview" data-inset="true" data-filter="true">
				<li data-role="divider">Monday<wbr ></wbr>, November 14</li>
				<li><a href="#"><p>content content content content</p></a></li>
		</div> <!--panel div-->
       	
        <!-- this will appear on the main page-->
            <div class="content" data-role="content">
        	
        		<a href="#myPanel" data-role="button" data-theme="e" data-display="reveal" data-position="left" data-dismissible="true" data-inline="true">Tasks</<wbr ></wbr>a>
            
             </div> <!--content div-->
        
	</div>     <!--page div -->

Open in new window


Thank you for your time and consideration.

Yev
0
 
LVL 18

Accepted Solution

by:
dj_alik earned 500 total points
ID: 38887732
0
 

Author Closing Comment

by:yevheniyc
ID: 38890855
Thank you everyone for the input.

@dj_alik, awesome!!
0

Featured Post

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

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

Suggested Solutions

This article discusses how to create an extensible mechanism for linked drop downs.
Owning a franchise can be the dream of a lifetime. It provides a chance for economic growth. You can be as successful as you want.  To make your franchise successful, you need to market it successfully. Here are six of the best marketing strategies …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

679 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