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?
Related
Im developing an HTML generator using jQuery through a drag & drop interface. Currently the user drags "block" elements onto an invisible div overlaying an iFrame (so that it appears to be dropping onto the iframe). When the element is dropped on this invisible div, the corresponding HTML is appended to the iFrame body.
Next, i want to give the user the ability to select an element in the iFrame, and change the properties of the selected element.
I have appended CSS imports and the jQuery/jQueryUI scripts into the iFrame head.
The issue I am facing is when the appended iFrame element is clicked, the jQuery select lasso only appears when the mouse leaves the iFrame, and on it appears outside of the iframe.
The reason I am using the iFrame is so when the code is "generated" for the user, i can just append the iFrame body content to a dialog box.
Has anyone faced issues with the iFrame and jQuery before? and is there any documentation/javaScript library that can assist me in this process?
Thanks!
Rory
The "fix" around this issue is convoluted, but works in my situation.
I created a click event on each added element in the iframe like so:
$('iframe').contents().find('.elem'+blockVal).on('click', function(){
$('iframe').contents().find('.selected').removeClass('selected');
$(this).addClass('selected');
//alert('you have selected the block with class element'+ blockVal);
});
blockVal is a variable passed in from the function that appends the html to the iframe. The above function just adds a click listener to each element appended to the iframe. When any of the elements are clicked, they are given a class of 'selected', and any other element that already has that class, loses it.
Im sorry if that doesn't make any sense.
My advice to anyone doing something similar: Don't use an iframe.
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.
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've tried adjusting my meta viewport tag on a jQM beforepageshow etc it simply doesn't work and I guess that's pretty obvious why. I have one page with a highcharts chart on it and I need to have nothing inside my viewport tag which normally has width=device-width, initial-scale=1,user-scalable=no, minimum-scale=1.0, maximum-scale=1.0
and that's because I want the app to zoom out when the chunky chart goes in, has anyone had any brilliant ideas on how to have one page with different viewport settings? I could link to it without AJAX and then output the right meta tag conditionally but I'd rather not do this.
I dynamically changed the meta viewport tag on a couple of my mobile websites when I want to enable zooming for an image or something else that requires the user looking at small text:
var $viewport = $('meta[name="viewport"]'),
default_viewport = $viewport.attr('content');
$(document).delegate('#page-id-one, #page-id-two', 'pageshow', function () {
//these are the pages that you want to enable zooming
$viewport.attr('content', 'width=device-width,initial-scale=1.0,maximum-scale=5.0');
}).delegate('#page-id-one, #page-id-two', 'pagehide', function () {
$viewport.attr('content', default_viewport);
});
This code expects to be included after jQuery and the meta viewport tag. You can obviously change the contents of the viewport element as you see fit (I believe that Safari will allow a maximum-scale of 10).
I'm using using jQuery mobile. Testing my web page on iPhone.
Here is the issue:
I am on http://www.mywebsite.com/here.html and I have an anchor on that page that points to
href="http://www.mywebsite.com/some/folder/there.html", I'm navigated to
http://www.mywebsite.com/here.html#/some/folder/there.html
If I remove jQuery mobile js file, everything works as expected. So it looks like jQuery mobile is intercepting my 'tap' event and modifies url to the link. Weird. Why is it doing that?
Looks like this is done on purpose to help you with animated page transitions and such.
I can turn it off by adding this attribute to the anchor data-ajax="false"