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
Related
I'm currently using Locomotive Scroll with NextJS to implement smooth scrolling. The web app that I'm currently developing with NextJS requires a fixed scrolling section, but unfortunately, I can't find any documentation on implementing fixed scrolling.
When I try to use the code snippet from the locomotive scroll website, the scrolling itself is being disabled. Here's the code snippet:
<section class="c-section -fixed" data-scroll-section data-persistent>
<div class="o-container" id="fixed-elements">
<div class="o-layout">
<div class="o-layout_item u-2/5#from-medium">
<div class="c-section_infos -padding" data-scroll data-scroll-sticky data-scroll-target="#fixed-elements">
<div class="c-section_infos_inner" data-scroll data-scroll-offset="200">
<h3>
04. <br />
Fixed elements
</h3>
<div class="c-sections_infos_text u-text">
<p>
Create slides that stick and untick to the viewport while scrolling through.
</p>
</div>
</div>
</div>
</div>
<div class="o-layout_item u-3/5#from-medium">
<div class="c-fixed_wrapper" data-scroll data-scroll-call="dynamicBackground" data-scroll-repeat>
<div class="c-fixed_target" id="fixed-target"></div>
<div class="c-fixed" data-scroll data-scroll-sticky data-scroll-target="#fixed-target" style="background-image:url('dist/images/locomotive04.jpg')"></div>
</div>
</div>
</div>
</div>
</section>
I really appreciate any help you can provide.
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 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