i m creat a JQuery Mobile Page with a Tabbar.
If i click on the content the Footer/Header disapears, how can i disbale that?
At the moment both Bars are fixed.
A quick sample would be perfect.
There are a couple of ways to accomplish this with JQM 1.1.0
The first and easiest was is to set data-tap-toggle="false" in your fixed toolbar
<div data-role="header" data-position="fixed" data-tap-toggle="false">
The second way I like because it allows you to disable this in every page and every fixed toolbar. This way you won't drive yourself mad typing data-tap-toggle="false" over and over.
$(document).on('pageinit','[data-role=page]', function(){
$('[data-position=fixed]').fixedtoolbar({ tapToggle:false});
});
The following will disable the tap toggle in JQM 1.0.1
$(document).delegate('[data-role=page]','pageinit', function(){
$.mobile.fixedToolbars.setTouchToggleEnabled(false);
});
Related
I thought my external panels (jQM 1.4) were working great, until I added more content to them, and now, I can see the external panel underneath my app's home page.
If they are short, it's fine, but once they reach a certain height, you can scroll down on the home (first) page and see the panel's contents.
The new docs aren't much help :/
I've tried a lot of variations... but here's a basic example that will trigger it:
<div data-role="panel" id="imExternal" data-theme="a">
<div style="height: 1200px; background: #000;">
<p>this is the panel, code is tight and outside of any containing page divs.</p>
</div>
</div>
*update: I'm specifically seeing it in my app with a popup open, and then clicking on an input field to show the Android keyboard. It seems to resize the page, which shows content from another page (external panel) underneath it.
You should enhance External widgets manually, as they don't get enhanced when page is created.
$(function () {
$("[data-role=panel]").panel();
});
Also, elements / widgets inside External panel should be enhanced as well.
$(function () {
$("[data-role=panel]").panel().enhanceWithin();
});
Actually... DON'T use popups in external panels. Ultimately, that was the root cause of this.
I solved this by setting the css height of the page in question to the window height, which prevented the underlying panel from showing below it.
$('#page').css('height', $(window).height());
I have implemented a fixed header in jQuery Mobile, and it's working great for the most part. When I scroll, the toolbar remains visible. When I tap the screen, the header does not disappear. Great. The only annoyance I see is that when you tap into an input field that's towards the bottom of the page, the header then reverts to position:static so it disappears. You can see that by scrolling back up to the top. Once you unfocus the input box (hit done on the keyboard), then it goes back to position:fixed. I would like it to always be visible no matter what.
<div data-role="header" data-position="fixed">
I'm using jQM 1.4.0 RC1 and in the change log it states:
- Fixed Toolbars are now an extension on the toolbar widget
Sounds relevant, but I'm not sure what exactly that means.
Thanks. :)
This actually a fix for many issues raised on fixedtoolbar widget.
Issue #4410
Issue #4724
jQM hides fixed toolbars once focus is triggered on select, textarea and select; to give more working place when screen width less than 1025.
I have tried the below solution but the results were ugly.
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).on("mobileinit", function() {
$.mobile.toolbar.prototype.options.hideDuringFocus = "";
});
</script>
<script src="http://code.jquery.com/mobile/1.4.0-rc.1/jquery.mobile-1.4.0-rc.1.min.js"></script>
For more details, check fixedToolbar.js widget on GitHub, go to line 243.
Demo (1)
(1) To be tested on Mobile browsers, not desktop.
I am using the fastklick plugin for iOS what is very popular on the net for speeding the click event on jquery mobile apps with phonegap on iOS.
The buttons and links are working very well except the back button from jquery.
If I use this:
<div data-role="page" id="test" data-add-back-btn="true">
then if I want to click on the button, there is already the delay from iOS. The button is getting blue at first and after that the page is sliding. How can I prevent this so this button is working fast like the other buttons I am creating with
<button>...</button>?
Is it possible to create my own back button and apply an event to it?
First remove data-add-back-btn="true" then you can try this:
<a class="ui-btn-left" data-icon="arrow-l" href="javascript:history.back(1) " data-theme="a">Back</a>
or this:
<a class="ui-btn-left" data-icon="arrow-l" href="#" data-theme="a" id="back-btn">Back</a>
$('#back-btn').bind('touchstart', function(e) {
$.mobile.changePage("#pageID");
});
Just change #pageID to your real page ID. touchstart event is great for back button if you are just doing it and not a page scrolling.
Does anyone know how to stop a fixed navbar from fading in and out every time I scroll. I'm using jquerymobile 1.0.1 with the following code but I can't stand how the nav bar fades in and out:
<div data-role="footer" data-id="foo1" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Friends</li>
<li>Albums</li>
<li>Emails</li>
<li>Emails</li>
<li>Emails</li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
I don't just want the "toggle" fix. I would like it stay 100% visible 100% of the time. Thoughts?
Well for JQM 1.1 you actually set data-tap-toggle="false" on your footer.
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
...
</div>
I like to do this to disable tapToggle in every page and also every fixed toolbar, header or footer:
$(document).on('pageinit','[data-role=page]', function(){
$('[data-position=fixed]').fixedtoolbar({ tapToggle:false });
});
That way I don't have to keep typing data-tap-toggle="false" over and over.
Then if your using JQM 1.0.1 do:
$('[data-role=page]').live('pageinit', function(){
$.mobile.fixedToolbars.setTouchToggleEnabled(false);
});
This is a common grievance among JQM 1.0.x users. Their developers switched the dynamicly positioned behavior you are referencing in their latest release. As of JQM 1.1 they use true fixed tool bars that do not fade. A stable version of JQM should be out shortly. Until then you could use version 1.1-rc1
There is one solution in older versions of JQM but this only works in ios 5:
$(document).bind("mobileinit", function(){
$.mobile.touchOverflowEnabled = true ;
});
You can add the data-tap-toggle="true" attribute to the data-role="footer" element to disable the tap-to-fade functionality:
tapToggle boolean
default: true
Enable or disable the user's ability to toggle toolbar visibility with
a tap on the screen (or a click, for mouse users). This option is also
exposed as a data attribute: data-tap-toggle=""true""
$("[data-role=header]").fixedtoolbar({ tapToggle: true }); Note: This
behavior was formerly configurable as follows, but as of version 1.1
this syntax is no longer supported:
$.mobile.fixedToolbars .setTouchToggleEnabled(false);
Source: http://jquerymobile.com/demos/1.1.0-rc.1/docs/toolbars/bars-fixed-options.html
This should make your toolbar stay put all the time.
jQuery mobile button renders gibberish for filter button after clicking on pagination. Click event that shows map also stops working after changing the page.
Should I call refresh page?
Sandbox link
Markup is as following:
<div data-role="header" data-theme="b" id="rest-header">
<div class="ui-grid-b">
<div class="ui-block-a">Filter</div>
<div class="ui-block-b"><input type="search" name="search"value="" data-theme="d" /></div>
<div class="ui-block-c">Map</div>
</div>
</div><!-- /header -->
First I would suggest using jQuery 1.6.4 as jQM only supports this version for 1.0
Your problem is you're adding a back button when navigating to another page, this is causing an overlap of both the filter and back button.
Removing the data-add-back-btn="true" attribute should solve the issue
For map button you should use live event binding or delegation so that it works for dynamic content. Instead of
$( "#map-btn" ).bind( "click", function(event, ui) { ... });
try
$(document).on('click', '#map-btn', function() {
// ...
})
For filter button I can see the Back button under the Filter one, so you want to get rid of the Back button since you don't need it right there. You can remove data-add-back-btn="true" attribute.