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.
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>
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.
Related
The documentation says
The footer bar has the same basic structure as the header except it uses the data-role attribute value of footer.
But this fiddle shows that I can't put controls in the footer the same way as I can the header.
Q: How can I write a footer such that there is text followed by an h1 tag followed by text, and they are all on the same line?
You can use the same classes jQM applies to the header elements (ui-btn-left, ui-title, ui-btn-right):
<div data-role="footer">
<a href="JavaScript:;" class="ui-btn-left" >c</a>
<h3 class="ui-title">Footer</h3>
<a href="JavaScript:;" class="ui-btn-right" >d</a>
</div>
Here is your updated fiddle: http://jsfiddle.net/ezanker/mXjHJ/86/
I have a normal jquery page with header, content and a panel
<div id="myPage" data-role="page">
<nav id="myPanel" data-role="panel">...menu...</nav>
<div id="myHeader" data-role="header">...button...text...</div>
<div id="myContent" data-role="content">...welcome text...</div>
</div>
The page is initially loaded with a menu in the panel (with a custom ajax call) and a welcome text as content. Besides text, the header also contains a button to open the menu panel.
When a user taps on a menu item I only want to replace the content, not the entire page.
I've been trying with
$.mobile.changePage('my/valid/url', {
pageContainer : $('#myPage')
});
I can see in my network log that I get the correct content from the JQM ajax call. But when I look at the DOM, the only thing that happened is that an empty div is appended to #myPage, i.e. the content from ajax is not inserted. And the old content is still there. See below:
<div id="myPage" data-role="page">
<nav id="myPanel" data-role="panel">...menu...</nav>
<div id="myHeader" data-role="header">...button...text...</div>
<div id="myContent" data-role="content">...welcome text...</div>
<div data-role="content" data-url="my/valid/url">EMPTY</div>
</div>
One other thing is that the whole page, #myPage, is hidden (display="none"). It seems that JQM wants to show an entire new page instead of just allowing me to change the content of one div inside #myPage.
Is it possible to change just a part of a JQM-page using JQM?
I've done it with a custom ajax call and then appended the markup to the DOM myself. But then I need to do a lot of other stuff manually, like enhancing , showing/hiding the load indicator etc.
I want to have 2 buttons in the footer, one on the left side and the other on the right side.
With dataposition fixed, however right side button going little outside the page view.
Here is the code.
<div data-role="footer" data-theme="d" class="ui-bar" style="height:30px" data-position="fixed">
<a class="ui-btn-left" data-role="button" data-theme="a" id="approvetm">
Approve
</a>
<a id="sendback" data-rel="popup" data-theme="a" class="ui-btn-right" data-role="button" data-inline="true">Send Back</a>
</div>
Can you please tell me what is wrong in above code.....?
As per jQuery Mobile documentation footer is different than header in terms of buttons accommodation.
The page footer is very similar to the header in terms of options and configuration. The primary difference is that the footer is designed to be less structured than the header to allow more flexibility, so the framework doesn't automatically reserve slots for buttons to the left or right as it does in headers
However, this can be fixed by overriding ui-btn-right style (right position).
.ui-footer .ui-btn-right { right: 35px !important }
Demo
I'm trying to learn jquery mobile and have been playing around with it for the past few days and things are going alright, but I'm not so sure if I'm taking the proper approach.
I tried making a site with a similar UI as the facebook app. On the top right and left corners of the page's header are buttons that causes the page to slide out like a drawer.
The top left button will slide the page out to the right to reveal a menu, while the top right button will slide out to the left to reveal a form to fill out.
What I did was create divs outside the page and used javascript to slide out the active page, to reveal the menu or form depending on which button is pressed:
<body>
<div id="my-menu">
<ul>
<li>Menu Item 1</li>
</ul>
</div> <!-- end of my-menu -->
<div id="my-form">
<form method="post" action="form-action.php">
<!-- form elements -->
</form>
</div> <!-- end of my-form -->
<div data-role="page" id="home">
<div data-role="header">
</div>
<div data-role="content">
</div>
</div> <!-- end of home -->
</body>
I used my own CSS to style the menu, but I also noticed my theme wasn't applied to "my-form", but everything in the page "home" had all elements properly styled.
I can't put the form inside the page "home" because I will not be able to do sliding drawer effect that I've done with the menu.
Am I suppose to have my own styling applied to the form outside the page or is there a way to apply the jquery mobile theme to elements outside the page?
Would this be the best approach to implement this kind of user interface or is there a better way using what's available in jquery mobile?
Since this will be my UI for the application does that mean I will just copy the same code to all the pages? Or is there a better way to do this?
I'd like to use the best practice for this use case so please offer any advice!
Thanks in advance for the help!
BTW I did the slide menu based on this blog post:
http://blog.aldomatic.com/facebook-style-slide-out-menu-in-jquery-mobile/
Solution 1:
As I told you in comments, jQM style can not be applied outside of page container but that should not prevent you from using its css.
If you are using firefox, use firebug plugin and take a look at every jQM page element, copy its structure and css. Use it to create styling outside page container.
One more thing, new elements are going to be styled but they will not have functionality, you will need to redo it by yourself.
Solution2:
Have your content inside a data-role="page" div at page-load, let jQuery Mobile style the page, and then move your content div out of the data-role="page" div to be a child of the body tag.
I want to have an image that stick to the bottom center of the screen. I know I can use <div data-role="footer"> to do it. However the footer has a visible horizontal line on top which I want to get rid off. Any idea how to do it?
The easiest way to do this is to use the built-in jQM footer, which has the data-position="fixed" attribute to make it stick to the bottom. I'm unfamiliar with this horizontal line you say the footer has, but it'll be easy to get rid of just by overriding the default jQM stylesheet. You can view/test-edit the CSS styles using Firebug in Firefox, or the built-in developer tools in any browser.
It should look something like this:
.ui-footer {
/* Use !important to ensure the target style will be overridden! */
border: none !important;
}
And the HTML:
... <!-- rest of page -->
<div data-role="footer" data-id="fixedFooter" data-position="fixed" data-tap-toggle="false">
<img src="path/to/image.png" />
</div>