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
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 am building a JQuery Mobile web-app, and am running into an interesting problem. I have a listview, and when I click on one of the menu rows, page 2 loads as expected. However, when I click the back button, the page 1 page loads for a half a second, then page 2 comes back (without a transition).
Here is the code for the 2 pages:
<section id="more" data-role="page">
<header data-role="header" data-position="fixed" class="AppHeader">
<h1>More</h1>
</header>
<div data-role="content">
<ul data-role="listview" data-filter="false" id="moreList">
<li><h1>History of Boston Landmarks</h1></li>
</ul>
</div>
</section>
<section id="historyOfLandmarks" data-role="page">
<header data-role="header" data-position="fixed" class="AppHeader">
Back
<h1>History of Boston Landmarks</h1>
</header>
<div data-role="content">
<p>This is a list of National Historic Landmarks in Boston, Massachusetts.</p>
</div>
</section>
JS Fiddle Does Not Illustrate the Problem: http://jsfiddle.net/jakechasan/66vbS/
Everywhere else, the problem appears: http://jakeserver.com/Apps/BostonLandmarks/B5/landmarks.html
I don't understand why JSFiddle does not illustrate the problem, however, the same file on my computer/server has this problem?
Any ideas?
Thanks.
Your own CSS is responsible for this problem.
Edit this file: http://jakeserver.com/Apps/BostonLandmarks/B5/css/styles.css
And remove from the bottom:
.ui-page{
display: block !important;
}
I have tested it successfully.
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.
I am using scrollview plugin on a jquery mobile file and works great on iOS. However when I use an iframe, scroll y is not applied and its content remains fixed. How to apply scroll y on an iframe? Thank you
<div data-role="page" id="init" data-theme="a">
<div data-role="header" id="head" data-position="fixed" data-tap-toggle="false">
</div>
<div data-role="content" data-scroll="y" id="cont" data-theme="a" style="border:none;">
<iframe data-scroll="y" src="http://www.abcd.com" style="border: 0px none;" height="100%" width="100%">
</iframe>
</div>
<div id="id3">
</div>
</div>
all necessary jquery mobile and scrollview plugins are attached.
Please #Jaume try this,
$(function() {
$('#cont').scrollview({
direction:'y'
})
})
Else, you need to include the jquery.mobile.scrollview.js file.
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