In my phonegap application for android(4.2.2) using jquery mobile(v 1.3.2) when the text box is focused (keyboard is open/show) at the time the jquery mobile FIXED header hide never visible again.Here is the sample code.
<!-- header start -->
<div data-role="header" id="header" data-position="fixed" data-tap-toggle="false">
<h4>Stop Card</h4>
<div class="ui-btn-left">
<a data-role="button" data-icon="check" id="save" >Lagre</a>
</div>
<div class="ui-btn-right">
<a data-role="button" data-icon="delete" id="stopCardcancel" >Avbryt</a>
</div>
</div>
<!-- header end -->
Using this you can fix the header issue data-hide-during-focus="false". This will fix the header.
Try like this
<!-- header start -->
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-hide-during-focus="false" data-transition="none">
<h4>Stop Card</h4>
<div class="ui-btn-left">
<a data-role="button" data-icon="check" id="save" >Lagre</a>
</div>
<div class="ui-btn-right">
<a data-role="button" data-icon="delete" id="stopCardcancel" >Avbryt</a>
</div>
</div>
<!-- header end -->
Note: Only in JQM 1.3.2
Looks the repository, is an open issue 'fixed toolbars unfix after softkeyboard #5556'
Perhaps this answer for another stackoverflow question can help you.
Some times data-position="fixed" will not work properly, so give position:fixed for ui-header class.
.ui-header
{position:fixed;}
Related
I am building a hybrid app on jquery mobile and i wanna use back buttons to navigate between different pages.
I have created the back button and it DOES load the url of the last page, but it doesn't refresh the page content (it keeps showing the same page ie: the button doesn't realize the function)
Looking through the questions previously asked about back button - jquery mobile I can't find one exposing a problem of page loading (cause as I said the button gets the right url but doesn't load the page content)
NOTE: i am using IBM Mobile First
<a href="#loginPage" data-direction="reverse" data-role="button"
id="mainPageBackBtn" data-icon="back" data-iconpos="notext"
data-corners="false">Button</a>
(I wanna move from main page --> login page)
Your HTML button tag is working fine in JSfiddle:
https://jsfiddle.net/pengyanb/a8pzr7gt/6/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css" rel="stylesheet"/>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
<div data-role="page" id="mainPage" data-theme="a">
<div data-role="header" data-position="fixed">
<a href="#loginPage" data-direction="reverse" data-role="button"
id="mainPageBackBtn" data-icon="back" data-iconpos="notext"
data-corners="false">Button</a>
<h5>Main Page</h5>
</div>
<div data-role="main" class="ui-content">
<h2>This is Main Page</h2>
</div>
</div>
<div data-role="page" id="loginPage" data-theme="a">
<div data-role="header" data-position="fixed">
<a href="#mainPage" data-direction="reverse" data-role="button"
id="mainPageBackBtn" data-icon="back" data-iconpos="notext"
data-corners="false">Button</a>
<h5>Login Page</h5>
</div>
<div data-role="main" class="ui-content">
<h2>This is Login Page</h2>
</div>
</div>
Maybe try check you tag Id is correctly assigned?
You can try using data-ajax="false" here:
<a href="#loginPage" data-ajax="false" data-direction="reverse" data-role="button"
id="mainPageBackBtn" data-icon="back" data-iconpos="notext"
data-corners="false">Button</a>
I have a jQuery mobile site with 2 pages loaded into one html file that use the same panel, which is also in the file, just outside of all the data-rol="page" divs. The problem is when you reload the second page, as in visit before using the first page, the jQuery mobile styling on the ul in the panel is gone.
I've tried adding enhanceWithin() to the code after creating the panel but I must be missing something, it's loading the same panel, how is the style lost if reloaded from another page?
Source
<div data-role="page" class="ui-responsive-panel" data-theme="b" id="page">
<div data-role="header" data-position="fixed">
<h1>Alpha</h1>
Menu
</div><!-- /header -->
<div data-role="content">
<h1>News and Features</h1>
<a href="#page2"><p>Lorem ipsum</p>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<p>Content TBD</p>
</div>
</div>
<div data-role="page" class="ui-responsive-panel" data-theme="b" id="page2">
<div data-role="header" data-position="fixed">
<h1>Alpha</h1>
Menu
</div><!-- /header -->
<div data-role="content">
<h1>News and Features</h1>
<a href="#page"><p>Lorem ipsum</p>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<p>Content TBD</p>
</div>
</div>
and script:
<script type="text/javascript">
var panel = '<div data-role="panel" id="left-panel" data-position="right" data-display="push"><h1>Panel</h1><ul data-role="listview" data-theme="b"><li>test</li><li>test2</li></ul></div>';
$(document).one('pagebeforecreate', function () {
$.mobile.pageContainer.prepend(panel);
$("#left-panel").panel();
});
</script>
Edit: This is weird to explain, so if you visit the first page, id=page the menu loads up with the traditional jQuery mobile styling. If you navigate to the second page(id=page") after starting on that first page, the styling is fine. IF you, now on id="page2" hit the 'reload' button on your browser the style for the panel is gone, and it remains gone if you navigate back to id="page". So unless the first page is the starting point, the style is never applied, does that make sense?
On load of the second page use:
.trigger('create');
Use this to recreate panel on page 2.
More Here:
Reference
i have a problem, you can see that here (with firefox) : http://fiddle.jshell.net/ckuskun/qrcdS/show/light/
when click to "open" link, a dialog is opening. after closing this dialog, fixed header is jumping to the top.
how can i fix this problem
i'm having this problem mac firefox and windows firefox, no problem with other browsers. I have tried both as local and hosting.
http://www.screenr.com/BVhH
This is a jQuery Mobile bug and it is related to dialog's and how framework is handling page back action.
For now it can be fixed if you remove data-position="fixed" from a first page header.
Working example: http://jsfiddle.net/A5Tp8/5/embedded/result/
HTML :
<div data-role="page" id="yonetim">
<div data-role="header" id="fheader">
<h1>lorem</h1>
</div><!--header-End-->
<div data-role="content">
<a href="#yeni-kullanici-ekle" data-prefetch="true" data-theme="a" data-icon="plus" data-iconpos="right" data-rel="dialog" data-transition="pop" >open</a>
</div><!--content-End-->
<div data-role="footer" data-position="fixed" style="border-top:1px solid #aaa;">
<h6 id="footer-text"><a href="<?=BASE_URL; ?>/Anasayfa/CikisYap/" data-ajax="false" >log-out</a> - </h6>
</div><!--footer-End-->
</div><!--page-End-->
<div data-role="dialog" id="yeni-kullanici-ekle" data-theme="a">
<div data-role="header" data-theme="a">
<h1>Yeni Kullanıcı</h1>
</div>
<div data-role="content" data-theme="a">
deneme
</div>
<div data-role="footer" data-theme="a">
deneme
</div>
</div>
I'm trying to pop up a very simple "are you sure?" popup in jQuery Mobile. But if I use the data-rel="popup" on the button, nothing happens. If I remove the data-rel it opens - but as a full window. The logic works well, but still, I'd like to see a popup.
Here's the code (simplified - I removed the other pages, the header, html etc. - the app works well other than this issue, so no need to debug those). The 2 elements to look at are the button "clearHistory" and the popup itself "history":
<!-- history page -->
<div data-role="page" id="history">
<div data-role="header" data-position="fixed">
Back
<h1>History</h1>
Delete
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" id="historyList" data-inset="true" data-theme="f"></ul>
<h4 id="historyEmpty">History is empty</h4>
</div><!-- /content -->
<div data-role="footer" data-position="fixed">
<h4><a class="ttg" href="http://www.TravelingTechGuy.com" rel="external" target="_blank">Traveling Tech Guy</a></h4>
</div><!-- /footer -->
</div>
<!-- end history page -->
<!-- delete history popup -->
<div data-role="popup" id="deletePopup" data-overlay-theme="a" data-theme="c" data-dismissible="false">
<div data-role="header" data-theme="a">
<h1>Delete History?</h1>
</div>
<div data-role="content" data-theme="d">
<h3>Delete all items in history?</h3>
Cancel
Delete
</div>
</div>
<!-- delete history popup -->
Any idea what am I missing here?
Place popup inside <div data-role=page> and that div should be the direct parent of popup div. I placed before <div data-role=content> in the below demo.
Demo
Dialog should be placed outside <div data-role=page> because they are treated as a page.
I am developing an application using html and javascript. I have a ui-scrolllistview on one page and I have it populating ok. But if a word is too big for the listview it just extends the width of it so it goes out of the screen.
Is there a way to set the length of a word or word wrap words within the ui-scrolllistview so that it does not cut off the right border of the ui-scrolllistview?
Thanks
EDIT
here is my code that is creating the page with the ui-scrolllist
<div data-role="page" data-theme="f" id="choose-building">
<div data-role="header" data-theme="f" data-position="fixed" data-tap-toggle="false">
<h1><img src="images/building.png" height="80px"></h1>
<div data-role="controlgroup" class="ui-btn-right topzero">
Back
<a id="applyFilter" data-role="button" data-inline="true" onClick="pickedBuildings();">Chosen Buildings</a>
</div>
</div>
<div data-role="content" data-scroll="Y" class="ui-scrolllistview" >
<form>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" id="CatagoryChooseBuilding" >
</fieldset>
</div>
</form>
</div>
<div data-role="footer" data-theme="f" data-position="inline" data-id="main-footer" data-tap-toggle="false">
<div data-role="navbar" >
<ul>
<li><a href="#home" data-role="button" data-icon="myapp-home" >Home</a></li>
<li><a href="#page-map" data-role="button" data-icon="myapp-building-a" >Buildings</a></li>
<li><a href="#more" data-role="button" data-icon="myapp-more" >More</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div>
I believe it sounds like you're looking for text-overflow and white-space and possibly overflow.
You can use these different CSS properties to stop the text at whatever dimensions you would care to after setting up your margins and padding.
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
Edit: Example
You can adjust the margin properties until you have scooted your text as far away from the scrollbars as you would like.
Edit: If you want to allow word wrapping where the Framework (jQuery mobile according to your tags) truncates it for you, on the inner-most element that contains your text, specify overflow: visible; and white-space:normal;
If you are not seeing the behavior change as you are expecting and wanting it to, then view the page through a Developer Tools window. These are built into Chrome and IE and you can use Firebug for Firefox. These allow you to test stylesheet changes 'on the fly' which sounds like what you'll need to get the behavior you're expecting.