Develop Reference

Can't get the gyroscope to work in an IOS browser by using JavaScript

So basically I'm trying to alter the perspective of an image by using the gyroscope in a smartphone/tablet. So far I've got most working, on anything but IOS (classic developer issue).
https://jsfiddle.net/seiftie/db020Lxk/34/
NOTE: This can only be viewed from a device with a gyroscope. If it works, you'll see a status (ex: DeviceOrientationEvent activated).
So for some reason this block doesn't work on IOS browsers:
if (window.DeviceOrientationEvent) {
window.addEventListener('deviceorientation', doDeviceOrientation);
}
var doDeviceOrientation = function(event){
// THIS NEVER GETS TRIGGERED IN IOS
debug("Inside the doDeviceOrientation function after eventListener");
status("DeviceOrientationEvent activated");
sendCoords(event.alpha, event.beta, event.gamma);
distortImage(event.alpha, event.beta, event.gamma);
}
I don't seem to understand what I'm missing here. If my question caused confusion, let me know in the comments below and I'll try to clarify.

Device browser detection

I have built a parallax intro for a clients site - due to the limited budget the animation will only work on higher end browsers, IOS and ie9.
Therefore I need to create a detection script in the sites homepage which will detect the following
IF:
ie9/ firefox / chrome/ safari - stay on current site
IOS - Go to IOS version
Android - Skip to main site
IE8 and below - skip to main site
I have carried out 'is mobile' detections in the past with PHP - but the above is pretty specific so I'm not sure how to approach it.. The main site is aspx, so I could make the animation page into a aspx page also and use server side detection, or look at Javascript/jquery options or plugins - or a combination of both..?
Can anyone recommend a good solution?

In hopes of not getting into browser detection / feauture detection argument blah blah blah, http://www.quirksmode.org/js/detect.html has a good script to handle this

Try with following code, uses the navigator object::
var ua = navigator.userAgent;
if(navigator.appName == "Netscape"){ //for Firefox, Safari and Chrome
//do nothing, stay on this page.
return;
}
else if(navigator.appName == 'Microsoft Internet Explorer'){
//check for version
var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
if (re.exec(ua) != null){
version = parseFloat( RegExp.$1 );
}
if(version >= 9.0){
//do nothing, stay on this page.
return;
}
else{
//redirect to the site for lower IE versions.
}
}
else if(ua.match(/Android/i)){
//code for skipping to Android version
}
else if(ua.match(/iPhone/i)){
//code for skipping to iPhone version
}
else if(ua.match(/iPad/i)){
//code for skipping to iPad version
}

there is a JQuery object $.browser which could give you what you need in javascript here is the api call.
On the Server Side there is a .net Request.Browser object also here is the MSDN Api for it.

Javascript issue in IE9 with Windows 7 Professional and not in Windows 7 Enterprise

Is it possible to get a javascript related error only in IE9 with Windows 7 Professional and not in IE9 with Windows Enterprise?
Can there be any difference in the way IE9 behaves with respect to javascript between a 32-bit Windows 7 and a 64-bit Windows 7?
Please help me with this. The full javascript function is below.
function foo() {
var isChecked = false;
var checkBoxField = "MyCheckBox1";
for(j=0;j<document.forms[0].elements.length;j++) {
if(document.forms[0].elements[j].name.search(checkBoxField) == 0) {
if (document.forms[0].elements[j].checked == true) {
isChecked = true;
}
}
}
alert(isChecked);
}
The isChecked variable has to be true when the checkBoxField is checked. It is true in IE9-Windows 7 Enterprise Edition (Not sure about 32-bit or 64-bit) and it is false in IE9-Windows 7 Professional Edition (32-bit)
Apologies. After looking at the IE settings in the exact machine where the issue occurs, it is clear that it is due to caching. The setting Preserve Favorites website data preserves the old js file and is not downloading the updated version (even if we try to clear cookies, history, temporary files etc). Once that setting is unchecked - history, cache cleared everything started working.
Cheers,

Apologies. After looking at the IE settings in the exact machine where the issue occurs, it is clear that it is due to caching. The setting Preserve Favorites website data preserves the old js file and is not downloading the updated version (even if we try to clear cookies, history, temporary files etc). Once that setting is unchecked - history, cache cleared everything started working

There shouldn't be any difference in different windows version, since most time you'll be using 32 bit ie. But you never know what kinda of bug is in ie javascript
what you can try is is use jquery
you code looks like
function foo() {
var isChecked = $("name='MyCheckBox1':first").attr('checked');
alert(isChecked);
}
set your checkbox id to MyCheckBox1 and it further simplifies
function foo() {
var isChecked = $("#MyCheckBox1").attr('checked');
alert(isChecked);
}
Not sure if it'll help you, but that's my 20 cent.

IE 8 (ONLY) crashes with JavaScript / jQuery calls to plugins

I'm in need of some help.
I'm building a team bio page it keeps crashing IE8 when I call jQuery plugins.
I'm not sure what is going on and can't even run the IE debugger because it crashes so hard.
Any IE8 / jQuery experts out there willing to take a look and offer some help?
Here is the main team page. Clicking through to any of the links causes the crash in IE8.
I am using:
jQuery Tagsphere, AnythingSlider, and jQuery Cycle.
Thanks in advance for any insight into this.

I had a similar problem, most notably closing iframes with IE8. Stumbled across the following code in jquery-1.6.2, which was intended to solve problems with document.domain. Some comments on the web lead me to believe this was a recent problem. Dropped back to jquery-1.4.4 and the problem was resolved.
CODE SEGMENT FROM JQUERY-1.6.2 FOLLOWS:
// #8138, IE may throw an exception when accessing
// a field from window.location if document.domain has been set
try {
ajaxLocation = location.href;
} catch( e ) {
// Use the href attribute of an A element
// since IE will modify it given document.location
ajaxLocation = document.createElement( "a" );
ajaxLocation.href = "";
ajaxLocation = ajaxLocation.href;
}

What is the correct way to detect Opera using jQuery?

Amazon.com recently updated their javascript, and it's causing problems with some Opera browsers.
Their browser detection code looks like so, but it's faulty:
function sitbReaderIsCompatibleBrowser() {
if (typeof(jQuery) == 'undefined') {
return false;
} else {
var version = jQuery.browser.version || "0";
var splitVersion = version.split('.');
return (
(jQuery.browser.msie && splitVersion[0] >= 6) // IE 6 and higher
|| (jQuery.browser.mozilla && (
(splitVersion[0] == 1 && splitVersion[1] >= 8) // Firefox 2 and higher
|| (splitVersion[0] >= 2)
))
|| (jQuery.browser.safari && splitVersion[0] >= 500) // Safari 5 and higher
|| (jQuery.browser.opera && splitVersion[0] >= 9) // Opera 5 and higher
);
}
}
Nothing obviously wrong jumps out at me with this code, but I've never used jQuery before so I don't know.
Even though this code looks like it's attempting to let Opera users through, when I visit the page with Opera 9.64 I get an "unsupported browser" message. If I change Opera's settings to report itself as Firefox, the page works perfectly! With that in mind, I'm pretty sure it's a problem with the script and not the browser.
Any jQuery experts have a suggestion?
You can replicate the behavior by visiting any book on Amazon and clicking the "look inside this book" link.

Prior to jQuery 1.3, you could use jQuery.browser:
if( $.browser.opera ){
alert( "You're using Opera version "+$.browser.version+"!" );
}
From version 1.3, you should use jQuery.support instead.
Main reason for this is that should should avoid checking for browsers, as features may change from version to version, making your code obsolete in no time.
You should always try to use feature detection instead. This will allow you to see if current browser supports the feature you're trying to use, regardless the browser brand, version, etc.

There is a special window.opera object which is present in all Opera 5+ browsers. So something as simple as:
if (window.opera && window.opera.buildNumber) {
// we are in Opera
}
would be enough.

I check for Opera like this:
if (/Opera/.test (navigator.userAgent)) // do something
Why would you want jQuery?

It is much better to detect javascript capabilities rather than browser userAgent.
ie DOM, XmlHttpRequest, eventing model (event.target vs event.srcElement), ActiveX, Java etc
By focusing on the API functions that you will require, rather than a target browser you will create a more robust set of scripts, and inevitably less special casing.
This link here at opera will probably tell you more

A very simple way from Opera themselves:
if (window.opera) {
//this browser is Opera
}
Source: http://my.opera.com/community/openweb/idopera/

The main reason why Amazon fails on Opera is because the send different code from the server side already... If you visit the same page with Firefox and then save that page and reopen it in Opera it works fine...
But they promised to fix that sometime in January...

I think this way is the best
if ( window.opera.version() == 12) {
}
This example check if opera version is 12. Very useful when I have problems with font-face in Opera.

I don't know for sure ( i never really check for opera anyway) but if the built-in jQuery functionality doesn't detect opera, may be a bug with the jQuery which needs to be fixed. I would suspect if that's the case, it should get resolved fairly quickly.

In current HTML5 times, you can also check for browser features instead often.
if (!window.FormData) { alert("xmlhttprequest L2 FormData interface not available"); }