Jquery mobile Page

Question

I am using jquery mobile for my mobile app. I want to make a page where data-role=content should be scroll when it is overflow but it is scrolling whole page with header and footer. I want to scroll only content div and header and footer divs should be fixed. I have already seen iscrollview but its only working in iPhone or any other way.

Please suggest how can I make this design.

Gillian Lo Wong · Accepted Answer · 2012-10-29 12:55:46Z

1

Just add a data-position="fixed" to your header and footer. Check this example below:

<div data-role="page"> 
    <div data-role="header" data-position="fixed" data-tap-toggle="false">...</div> 
    <div data-role="content">...</div> 
    <div data-role="footer" data-position="fixed" data-tap-toggle="false">...</div> 
</div>

edited Oct 29, 2012 at 12:55

answered Oct 29, 2012 at 7:51

Gillian Lo Wong

9,7125 gold badges36 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user1640480 Over a year ago

I have used this structure but content div is not scrolling

Gillian Lo Wong Over a year ago

Hi, Please look at my updated structure. Also do you have enough content for the page to scroll? Do you have a link ?

user1640480 Over a year ago

i dont have link but check this link cubiq.org/iscroll-4; the plugin is available on this link. I want to create the same wich is available in this plugin but i dont want to use this plugin becoz its not working in all plat forms.

Gillian Lo Wong Over a year ago

Check this page and scroll jquerymobile.com/demos/1.2.0/docs/toolbars/bars-fixed.html You'll notice that the header and footer will not scroll. That's what you want right?

user1640480 Over a year ago

yes, but can we change the style of scroll bar so that it seems to apper in content div and make header and footer so that they are not hide after clicking on the page

|

Orville Patterson · Accepted Answer · 2012-10-29 06:17:22Z

0

Take a look at http://cubiq.org/iscroll-4; it may not be jQuery, but it is a great JavaScript plugin for Mobile Scrolling.

You would add an ID to each UL and attach a scroll to each one separately.

answered Oct 29, 2012 at 6:17

Orville Patterson

5244 silver badges20 bronze badges

Collectives™ on Stack Overflow

Jquery mobile Page

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related