jquery mobile static footer without toggle - javascript

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

How to create fixed scrolling in Locomotive Scroll in Next.js

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.

JQuery Mobile Showing Blank

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.

jQuery mobile popup dimension

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.

iOS jquery scrollview plugin does not scroll y on an iframe

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.

How to fix a header with jQueryMobile

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

Categories