Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

jQuery Mobile

Posted on 2013-01-16
7
Medium Priority
?
783 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
5 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

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article discusses how to create an extensible mechanism for linked drop downs.
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…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses

578 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