Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

jQuery Mobile

Posted on 2013-01-16
7
Medium Priority
?
776 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 2000 total points
ID: 38887732
0
 

Author Closing Comment

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

@dj_alik, awesome!!
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

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

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

604 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