Develop Reference

disable resizing my webpage on iOS - html, css

I have a problem with a web page I built that in iOS, not sure what versions, but I'm testing it on the new iPhone X(and newest iOS), it's possible to kind of resize the whole webpage.
I checked other regular sites and doesn't seem possible to do that.
So i'm guessing maybe some easy CSS can do that.
It looks like this (this is not my site, just another site that's it's possible to do it with)
It does not change my actual viewing of the site, I can only drag and move it, but when I let go, it goes back to the full screen.
You can see the movie here of how it moves: https://vimeo.com/263628559
I have fixed items on the screen, so it's not any particular div that it's been done too.

It was not that, I found a solution with jQuery
$(window).bind('touchmove',
function(e) {
e.preventDefault();
}
);
Good luck to all :)

jQuery - Allow Autoshow Keyboard on Mobile

I have a Rails app that has a closed back-end. On certain pages, I want to auto-select a text input so I can use an external bluetooth scanner to scan a barcode without selecting it with a mouse/touchscreen every time. This works perfectly on non-mobile devices. However, on mobile devices (mostly tablets), I want the keyboard to popup (as the scanners are viewed as "keyboards" by the system). I know this is prevented by iOS, because it could be annoying. However, I want to know:
Can I have the keyboard auto-appear on Android and/or Windows tablets?
On iOS, can I change this default behavior so the keyboard DOES auto-appear? I have access to all the devices this behavior would be needed.
Edit: I know that I can use a click event to make the keyboard appear (that is how it appears now). However, I do not want to touch the tablet every time I want to scan.

There are some workarounds except using great prompt().
Wrap the web application into Phonegap and do the following way.
Keeping in mind that bluetooth scanner needs a first click to enable listening to keyboard events, you can slightly change js-code to perform first click manually (say, fullscreen textarea) and then deal with scanner. It can be a textarea that hides right after a first click and everything is done with javascript without textarea in view.
Looks like Windows smartphones can help you, can't find any issue concerning a problem.
I've tested autofocus fiddle in Chrome56 with Windows 8.1, Windows10 and an old Windows Mobile 8.1 at Nokia Lumia. In first two cases it does listen to keyboard after focusing. The latter one doesn't.
Bonus. HTC One M8 emulator with Android 4.4 listens to keyboard without a click. Tested with browserstack service. What if there are some android examples without need to click?
Bonus2 - autodetect scanner library.

Based on thoses answers you have to try some workarounds
You can't, at least not in iOS (iPhone), and I believe Android as well. It's a usability issue that the keyboard should not be allowed to be triggered except by user input (it's just annoying if it's automatic).
There are a couple of ways I know of to get around this:
prompt() opens the keyboard
If you trigger the .focus() from within a .click() event (e.g. from >opening your dialog), the keyboard shows up
In your case at the openning of your page ?
At least maybe this JS fiddle can help you or this one

You can use JavaScript in built functions for event handling such as focus(), prompt() to initiate bar code scanning function. Also changing some of the usability would also be helpful in this case. For building hybrid apps try some reading on Cordova Keyboard Plugin at https://github.com/cjpearson/cordova-plugin-keyboard
Happy Coding.

try below code. It might work
// div is some selected element
var f = function(event) {
$timeout(function() { // angular way, setTimeout is OK
input[0].focus();
event.preventDefault();
})
};
var mobile = false;
div.on('click', function(event) {
if(mobile) return;
f(event);
});
div.on('touchstart', function(event) {
mobile = true;
f(event);
});
div.on('touchend', function(event) {
event.preventDefault();
event.stopPropagation();
});

My best bet is using offsite input and focusing there. It will help you to control -
the timing of keyboard appearance(setTimeOut)
Check and reopen the keyboard
You will need to do something like this-
<input type="text" style="visibility: hidden; position: fixed; left: -200px" >
With jQuery-
$("#theOffViewBox").focus();
This will work equally on iOS/Android/Windows/Linux as being base JavaScript jugad.

Javascript Custom Events and iFrames

We are busy with a web project where we need to capture a signature from a USB device. Getting this to work was pretty simple, but you need a browser add on.
However, once the page is placed into an iFrame (All on the same domain), it stops working. No errors or warnings, just does nothing when you click the button. It looks like the document.dispatchEvent function is not working... I think... I can see the custom event listener in Chrome dev tools.
The thing is, I added an event listener for click and that works on the page inside the iframe. It seems that dispatching custom events is not working.
Now, I'm far from an expert here and after hours of Googling and trying all sorts of different methods of which none worked I am running out of time and need help.
Is there some kind of limitation for custom events in an iframe? Security issue?
I created a JSFiddle using the example page from the company who makes the signature pads. (See below how to install browser addon). If you run the example on it's own, you will see a popup open up when you click the Sign button. You don't actually need the device for the popup to open. When the example page is in an iframe, it does nothing.
We need this to work on linux and windows, but I have the exact same issue on both platforms using google chrome.
<iframe style="width: 100%; height: 500px;" src="https://www.esignemcee.net/SigCaptureWeb/sign_chrome_ff_sigcapturewebsdk.html"></iframe>
JSFiddle
Chrome add-on install guid
EPad Signature example page

Adding top to my code seems to fix the problem. If you load your page in a iframe and need to add event listeners and dispatch those event in the 'child' page, then add top to your code like:
$(document).ready(function (){
top.document.addEventListener("MyCustom", _CustomHandler, true);
setTimeout(function ()
{
var MyDetail =
{
message: "blablabla"
};
var event = new CustomEvent('MyCustom', { detail: MyDetail });
top.document.dispatchEvent(event);
}, 1000);});
function _CustomHandler(EventData){
alert(EventData.detail.message);}
This seems to only be an issue when trying to engage with extensions in chrome. Normal events seem to work just fine. As such the code I've added above will work either way, but this is just to show exactly how the 'top' keyword is used.
Hopefully leaving this here will prevent someone else from spending 4 days trying to figure out why dispatching some events work in an iframe and some don't when using chrome. Chrome seems to handle events dispatched for extensions slightly different. I've not been able to find any documentation on this, but custom events and working with extensions like this from javascript is knew for me. Maybe someone more knowledgeable can add some more info.

How to find out if WebView is displayed/onscreen/visible using JavaScript

I have a webpage that "plays a video" using sprite sheets. The page is mobile-optimized, so it can get loaded into Android and iOS WebViews. I'd like to know is when the page is visible so only after that I can play the video. I don't want users to catch the video mid-stream because the WebView lags in presenting itself.
I can see some developers might wait until the whole page has finished pulling in all the assets from the page before making it visible to the user. So, I don't want the "video" to start before that time. I can't rely on window.onload because that event fires even when the WebView isn't onscreen or visible.
How can I accomplish this from the client side, with some JavaScript, preferably?
[Edit] To be clear, I'm implying that I don't have any control over the native WebView. You can load web pages into a WebView that isn't onscreen and push the view or add it to the on-screen layout at a later time. My issue is that when my webpage's URL is loaded into a WebView, I can't tell when the WebView comes onscreen.

Take a look at the Safari Web Content Guide. Scroll down to the Supported Events table. I am thinking (or hoping) that the pageshow event will do what you are hoping for. There is also the focus event.
Looks like using these events for mobile Safari would be as easy as
<body onpageshow="onPageShow();">
I am less familiar with Android, but I will look into it real quick.
EDIT: The onpageshow solution should work the same way in Android 2.2 and above as it does in iOS 4.0 and above. As for whether it works the way you need it to, I am not entirely sure. Let me know!

It is not possible to control the webview using JavaScript. If its not too late to change the design of the app, using native APIs will give you more control of the webview.
You could insert a timeout in the webpage before loading the video. It might be worth a shot.

you can use phonegap library:
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
// Now safe to use the PhoneGap API
}
phonegap is very good for handle events and more action in webview.

Why trigger F11 press event doesn't work?

I just read this question: Full Screen Page by pressing button instead of F11
The op asked to replace F11 with other hot keys, so I'm wondering that maybe I can simulate press F11 to get things work.
I learned that I can use trigger in JQuery to simulate key press event, so I do something like this:
$("body").keyup(function (e) {
alert(e.which);
});
var e = $.Event("keyup");
e.which = 122; // # Key code of F11
$("body").trigger(e);
When I run this, I got the alert says 122, but it seems that it doesn't give the hoped result. Is there a restriction there?
I made a fiddle here: http://jsfiddle.net/ap295/5/

I think this is the one :) to detect it ...
$(document).keyup(function(e){
if(e.which==122){
e.preventDefault();//kill anything that browser may have assigned to it by default
//do what ever you wish here :)
alert('F11 pressed');
return false;
}
});
but triggering it (NOT POSSIBLE)
But you will not prevent the browser from full screen :) ...
Reson given is that , lets say I have full screened it somehow, and wish to toggle out of it using F11 but u are preventing me, I would have to restart PC, [computer illiterates] which poses security risk as you are preventing a user from doing something he is expecting to do, and they may think PC is broken or something :) so ...there you are.

You can not do this. The linked answer in that question provides a way with jQuery to simulate key-presses, within the jQuery event framework.
You simply can not trigger or fake keypresses. So the answer of this question is:
No, this is impossible

You won't be able to override the browser's built-in hotkeys from within a web page.
You might be able to do it in a browser extension, but that's would surely be serious overkill just to change the application's hotkeys.
In any case, why would you even want to override the standard keyboard shortcuts? I don't get that. They've been standard for a long time; most users will be familiar with them, and will find it very odd if they've been changed to something else.

Don't look at is as a question of "How do I trigger F11?" - look at is as "How do I trigger or simulate full-screen?"
With older versions of IE you can open a new window straight into full-screen:
window.open(someURLorOther, '', 'fullscreen=yes, scrollbars=auto');
Or you can use window.open to open a new window of a specific size.
Or you can try to resize the current window to fill the screen:
moveTo(0,0);
resizeTo(screen.availWidth,screen.availHeight);
However just because you can doesn't mean you should. You should never resize the current window - this annoys practically everyone. Opening a new window to a size you choose is more reasonable, though if it's too big it can be annoying, and on a normal web page (where by "normal" I probably mean not some kind of browser-based data-entry app) it is nicer not to open new windows.