I have a jQuery Mobile (1.0.1) page with a fixed footer:
<footer data-role="footer" data-position="fixed">
Click Me!
</footer>
When I add elements to the DOM, the footer bar (which obviously shouldn't move) scrolls off the bottom of the screen - in accordance with the height of the elements added to the DOM. There's also white background between the previous end of the (grey) page and the new position of the footer bar.
If I scroll down and back up, the formatting is corrected.
I'm using Chrome, but it also occurs in Mobile Safari and IE.
The code that adds elements to the DOM is:
$("footer a").click(function () {
$("div[data-role='content']").append($("<button>Button A</button>"), $("<button>Button B</button>"), $("<button>Button C</button>"), $("<button>Button D</button>"));
$("div[data-role='content']").trigger("create");
});
What am I missing?
Have you tried calling the JQM updatelayout event?
See this page for some more info.
Try something like this:
$("div[data-role='content']").trigger("create").trigger( 'updatelayout' );
Related
I'm trying to dynamically add an external popup with a title and a footer, with jquery mobile, but the footer moves to the page instead of staying in the popup div ...
Is it a bug from a jquery mobile? How can I solve it?
var p=$("<div />").appendTo(document.body);
$("<div />").attr("data-role", "header").appendTo(p).html("<h1>title</h1>");
$("<div />").addClass("ui-content").text("content").appendTo(p);
$("<div />").attr("data-role", "footer").appendTo(p).html("<h1>footer</h1>");
p.enhanceWithin().popup({"positionTo":"window", "theme":"a"});
p.popup("open");
here is the fiddle http://jsfiddle.net/stax/y9Lsqmax/2/
By design, the footer is parented with the page, I strongly believe because it can accommodate a navbar or a similar navigation system, or may be eyternal, and moreover it can be positioned at the very bottom of the screen, by using position: fixed. So, IMHO, it is simply not meant to be placed inside a popup.
BUT: You can style a div inside the popup as it looks as footer. Of course, it won't support all the options documented here: jQuery Mobile Toolbar .
$(document).on("pagecreate", "#page1", function () {
var p = $('<div id="popup"/>').appendTo(document.body);
$('<div class="ui-header ui-bar-inherit"/>').html('<h4 class="ui-title">Title</h4>').appendTo(p);
$('<div class="ui-content"/>').text("content").appendTo(p);
$('<div class="ui-footer ui-bar-inherit"/>').html('<h4 class="ui-title">Popup footer</h4>').appendTo(p);
p.popup({"positionTo":"window", "theme":"a", "overlayTheme":"a"});
$("#popup").popup("open");
});
When using swipe to slide pages, e.g.
// swipe right event (currentpage is pseudo code)
$("body").pagecontainer("change", "#page" + currentpage - 1, { transition: "slide", reverse: true });
// swipe left event
$("body").pagecontainer("change", "#page" + currentpage + 1, { transition: "slide" });
I get this effect: on swipe right, the current page disappears immediately and the previous page slides in from the left. On swipe left, the current page slides out to the left and then the next page appears immediately.
What I want is that the old page slides out and the new page slides in simultaneously, like in Omar's example: http://jsfiddle.net/Palestinian/L297j/
I tried $.mobile.changePage instead of the newer $("body").pagecontainer("change") but that makes no difference. I made sure that the slide target pages do exist ahead of the slide (the pages are created dynamically) and I also added another call to the page constructor before setting up the swipe.
"flip" transition looks perfectly fine in the same place, probably because there are never two pages visible at the same time? I have no clue and I am hoping that someone knows more "slide" pitfalls.
Sorry it took a while to recreate the problem and the fiddle became rather lengthy:
http://jsfiddle.net/timvdh/eFDLr/7/
I am using a static panel in this example:
<div data-role="panel" id="select-panel" data-position="left" data-display="overlay" data-theme="a" data-bind="jQM: true">
<div data-role="header" class="ui-header ui-bar-inherit">
<h1 class="ui-title" role="heading" aria-level="1">Optionen</h1>
</div>
</div>
The
data-bind="jQM: true"
binding essentially executes
$("#select-panel").trigger("create");
This has to be done since the static panels (panels outside of pages available for every page) do not get enhanced by jQM otherwise.
However, in this special case everything seems to work fine, but the slide becomes ugly as described in the question.
The simple workaround is the remove
data-role="header"
from the header. You can try it in the fiddle and the slide will work fine.
I am building a responsive design and would like to use jquery mobile to provide just a menu. I was looking towards nested listviews (I know they are deprecated in 1.3.0). What I am after is a nested set of links in the footer. When an item with children is clicked, the sub menu will slide in, otherwise just navigate to the link that was clicked if it has no children.
This fiddle shows what I am after http://jsfiddle.net/QfyZd/6/
I thought that I would get the desired effect by marking up the footer with:
data-role="footer" data-position="fixed"
My question is though, how do I ensure the listview only affects the footer rather than the entire page? Or am using the wrong components to achieve what i'm after?
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 am using jQuery Mobile with jQuery Mobile Router, to dynamically change content of listviews.
In the change handler I'm dynamically adding content to an inset listview, then calling listview('refresh') to re-apply all the styling to the new elements. It mostly works, however whilst it applies the ui-corner-all to the UL the ui-corner-top and ui-corner-bottom classes are not applied to the correct LIs so they don't get rounded corners applied.
I have prepared a live example that demonstrates the issue.
The first page is static, the second page is generated in the rounter handler which is trigger by the jqm beforepageshow event
Thanks for your help.
You just needed to force the refresh:
http://jsfiddle.net/j5q75/4/
JS
listview.listview('refresh',true);