Solved

jQuery Mobile

Posted on 2013-01-16
7
761 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
[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
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

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
JQuery DataTable Time Sort 14 44
How to size popup in jquery mobile 4 60
HTML CSS and  Table design 4 68
jQuery Tree with Draggable items 11 22
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

734 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