I have fixed headers and footers on my webapp. But I am always getting problems (as you can see in picture) then I am focusing on the input fields. Same problem with headers...This makes my web app look terrible.
I was looking around for some solution, but could not find anything working. Hopefully someone has solution which could help for others also.
Here id footer div attributes:
<div data-role="footer" data-position="fixed" data-id="footer" data-tap-toggle="false" data-position="fixed">
Thanks
You have data-position="fixed" duplicated. Check this page for more info http://jquerymobile.com/test/docs/toolbars/bars-fixed-options.html
Related
[Using jQuery Mobile version 1.3.2]
I'm working on a jQM project and am running into a bit of a dilemma here. For pages that don't have much content (such as a home page with only 3 buttons on it), and when the footer data-position is set to "inline", there is a big ugly gap below the footer...
Of course, if I set the footer's data-position to "fixed", then it looks good IF viewed in portrait mode...
BUT... when it's viewed in landscape mode, it looks bad, as there is barely any room for the content area, due to the header and footer taking up most of the visible area...
So, my question is... is there a good, working solution for getting the footer to be fixed to the bottom in situations where the content area does not fill up the entire screen, and then have the footer position automatically switch to "inline" for situations where the content area DOES fill up (at least) the entire screen?
OR... alternately... is it possible to have the footer position "fixed" when the device is in portrait mode, and then switch the footer position to "inline" when the device is in landscape mode?
I've spent a few hours researching this online today, but I haven't found any promising solutions to this problem so far (I found a handful of articles / forum posts that addressed the topic, but they were from 2-3 years ago, and the few proposed "solutions" looked like they might create more problems than they solve).
I'm not looking for a solution that is 100% cross-browser (because I know that doesn't exist), but as long as I can find a solution that works well on mobile iOS and mobile Android, I'd be happy.
I would imagine that this would be a fairly popular issue, so I'm a bit surprised that I haven't come across a good solution so far (maybe I just haven't looked in the right place yet).
So.... any ideas?
Thanks!
You can listen to the resize and orientationchange event and then fix/unfix the footer depending on available space.
Here is a DEMO
Using script, measure the header height + footer height + content height and compare it to the total window height (viewport). Then add or remove the ui-footer-fixed class on the footer div:
$(document).on("pagebeforeshow", "#page1", function(){
$(window).on("orientationchange resize", function(){
FooterPositionFixed()
});
setTimeout(FooterPositionFixed, 300);
});
function FooterPositionFixed(){
scroll(0, 0);
var totHeight = $(window).height();
var headerHeight = $("#jqmHeader:visible").outerHeight();
var footerHeight = $("#jqmFooter:visible").outerHeight();
var contentHeight = $("#jqmContent:visible").outerHeight();
if (totHeight > (headerHeight + footerHeight + contentHeight)){
if (!$("#jqmFooter").hasClass("ui-footer-fixed")){
$("#jqmFooter").addClass("ui-footer-fixed");
}
} else {
if ($("#jqmFooter").hasClass("ui-footer-fixed")){
$("#jqmFooter").removeClass("ui-footer-fixed");
}
}
}
Here is the HTML for this script:
<div data-role="page" id="page1">
<div data-role="header" id="jqmHeader">
<h1>My page</h1>
</div>
<div data-role="content" id="jqmContent">
<ul data-role="listview">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</div>
<div data-role="footer" data-position="fixed" id="jqmFooter">
<h2><a>Go to website</a><br />Copyright<br /> business name</h2>
</div>
</div>
I would like to have a back button on the page, using data-add-back-btn="true". However I also want a popup on the same page, with a header, that doesn't have a back button on it. It seems that the data-add-back-btn="true" attribute applies to everything on the page.
I've played around with different settings here: http://jsfiddle.net/n9trV/4/ but have had no luck. Can anyone get this working?
Is there any neat way of doing this using the JQM attributes? Otherwise I will probably just delete the button manually after the page has initialised.
I think you should report this as a bug (I feel it is so). However, to solve your problem just using markup, you can delete the
data-add-back-btn="true"
and place inside of your page header, whether it's a <div> or a <header> (better), a link like the following:
Back
If you want to use your previous icon, in the link use this attribute instead:
data-icon="arrow-l"
So you should have something like this:
<div data-role="page" id="page2">
<header data-role="header">
Back
<h1>Page 2</h1>
</header>
<!-- other code goes here -->
</div>
I have an issue with Jquery mobile persistent navbar. I am developing a mobile app using phonegap to deploy on iOS and Android. I have a navbar to navigate from one page to another. (footer/navbar fixed).
Example on: http://jquerymobile.com/demos/1.2.0/docs/toolbars/footer-persist-a.html
The navigation works, the bar persists when rendered in a browser such as chrome or safari. But when I upload the app to the Android emulator or iOS emulator, clicking a link from the navbar makes the whole screen go white for a sec and then re-appears. (Kind of a flicker)
Can someone help with this?
Here's my code for the footer: (a.html,b.html... are the name of my pages)
<div data-role="footer" data-id="foo1" data-position="fixed" data-tap-toggle="false">
<div data-role="navbar">
<ul>
<li>Info</li>
<li><a href="b.html" data-prefetch rel="external" >Friends</a></li>
<li>Albums</li>
<li>Emails</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
Thank you !
I figured it out. It's a combination of what you said and what I had.
So to stop the Jquery mobile footer from flickering when you upload to Android or iOS, you need to set the following properties in your div:
page1.html:
<div data-position="fixed" data-tap-toggle="false" data-role="footer" data-id="f1">
Page 1 NAV
Page 2 NAV
</div>
page2.html
<div data-position="fixed" data-tap-toggle="false" data-role="footer" data-id="f1">
Page 1 NAV
Page 2 NAV
</div>
The data-id="f1" has to match in both pages so that jquery mobile knows that this is the same footer that was on the previous page therefore it won't render it again.
Let me know if you need help with this.
Regards,
Tony
Same problem here (I was trying to fix it for over 3 hours with no luck trying lots of stuff I found on the web but no luck).
If you remove the entire footer and add a button in the content area the transition works like a charm all of a sudden. So one workaround would be to fake the navbar via buttons from the content area you place at the bottom of the page... Not very pretty though.
<div data-role="content">
<h1>
Page Nav and Dialog Example
</h1>
<a data-role="button" href="index2.html">Page Navigation</a></div>
I'm using this with a custom-scripting.js:
$(document).bind("mobileinit", function(){
$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none';
$.mobile.useFastClick = true;});
Referencing it via:
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script src="custom-scripting.js"></script>
<script type="text/javascript" src="jquery.mobile-1.2.0.js"></script>
Maybe anyone else found a solution for using navbar without flickering?
Without using the navbar in the footer it stops flickering (tested on iPhone4 iOS5). So you can use the footer but don't use navbar inside it :-)
But attention: If you use data-position="fixed" it will start to flicker again...
<div data-role="footer">
<a data-role="button" href="#">Main</a>
<a data-role="button" href="favorites.html">Favorites</a>
<a data-role="button" href="more.html">More</a>
</div>
Hope it helps :-)
I am trying to use iScroll for my webpage and it is behaving weird.
My markup looks something like this.
<div id="content">
<div id="some-header">
</div>
<div id="wrapper">
<ul>
<li></li>
</ul>
</div>
</div>
Now both header and wrapper have heights and they both are positioned absolute.
when I try to scroll, it does scroll but its kind of stuck, when I stop scrolling it returns back to the starting point. Weird :(
Any Sugestions.
btw this is on ipad safari.
Thanks
Dhaval
I met the same problem with you.Did you use ajax the render in the scroller element.
Finally I use iscroll pull to refresh to solve this problem.
This is the question I asked : When I am using ajax to render the Scroller part iScroll doesn't work
Has anyone actually succeeded in doing this it seems like there are so many attempts on line but no one has a definite solution. I've tried plugins that a lot of people suggested but nothing is working.
I just want to have a Google Map go full dimensions (apart from header and footer) and then on another page I want a div to do the same
JQuery-Mobile content area 100% height between head and foot
In the meantime I would recommend to use iScroll [with CSS position:fixed; for header&footer in iOS5 only]
In iScroll you just wrap the content into a wrapper & scroller class, the rest is done by the script. Here's the homepage http://cubiq.org/iscroll-4 and here's some code:
<div id="content" data-role="content">
<div id="wrapper">
<div id="scroller">
your content here.
</div>
</div>
</div>
For iScroll initialization use the documentation provided on cubiq's site.
zY