My jQuery mobile popup header doesn't have the same size as the content.
jQuery 1.8.3 and jQuery mobile 1.2.0.
<div data-role="popup" id="commentPopup" style="width: 800px;" class="ui-corner-all">
<div data-role="header" data-theme="b" class="ui-corner-top">
<h1>Please enter your comment</h1>
</div>
<div data-role="content" data-theme="b" class="ui-corner-bottom ui-content">
<textarea></textarea>
OK
CANCEL
</div>
</div>
For info, I open it with $('#commentPopup').popup("open");.
Is it possible to disable the scroll while the popup is opened?
Is it possible to prevent the user from closing the popup when clicking in another place of the page?
Thanks
I was overriding a CSS .ui-content class as #Omar found it.
The problem is solved.
Concerning the dismissible, this is not possible with jQM version < 1.3.0.
Related
I'm developing a web app using jQuery Mobile.
I have a single html file that contains more jQM pages.
These jQM pages have fixed headers and content loaded dynamically via jQuery (in this case I'm using a Listview with filtering option).
This is the HTML structure of all jQM pages:
<div data-role="page" data-theme="a" id="pageTemplateList">
<div class="ui-header ui-bar-a" role="banner" data-role="header" data-theme="a" data-position="fixed" data-tap-toggle="false">
<a role="button" data-role="button" href="#" class="ui-btn-left ui-alt-icon ui-nodisc-icon ui-btn ui-icon-action ui-btn-icon-notext" data-theme="a">Pubblica</a>
<h1 aria-level="1" role="heading" class="ui-title">Videothron</h1>
<a role="button" data-role="button" href="#panelMenu" class="ui-btn-right ui-alt-icon ui-nodisc-icon ui-btn ui-icon-bars ui-btn-icon-notext" data-theme="a">Menù</a>
</div>
<div data-role="content" id="templateListViewContainer">
<ul id="templateListView" data-role="listview" data-inset="true" data-hide-dividers="false" data-filter="true" data-filter-placeholder="Cerca template...">
</ul>
</div>
</div>
The jQuery code that I call for moving between jQM pages is the following:
location.href = "#pageTemplateList";
When I move from the "first" page (in the image below is "BEFORE") to a "second" page and then come back to the "first" page (in the image below is "AFTER") the Listview content is positioned under the fixed toolbar and the filter input field is partially hidden.
What do you suggest to solve this issue? Do you need further information?
Thanks,
Alex.
I executed each single line of JS code until I found that this issue was caused calling this:
$('div[data-role="page"]').trigger("create");
Removing this line of code (that I was calling after adding input text fields via jQuery) solved the issue.
Instead of calling .trigger("create") on the page div, create a div inside of the page div (eg. <div id="insideThePageDiv">) and call .trigger("create") for the inside div (eg. $("#insideThePageDiv").trigger("create");).
I have a form in which on clicking submit button the form data is sent through ajax and the related message may it be error or confirmation details from the server script which has been written in php is displayed . For now every thing is working fine . But what I want to know is that the message whcih is being displayed with help of JS can I change it into JQM popup as I am using JQM 1.4.2 for my design .
Popup
<div data-role="popup" id="mDialog" data-overlay-theme="a" data-theme="c" style="max-width:400px;" class="ui-corner-all">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1>Attention!!</h1>
</div>
<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
<h3 class="ui-title">{Are you sure you want to delete this page?</h3>
<p>This action cannot be undone.} <?php if($this->error->description!='')echo trim($this->error->description)?> </p>
Cancel
Delete
</div>
</div>
Thanks in advance
Try this;
Put this in your HTML, above your <form>
<div id="formNotice"><img src="loading.gif" alt="Loading" /></div>
Now put this where you handle the AJAX response
$("#formNotice").html(AJAXResponse);
$("#formNotice").popup("open");
Here's the docs
Jsfiddle (Without JQM - but you get the idea)
I have a row of JQuery Mobile buttons created on a button click in my webapp. These buttons render fine in FF and Chrome, but in IE9, they only render as squares (instead of a full sized rectangle) and the text is mostly missing.
Here is the HTML:
<div id="themes" data-role="popup" data-position-to="#layersImg" data-corners="true" data-transition="none" data-theme="b" data-overlay-theme="a">
<div class="ui-grid-b">
<div class="ui-block-a">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="vertical">
<!--<legend><strong></strong></legend>-->
<div style="margin-left: 15px; margin-right: 15px"> <a id="firstBtn" data-role="button" data-rel="popup" href="#firstCategory">Title</a>
/// and so on ....
I am using JQuery 1.7 and JQuery Mobile 1.3.0
I only have this problem with IE (as well as some others, see my other posts!)
ANy ideas? Thanks, Jason
well, this seemed to do the trick: I just added a class to the fieldset tag:
<fieldset data-role="controlgroup" data-type="vertical" class="ui-btn-right">
..and now they render as expected..I am still stuck on the other IE9 issue I linked above!
I am new to jQueryMobile. I have one problem regarding fixed headers. I have this code in my header div:
<div data-role="header" hieght="100px" data-position="fixed" data-theme="a" style="min-height: 45px;">
<h1>Nieuwspoort</h1>
</div>
In this div I have put data-position="fixed". The header is fixed but after I scroll the page my header is hidden and after I am done scrolling my header becomes visible again.
Proper fixed header support has been introduced into jQueryMobile from version 1.1-rc1 onwards.
To fix your headers make sure to add the following attribute
data-position="fixed"
If you would like to disable tap-to-toggle then add the following
data-tap-toggle="false"
Your pastebin example modified to work:
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-theme="a" style="min-height: 45px;">
<h1>Nieuwspoort</h1>
</div>
You need to ensure you are using 1.1-rc1 with jQuery 1.7.1
I have a page with a fixed footer
<div data-role="page" id="next_collection" data-theme="d">
<div data-role="header" data-theme="elw">
Title
</div>
<div data-role="content" style="min-height: 246px;">
Some content
</div>
<div data-role="footer" data-id="footer_nav" data-position="fixed">
<img src="images/icon.png" />
</div>
</div>
This works on Android and iPod, but on iPhone 4s it toggles (hide/show) the footer if you touch the screen. I tried to fix it like in this old question but this does not work anymore. For $.mobile.fixedToolbars.setTouchToggleEnabled() i get:
$.mobile.fixedToolbars is undefined
How to stop the footer from toggle in the newer versions?
As #commadelimited says, the toggle has been a new feature not available in prior versions.
The meta data to add to your header or footer to remove that toggle feature is:
data-tap-toggle="false"
so, in your case, the footer should looks like:
<div data-role="footer" data-id="footer_nav" data-position="fixed" data-tap-toggle="false">
<img src="images/icon.png" />
</div>
And here should be some kind of reference from their site: link to google search