Develop Reference

Web app screen orientation lock: Orientation lock failed

I have used several methods from other questions to try to lock the screen orientation for my web app, but the lock orientation always fails. Here is my code:
// lock orientation to portrait
window.screen.lockOrientationUniversal = window.screen.lockOrientation || window.screen.mozLockOrientation || window.screen.msLockOrientation;
if (window.screen.lockOrientationUniversal("portrait")) {
console.log("Orientation locked to portrait");
} else {
console.log("Orientation lock failed.");
}
I have also tried this with just screen. instead of window.screen. and get the same thing. Note that this is being tested on the latest Firefox for Android and that the web-app is not a full-screen app.
I also get the following message:
Use of the orientation sensor is deprecated.
Which makes sense as the Mozilla site mentions that it is deprecated. What is the latest supported way to do this?

1.) Screen.lockOrientation is deprecated (as seen in the MDN link you provided), so the code you have probably won't work in most modern browsers.
2.) ScreenOrientation is just the interface, which is why ScreenOrientation.lock("portrait") does not work. Basically, ScreenOrientation is the thing in the background that tells the browser how the screen orientation object should be built (similar to prototypes in JavaScript), but it is not the object itself.
In modern browsers, you can access the global screen orientation like this:
var myScreenOrientation = window.screen.orientation;
(source: https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation)
Later you can lock the orientation with this:
myScreenOrientation.lock("portrait");
and unlock it with
myScreenOrientation.unlock();
The .lock() method returns a Promise if you want to do anything with that, but it's outside the scope of this question, so I'll just mention that it exists.
3.) Another possible issue: under current standards, many browsers will REQUIRE that a page be in fullscreen mode to lock a device's orientation. Since your web app is not fullscreen this will likely also prevent the orientation being locked. (see 5.3 of the web standard: https://www.w3.org/TR/screen-orientation/)

How to detect when Chrome's "click-to-play" Flash blocking feature is currently active

Tracking state of Chrome's Click-to-play feature
How do you detect that a Flash plugin has been temporarily disabled, or, conversely, detect that it has been enabled due to Chrome's "click-to-play" feature?
Background
Chrome's new "click-to-play" feature detects plugins that are not visibly significant and pauses them. Chrome displays a "play" button over the plugin, a user may click the "play" button to activate the plugin. (reference: https://productforums.google.com/forum/#!topic/chrome/xPcpRBzyPcc)
Here's a screenshot of it in action (notice white play buttons):
You can see in this screen shot that it has paused a video-player (right column). That video player has HTML5-based controls overlaying a Flash-based video player. So, there's no way for a user to click the play-button as the entire SWF is purposefully covered by HTML5-based play/pause controls.
What I need is to detect when the SWF has been paused by the "click-to-play" feature so I can disable the controls and make the SWF interactive.
What I've tried
In JavaScript - All methods exposed via ExternalInterface are still available though the SWF is paused. It actually responds like it's playing and does not return an error.
In JavaScript - Update the size of the embedded <object> to > 700x400px. "Click-to-play" does not pause a SWF of this size. So, I tried using -webkit-transfor: scale(0.5) to use CSS to scale it back to desired size. Chrome calculates the final rendered size and pauses the SWF regardless.
In Flash - stage.frameRate returns correct value (it's not set to 0 to pause the SWF for instance)
In writing up this question I found an answer, decided to post here anyways in case others need help with this issue.

For the benefit of others who are looking for the rules around Flash blocking stuff,please see them below:
The Flash Content and the page are loaded from the same domain.
Unknown Width and Height of the Flash Object ie when Chrome gets the
width and height as 0 or less than 0.
The Flash Content is
whitelisted by the user in Chrome Settings.
The Width and Height of
the Flash Object are less than or equal to 5 each, considering the
content to be Tiny and essential.
The Width and Height of the
Flash object are equal or greater than 398x298.
The Aspect Ratio
of the content is 16:9, (with an allowed deviation of 0.01) AND the
width*height area is at least 120K.
At least one of the above criterias need to be met, in order to get the content marked as Essential and not get Auto-Paused. Although, I have seen few deviations and Chrome hasn't made any public announcement on the rules yet.

Add an empty Flash file larger than 398x298 at the bottom of your page. I found once you have at least one Flash file above their minimum Chrome will not pause any of your Flash. You cannot hide this extra Flash file with CSS. Optionally use a javascript timeout (3 seconds) to hide the empty Flash file in case it messes with your page layout. I'm using swfObject for embedding.

To circumvent the Chrome click-to-play throttling, load your SWF from the same domain and protocol as your site.
You can use the AS3 ThrottleEvent to detect when the SWF has been throttled.
// AS3 code
import flash.events.ThrottleEvent;
import flash.external.ExternalInterface;
stage.addEventListener(ThrottleEvent.THROTTLE, onThrottleEvent);
private function onThrottleEvent(e:ThrottleEvent) {
ExternalInterface.call("onThrottleEvent", e.state); // call javascript function
}
You can setup an ExternalInterface call to keep track of this state in JavaScript, in JavaScript manage z-index of your SWF based on if it's throttled or not.
// JS Code
var IS_THROTTLED = false;
window.onThrottleEvent = function (throttleState) {
IS_THROTTLED = (throttleState === "throttle");
}

Changing IE Document Mode via Bookmarklet

I am currently in development of a bookmarklet that triggers a fancybox Iframe when an image is clicked on a website. This bookmarklet works great in all browsers except IE 9's Quirks Mode. In fact, it not only screws up the rendering of items on the screen, but items within the Iframe as well. I'm looking for a solution to force IE into standards mode. Especially on pages where there is no Doctype declared. In fact a static image on a page is our current test for the bookmarklet.
Success equals -
1. Launching the bookmarklet on a Quirks Mode page
2. Having the fancybox iframe load in the proper location on screen with proper rendering
Thanks in advance for any help that can be provided.

I'm looking for a solution to force IE into standards mode.
I'm pretty sure there is no way. Changing the rendering mode with Javascript just wouldn't be a scenario that anyone would consider necessary or beneficial; your use-case is just too obscure.
Success equals - 1. Launching the bookmarklet on a Quirks Mode page 2. Having the fancybox iframe load in the proper location on screen with proper rendering
If fancybox won't work, then try out alternative solutions: http://www.google.com/search?q=jquery%20lightbox

Loading and Unloading JavaScript with CSS Media Queries in mind

I'm using CSS Media Queries for making my website responsive:
#media (min-width:1200px) {
// DESKTOP STYLING
}
#media (max-width:1200px) {
// MOBILE STYLING
}
I use https://github.com/paulirish/matchMedia.js to check for Media Query
if(min-width:1200px) {
// DESKTOP JAVASCRIPT
} else {
// MOBILE JAVASCRIPT
}
So initially everything works fine, when my screen is < 1200px it shows mobile version if its higher it shows desktop version (javascript works as well).
Problem now is when i start resizing the window for example:
1) LOADS DESKTOP JAVASCRIPT (EVERYTHING IS FINE)
2) RESIZE WINDOW < 1200px (SWITCH TO MOBILE TEMPLATE)
LOADS MOBILE JAVASCRIPT (SITE BREAKS)
3) RESIZE WINDOW > 1200px (SWITCH TO DESKTOP TEMPLATE)
LOADS DESKTOP JAVASCRIPT A SECOND TIME (SITE BREAKS EVEN MORE)
So i was wondering any ideas how to 'unload' javascript or maybe a elegant way to have two different javascript files loaded depending which media query is used ?

First you could have one JavaScript (join the 2 together ) and have a controller which will verify if your window size is greater or not than 1200.
Or you could try to wrap the JavaScipt files into two objects, and create a third which will handle as a controller. Via Ajax you could load and unload the files ( nothing breaks because you have the controller still there ) and switch between them. This is a problem though because you will have to remove all the listeners when you make the switch and you will have to load another file which will take a small amount of time.
Hope this helps. Nice question by the way.

I would recommend a library like Enquire.js, you could always code the triggers yourself, but if you have a "desktop slideshow" and a "mobile slideshow," you'll need to make sure you destroy the the inactive one on resize and Enquire has a nice API for that includes an unmatch trigger.
I'm dealing with the same slideshow plugin for my "desktop slideshow" and a "mobile slideshow," but would like different settings (e.g.- using a bottom aligned pager versus a next/prev navigation) which is easy to set on page load, but what if the device changes media queries breakpoints on orientation change, etc.

Loading JS script for only iOS devices?

I have a jQuery script I'm using on a site to allow fixed position background images on iPhone/iPad/iPod. However it seems to be clashing with another script I am using on the site that enlarges background images full screen. Luckily they're independent of each other, I don't need the clashing background image script to work on iOS devices and vice versa.
Is there a way I can specifically target IOS devices to serve a JS file? I initially thought about using some kind of IF statement and doing it on window size but that started to get a bit complicated and affects other non-IOS devices. It just needs to run something like this...
..."if IOS device then load scroll.js"
I know device/browser sniffing is frowned upon but I can't think of another way around this problem.

You can use the Mobile Safari user agent string to detect mobile safari server-side, see: How do I detect Mobile Safari server side using PHP?
You can also do this in JavaScript:
if(navigator.userAgent.match(/(iPhone|iPod|iPad)/i))
See iPhone & iPod Detection Using JavaScript for more information.

You can use Detect Mobile Browser (it has a library for javascript).

you can also try this
if (navigator.userAgent.match(/like Mac OS X/i)) {
alert('Hi, you\'re browsing from an iOS device.');
}