orientationchange event is not working - jquery-mobile

I am trying to detect the orientation change in the mobile devices,iphone and ipads.
I am using the below code:
$(window).bind("orientationchange", function (event) {
alert(event.orientation);
position = $.event.special.orientationchange.orientation();
event.preventDefault();
});
Here the value of alert i.e. event.orientation is displaying as "Undefined", where as i have read in some post that it does support for detecting the orientation.
Also in the jquery documentation it is written to better use "event.orientation" instead of "window.orientation" but none of these are returning the required result both are returning "undefined".
So i have used "$.event.special.orientationchange.orientation();" to detect the orientation.
But i want to use the functionality defined in the documentation of jquery as event.orientation. as in link
Also in my code "$.mobile.orientationChangeEnabled" is set to true, as given in the above link.
Please suggest me any possible solution for this.
Any help would be appreciated.
Thanks in advance.

Old question, but just in case anyone else comes across it, you have to use window.orientation, and that is expressed in degrees:
portrait: 0
portrait (upside down): 180
landscape: (counterclockwise): 90
landscape: (clockwise): -90

event.orientation isn't always set. I had this "undefined" problem in IOS safari. Instead, try using window.orientation:
//trigger a button click when orientation is changed to landscape mode
$(window).on('orientationchange', function(event) {
if (window.orientation == 90 || window.orientation == -90) {
$('.close-button').click();
}
});
window.orientation can be 0 or 180 (portrait mode), or 90 or -90 (landscape mode)

I had same issue. Just in case some one come across this question.
Try window.screen.orientation.type
jQuery( window ).on( "orientationchange", function( event ) {
if(window.screen.orientation.type == 'landscape-primary')
{
}
if(window.screen.orientation.type == 'portrait-primary')
{
}
});

Try this:
$(window).bind('orientationchange',function(){
if(event.orientation == 'portrait'){
alert('portrait');
}
else if(event.orientation == 'landscape') {
alert('landscape');
}
});

$(window).on("orientationchange", function (event) {

Related

Capturing escape event for Fullscreen in Highcharts

I need to get an event for escape key from fullscreen in highcharts so that I can adjust the height of the container after escaping from fullscreen.
Highcharts requests fullscreen from the browser.
You could listen for various fullscreenchange events, and do some action based on it:
if (document.addEventListener) {
document.addEventListener('webkitfullscreenchange', exitHandler, false);
document.addEventListener('mozfullscreenchange', exitHandler, false);
document.addEventListener('fullscreenchange', exitHandler, false);
document.addEventListener('MSFullscreenChange', exitHandler, false);
}
function exitHandler() {
if (!document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
console.log('Exiting fullscreen. Doing chart stuff.');
setContainerHeight(); // do your magic
}
}
See this JSFiddle demonstration or see this discussion on the general case of detecting fullscreening.
While the above works, I thought I'd throw out my solution as it wasn't ideal for my environment (multiple charts on the same page, as described here; partials linked to modules that have different needs).
I ended up using the Highcharts responsive callback option to execute code when a chart is exiting fullscreen mode.
responsive: {
rules: [{
condition: {
// A callback function to gain complete control on when the responsive rule applies. Return true if it applies
callback: function () {
if (this.chartHeight > (window.innerHeight / 2) || this.chartWidth > (window.innerWidth / 2)) {
console.log('responsive cb true:', this.renderTo.id);
_fsChartID = this.renderTo.id;
return true;
} else {
console.log('responsive cb false:', this.renderTo.id);
if (this.renderTo.id === _fsChartID) { // only hit when exiting fullscreen
_fsChartID = null; // reset _fsChartID to prevent infinite loop
this.redraw(); // call whatever function you need when exiting fullscreen
}
return false;
}
}
}
}]
}
Essentially:
Define a variable: _fsChartID to keep track of the which chart is in fullscreen mode. For me, this was defined as a global variable within the module it was needed in.
Update this variable to the correct chart id whenever a chart enters full screen mode.
If a chart fails the fullscreen test, check and see if its the same ID as the chart that entered fullscreen.
If so, reset the _fsChartID variable and do what you need
Else, return false as normal
Note that I simply called this.redraw() because my issue was related to the chart not redrawing correctly when exiting full screen.

can't blur input in ios

I'm building an iPad app using Xcode, Cordova and HTML files.
In testing the HTML on an iPad, I'm not able to blur my input fields by clicking outside them.
Do I need to code the background to blur the input?
I want the blur so I can hide the keyboard.
Unless there's a better solution to hiding it that does not need a blur().
I found two code snippets that combine to trigger blur on inputs when clicking anywhere outside the input, or when pressing the Return key.
function isTextInput(node) {
return ['INPUT'].indexOf(node.nodeName) !== -1;
}
document.addEventListener('touchstart', function(e) {
if (!isTextInput(e.target) && isTextInput(document.activeElement)) {
document.activeElement.blur();
}
}, false);
$('input').keyup(function(event) {
if (event.which === 13) {
$(this).blur();
}
});

jQuery Mobile Swipe movement on hardware device with PhoneGap / Cordova

http://jsfiddle.net/c07uocue/
The swipeleft and swiperight works flawlessly on the Google Chrome 37 browser, but when I test it on my Android 4.1.2 device, it is very unresponsive.
What do I have to add, to make the swipe functional on the Android hardware device?
$(document).on('swipeleft', '.ui-page',
function(event)
{
if(event.handled !== true) // This will prevent event triggering more then once
{
var nextpage = $(this).next('[data-role="page"]');
// swipe using id of next page if exists
if( nextpage.length > 0)
{
// alert("Swipe Left");
$.mobile.pageContainer.pagecontainer( "change", nextpage, {transition: "slide", reverse: false} );
}
event.handled = true;
}
return false;
} ) // And so on..... Entire code in the jsfiddle
I searched around the Stack Overflow and the Internet, and found this link
https://github.com/jquery/jquery-mobile/issues/5534
It says it should work on Chrome 36. My Chrome is 37 and no it is not getting it done. And the TNT-SHIM makes my entire application stop working altogether.
I wonder if Mark Zuckerberg is right. At first he was going all-in with the HTML5 for his facebook mobile, but he realized it had its flaws and now the iOS and Android facebook applications are native.
I agree native applications are the way to go when building intense games, but I thought for simple, 2D games and non-game applications, it would not be necessary....
There does seem to be on-going issues with buggy swipe on Android.
Here is an (open) issue for jquery-mobile and another for ionic, indicating it isn't particular to jquery mobile.
I have a jquery-mobile based cordova app and swipe has worked well and reliably on iOS. However, on Android I have found it to be very unreliable - only triggering a horizontal swipe event (for example) once every five times or so (runnning a Nexus 7, Android 4.4.4, Jquery Mobile 1.4.4, Cordova 3.6.3).
My solution has been adding hammer.js for swipe events and it seems to work well.
I used this on android 4 and it did it for me, hope this helps
function onDeviceReady() {
// set your swipe threshold explicitly
$.event.special.swipe.horizontalDistanceThreshold = 5;
$(document).on("swiperight", "#listitem", function() {
$.mobile.changePage("#page1");
});
}
#Vlad 's answer was on the right track to me, except a threshold of 5 generated extraneous taphold events, while a value of 10 works great.
Based on the default swipe handling code provided here, you can define your own swipe-testing page, for example like so:
$.event.special.swipe.horizontalDistanceThreshold = 10;
$.event.special.swipe.handleSwipe = function( start, stop ) {
$("#about-start").html("x: " + start.coords[ 0].toString() + "y: " + start.coords[1].toString());
$("#about-stop").html("x: " + stop.coords[ 0].toString() + "y: " + stop.coords[1].toString());
$("#about-delta-x").html("delta-x: " + (stop.coords[0]-start.coords[0]).toString());
if ( stop.time - start.time < $.event.special.swipe.durationThreshold &&
Math.abs( start.coords[ 0 ] - stop.coords[ 0 ] ) > $.event.special.swipe.horizontalDistanceThreshold &&
Math.abs( start.coords[ 1 ] - stop.coords[ 1 ] ) < $.event.special.swipe.verticalDistanceThreshold ) {
start.origin.trigger( "swipe" )
.trigger( start.coords[0] > stop.coords[ 0 ] ? "swipeleft" : "swiperight" );
}
};
$(document).on("tap swipeleft swiperight taphold vclick", "#about-page", function(event) {
$("#about-event").html(event.type);
if (event.type=='tap') {
$("#about-start").html('');
$("#about-stop").html('');
$("#about-delta-x").html('');
}
});
Still, this experimental page shows that threshold value is not the real problem, although it may be a workaround. On the ripple emulator, you will see the stop x value increase as long as you click-and-drag, while on a real device (Android 4.4.2), there is a single call to $.event.special.swipe.handleSwipe, with a distance of between 15 and 30 in my case, even though I drag the swipe for much longer.
Most of the facebook apps on mobile are still HTML5 don't loose faith.
Using Jquery mobile you can easily navigate through page by swipe using a method like this one :
$("#article2").on("swiperight",function(){
$.mobile.changePage( "#article1", { transition : "slide", reverse: true});
});
$("#article2").on("swipeleft",function(){
$.mobile.navigate( "#article3", { transition : "slide"});
});
Hope this help.

How to display 0s for time using jquery mask plug in

I am using Jquery mask plugin to display time.This mask does not allow to enter more than 2 as 1st number. But my requirement is if I enter '5', it should display as '05:00'.Could anyone please help me, how to achieve this.
Thanks in advance,
Can you try this block of code.
$(function() {
$('input).bind('keydown', function(e)
{
var keyCode = e.keyCode;
if (keyCode == ? ) //? check its more than 2
{
//read the value 5 and update the input with 05:00
}
});
});
I am not sure this is what exactly you want. But it will work

Dojo dialog, the iPad and the virtual keyboard issue

Recently, I have been working on a project where the interface should work for desktop and tablets (in particular the iPad).
One issue I am coming across is with a Dojo dialog on the iPad when text entry is taking place.
Basically here is what happens:
Load Dojo interface with buttons on iPad - OK
Press button (touch) to show dialog (90% height and width) - OK
Click on text box (touch) like DateTextBox or TimeTextBox - OK, the virtual keyboard is opened
Click the date or time I want in the UI (touch) - OK, but I can't see all of the options since it is longer than the screen size...
Try to scroll down (swipe up with two fingers or click 'next' in the keyboard) - not OK and the dialog repositions itself to have it's top at the top of the viewport area.
Basically, the issue is that the dialog keeps trying to reposition itself.
Am I able to stop dialog resizing and positioning if I catch the window onResize events?
Does anyone else have this issue with the iPad and Dojo dialogs?
Also, I found this StackOverflow topic on detecting the virtual keyboard, but it wasn't much help in this case...
iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari?
Thanks!
I just came across the same issue yesterday and found a hack,
which is not an elegant solution.
If you want to stop the dijit.Dialog from repositioning you can:
1) Set the property ._relativePosition of a dijit.Dialog object
(in this case it's "pop") after calling the method pop.show():
pop.show();
pop._relativePosition = new Object(); //create empty object
Next steps would probably be:
Check browser type&OS: dojo or even better BrowserDetect
Check when the virtual keyboard is activated and disable repositioning
Extend dijit.Dialog with custom class (handle all of the exceptions)
As suggested another way to do this is to override the _position function by extending the object (or maybe relative position, or other method). Here is my solution which only allows the dialog to be positioned in the middle of the screen once. There are probably better ways to change this by playing with the hide and show events but this suits my needs.
dojo.provide("inno.BigDialog");
dojo.require("dijit.Dialog");
dojo.declare("inno.BigDialog",dijit.Dialog,{
draggable:false,
firstPositioned : false,
_position : function() {
if (!dojo.hasClass(dojo.body(), "dojoMove") && !this.firstPositioned) {
this.firstPositioned = true;
var _8 = this.domNode, _9 = dijit.getViewport(), p = this._relativePosition, bb = p ? null
: dojo._getBorderBox(_8), l = Math
.floor(_9.l
+ (p ? p.x : (_9.w - bb.w) / 2)), t = Math
.floor(_9.t
+ (p ? p.y : (_9.h - bb.h) / 2));
if (t < 0) // Fix going off screen
t = 0;
dojo.style(_8, {
left : l + "px",
top : t + "px"
});
}
}
});
You can override the _position function and call the _position function of the superclass only once. (See http://dojotoolkit.org/reference-guide/dojo/declare.html#calling-superclass-methods)
if (!dojo._hasResource["scorll.asset.Dialog"]) {
dojo._hasResource["scorll.asset.Dialog"] = true;
dojo.provide("scorll.asset.Dialog");
dojo.require("dijit.Dialog");
dojo.declare("scorll.asset.Dialog", [dijit.Dialog], {
_isPositioned: false,
_position: function () {
if(this._isPositioned == false) {
// Calls the superclass method
this.inherited(arguments);
this._isPositioned = true;
}
}
})
}

Resources