How do I get window height on mobile? $(window).height() works fine on desktop, but as soon as I emulate a mobile device from Chrome dev tools, it reports back that the window height is 1739px. Why is this?
http://jsfiddle.net/frank_o/ebkeq/3/embedded/result/
$(document).on("pagecontainershow", function() {
// https://github.com/jquery/jquery-mobile/issues/6306
alert($(window).height());
});
See documentation on the window object here: http://www.w3schools.com/jsref/obj_window.asp
Try
window.innerHeight
or
window.outerHeight
And for jQuery:
$(window).innerHeight()
http://api.jquery.com/innerHeight/
Related
I'm trying to get my Three.js app to work with JQuery Mobile and have run into a little issue. I'm new to JQuery mobile, but everything I have read says that I should use:
$(document).on('pageinit', function(){
});
instead of
$(document).ready() {
});
my problem is that if I move my initialization code from document ready to to pageinit, then nothing is being displayed even though the rendering loop is running.
I have looked at the html and discovered that the canvas element that Three.js/WebGL reders to has a width of 0 when using pageinit, and a width matching the display with when using document ready.
Everything I have read about JQuery Mobile warns against using document ready, so I'd really like to get this to work with page init. Can anybody help me figure out why the canvas element has a zero width when using pageinit?
I'm using jQuery BlockUI Plugin, and it pops up an image over the homepage. I want to be able to click outside of the image anywhere and be able to close it on smart phones.
I set this code, and it only works on Desktop, but NOT on Mobile:
$(document).ready(function() {
$('#demo9').click(function() {
$.blockUI();
$('.blockOverlay').attr('title','Click to unblock').click($.unblockUI);
});
});
Try binding the event with .on() in case there is a timing issue where the overlay does not exist yet:
$(".blockOverlay").on("click", function(){ $.unblockUI });
or
$(document).on("click", ".blockOverlay", function(){ $.unblockUI });
Also, does it make any difference if you use vclick instead of click?
Using touchstart with click works on Iphone, Kindle, Ipad
$('.blockOverlay').attr('title','Click to unblock').on('click touchstart',$.unblockUI);
I am using the splitview plugin of jQuery.mobile jQuery Mobile - Splitview . I am using jQuery.mobile popups as context menus which are fired on taphold event. Right now I am opening popus by
$("#myPopup").click();
where myPopup is popup defined in HTML.
In this way I can open popup, but I can not position the popup to the position of tap. Does anyone have an idea?
Something like
$( ".selector" ).popup( "open", {x:event.pageX, y: event.pageY} );
does not work because of splitview plugin. Without this plugin it works perfectly.
(and of coarse, I know, that taphold event does not contain information about position, that was just an example. I tried it also with pure numbers and it does not work either)
Well, my solution is not beautiful, but it works. In HTML file I defined new DIV and before opening context menu I position it.
$("#contextDiv").css({
position: "absolute",
top: contextMenuTapY,
left: contextMenuTapX
});
Then I open the context menu relatively to this DIV
HTML:
JS:
$("#aPopupElement").click();
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'm using the jquery ui dialog for a modal popup dialog. It's working great in Firefox/Chrome but terrible in ie6.
Problem:
When I show the dialog in ie6, the browser window grows and automatically scrolls down to the bottom. The height increase and automatic scroll-down is equal to the height of the jquery dialog.
I can scroll up and then use the dialog as normal, but the behavior where it grows the window and drops is maddeningly unacceptable.
Here is how I'm launching the window:
<div id="dialogWindow"></div>
...
$(document).ready(function() {
var $dialog = $("#dialogWindow").dialog({
autoOpen: false,
modal: true,
minWidth: 560,
width: 560,
resizable: "true",
position: "top"
});
$('.addButton').click(function(e) {
e.preventDefault();
$('#dialogWindow').load('http://myurl');
$dialog.dialog('open');
});
});
I am already using the bgiframe plugin for jquery which is key for ie6 overlay issues. But this seems unrelated to that. Has anyone seen this before and found a work around?
I've seen this behavior before and it is usually caused by the overlay. When you use the {modal: true} option an overlay is created and rendered with bgiframe support if the plug-in is loaded.
First off, try turning {modal: false} and see if you aren't getting page blow-out then we know it's the overlay.
there are a few things to check if that is the culprit;
check that the styles for the overlay are loading correctly, you'll need to include the jquery-ui dialog.css
try experimenting with position: and float: styles
try moving your dialog markup just above the < / body> tag, allowing the modal overlay to escape correctly.
I had a similar problem at one point.
$('.addButton').click(function(e) {
e.preventDefault();
$('#dialogWindow').load('http://myurl');
var y = window.pageYOffset;
var x = window.pageXOffset
$dialog.dialog('open');
window.scrollTo(x, y); // horizontal and vertical scroll targets
});
What the above should do is grab your current scroll coordinates and saves them. Once the dialog opens you then scroll back to the prior position in memory. Should be near instant and unseen by the user.