jQuery Mobile

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
yevheniycAsked:
Who is Participating?
 
dj_alikCommented:
0
 
SirLagzCommented:
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
 
LZ1Commented:
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
 
yevheniycAuthor Commented:
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
 
yevheniycAuthor Commented:
Thank you everyone for the input.

@dj_alik, awesome!!
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.

All Courses

From novice to tech pro — start learning today.