I'm building a pretty simple mobile web page with JQM that uses data-role="footer" to create a static footer.
It works well in portrait mode, but when in landscape the footer takes up such a large percentage of the available space that it really affects the user experience.
I tried this:
$(window).orientationchange(function(){
$("#foot").removeAttr("data-role");
});
and
$(window).orientationchange(function(){
$("#foot").attr("data-role","none");
});
but neither worked.
Does anyone know if there is a way to modify the data role successfully based on a JQM event?
Thanks.
Related
TLDR;
Everything works fine unless I try to scroll down the page with my touch start inside of a horizontally scrolling div, because page has the elastic scrolling effect while not at bottom or top. Removing jQuery Mobile fixes this problem. This is only happening in IOS, Android is fine. TLDR;
I'm having an issue with jQuery Mobile and scrolling.
I have a page that is greater than my screen (on iPhone 5s). This page has 2 horizontally scrolling divs on it with images.
The scrolling divs are as follows
HTML:
<div class="list">
<input type="radio" name="cover" value="26" id="Cover26" data-role="none" class="offScreen">
<label for="Cover26">
<span class="check"></span>
<img src="http://placehold.it/110x170" class="background">
</label>
</div>
CSS:
.list{width:auto;height:190px;overflow:hidden;overflow-x:auto;overflow-y:visible;white-space:nowrap;-webkit-overflow-scrolling:touch;}
.list label{width:110px;height:170px;margin:0 8px 5px;padding:0;position:relative;overflow:hidden;vertical-align:top;display:inline-block;}
.list input{position:absolute;top:-999px;left:-999px;}
This scrolling works fine horizontally, but when I touch inside one of these divs and pull up on the screen to scroll down the page, the page has the elastic scrolling effect(see images). Scrolling down the page works find if my touch starts outside the horizontal div.
First view of page
Elastic scrolling happening when page isn't at bottom
At actual bottom of page
Elastic scrolling happening when page isn't at the top
Scrolling up and down the page is only possible when the touch starts outside of the horizontally scrolling div. If I remove jQuery Mobile this issue no longer happens. I believe it has something to do with jQuery Mobile's vmouse events. But I haven't been able to tell for certain and I'm not sure if I can remove those event handlers and have the page still work with jQuery Mobile.
Form as far as I can tell this is only happening on IOS. I've tried and android phone and everything works as expected.
I've been stuck on this for a while and can't figure out what else I can do to fix it. Any ideas are helpful. Thanks for looking!
For anyone that would like a demo here are some I'm hosting. I would have put them on jsfiddle but jsfiddle doesn't support setting viewport for the mobile page to render properly.
Page with jQuery Mobile which doesn't work
Same page without jQuery Mobile which does work
The problem appears to be caused by the below CSS styles.
#cover-builder-page, #page-builder-page {
width:100%;
height:100%;
}
When you set page's height to 100%, it sets height according to available space in viewport. If you set min-height to 100% it will work, or just remove it all together.
Demo (1)
(1) Tested on iPhone 5 - Safari
I thought my external panels (jQM 1.4) were working great, until I added more content to them, and now, I can see the external panel underneath my app's home page.
If they are short, it's fine, but once they reach a certain height, you can scroll down on the home (first) page and see the panel's contents.
The new docs aren't much help :/
I've tried a lot of variations... but here's a basic example that will trigger it:
<div data-role="panel" id="imExternal" data-theme="a">
<div style="height: 1200px; background: #000;">
<p>this is the panel, code is tight and outside of any containing page divs.</p>
</div>
</div>
*update: I'm specifically seeing it in my app with a popup open, and then clicking on an input field to show the Android keyboard. It seems to resize the page, which shows content from another page (external panel) underneath it.
You should enhance External widgets manually, as they don't get enhanced when page is created.
$(function () {
$("[data-role=panel]").panel();
});
Also, elements / widgets inside External panel should be enhanced as well.
$(function () {
$("[data-role=panel]").panel().enhanceWithin();
});
Actually... DON'T use popups in external panels. Ultimately, that was the root cause of this.
I solved this by setting the css height of the page in question to the window height, which prevented the underlying panel from showing below it.
$('#page').css('height', $(window).height());
Are there any issues surrounding the use of contenteditable div elements in jQuery UI that lead to the caret not appearing. Here is a bit of code to show what I mean
<div id='diaHTMLEd' style='display:none'>
<div id='divRTE'></div>
<!--iframe src='xrte.html' height='300' width='500'></iframe-->
</div>
function openHTMLEditor( {
$('#diaHTMLEd').dialog({
height:200,
width:450,
modal:true,
open:addRTE
});
}
function addRTE() {
$('#divRTE').html("<div contenteditable='true'>Testing</div>");
return;
}
Explanation - I am opening up a modal jqUI dialog and in its :open event am adding a contenteditable div element to an inner div in the dialog. The text shows up but it does not become editable when clicked. If I replace that code and use the commented out iframe instead which contains an contenteditable drive everything works just fine.
It looks like there is something that stops content from becoming editable inside the dialog.
This question may be lacking in some detail but given the complexity of my application I am not really in a position to provide more representative code. Any help would be much appreciated.
A note for anyone running into this thread. After much work I eventually discovered the issue. Using contenteditable with jQuery UI dialogs is not by itself a problem. The problem in my case came down to some sort of conflict with the excellent jstree plugin which I am using.
As a general rule - in complex applications that use multiple plugins you are probably better off sandboxing contenteditable content inside an iframe
I have a web-application which was originally designed to be used from standard desktops and laptops, now I am trying to see if it can work "as is" also on tablets.
I tried it on an iPad 2, and I fould one major problem: the application makes heavy use of dialogs, created using jQuery UI 1.8.22, which are used as "popup", that is, each dialog contains an iframe, and when the content overflows the dialog size the vertical scrollbar appears, but I'm unable to scroll the iframe content 'cause it will always scroll the main page content.
How could this problem be solved? Do you think it is an issue with my application or with the iPad browser itself?
If it can be of any use, I'll post the code which creates the dialogs themselves, for now just let me say that, when navigated using a standard computer, there are absolutely no scrolling problems.
EDIT:
I just created this fiddle http://jsfiddle.net/MLGku/1/ which shows how we create such popups, I tried the fiddle with the iPad and in fact I cannot scroll the iframe content, I'd be very grateful for any help you'd be able to give me.
In the end I've been able to solve the problem by using this snipped of code:
if (/iPhone|iPod|iPad/.test(navigator.userAgent)) {
$('iframe').wrap(function() {
var $this = $(this);
return $('<div />').css({
width: $this.attr('width'),
height: $this.attr('height'),
overflow: 'auto',
'-webkit-overflow-scrolling': 'touch'
});
});
}
The code above was found here: http://home.jejaju.com/play/iframe-scroll.html
I have a mobile application running Backbone.js and jQuery mobile. Because I have Backbone.js and for performance reasons I have disabled all the JQM routing and transitions. I understand that storing scroll location is a feature available in JQM, but I am unable to utilize that (as far as I know).
I have a list view with a potentially long list of items. When the user taps one on the mobile device, it stores the current scroll position and renders a new view. When the user taps the "back" button, it goes back one in the history.
clickLink: ->
window.lastScroll = $(window).scrollTop()
render: ->
...
if window.lastScroll
$.mobile.silentScroll window.lastScroll
window.lastScroll = undefined
This works as desired on desktop Safari, but when I try it using it on iOS Safari (both simulator and the real thing), there is an issue with the fixed footer navbar.
If the user taps back, the listview is scrolled down as intended, but then if they tap the footer navbar, it is as if they tapped under it, whatever list item is under it will be activated instead. If the user scrolls a little bit before tapping the navbar, everything works fine.
Does anyone have any ideas? Perhaps there is a better approach that would avoid this issue all together.
Thanks in advance for the help.
Could it be related to this bug?
Form elements can lose click hit area in position: fixed containers
(linked from here JQuery Mobile 1.1.0 docs )
I see there is a workaround in the first link - worth a try?
Chad Smith Answered this Mobile Safari bug on fixed positioned button after scrollTop programmatically changed...?
His method worked best for me. Here is his response:
I got around it by adding a 101% high div then (almost) immediately removing it.
Try:
<style>
.iosfix {
height: 101%;
overflow: hidden;
}
</style>
and when you scroll:
window.scrollTo(0, _NEW_SCROLLTOP_);
$('body').append($('<div></div>').addClass('iosfix'));
setTimeout(function() {
$('.iosfix').remove();
}, 500);
It also works with jQuery.scrollTo.
See an example here.