Focus inside a select with javascript? - javascript

The following code works fine in most browsers but it won't work in Internet Explorer CE Mobil and I can't for the life of me figure out why.
function autofocus() {
var el = document.getElementById("autofocus");
if (el === null) {
return;
} else if (el.tagName.toUpperCase() == "SELECT") {
if (el.selectedIndex == -1) {
el.options[0].selected = true;
}
}
el.focus();
}
$(window).ready(function () {
autofocus();
});​
It works perfectly in all the regular browsers I have tried but in Internet Explorer Mobile it seems to focus on the select list itself which means it's not possible to navigate the various options without clicking one. Maybe if I click one of the options instead?. See http://jsfiddle.net/mhenrixon/sbwCv/19/ for an example of what is not working.
EDIT: It does not have to do with the selectedIndex per se since most of the time there will be a selectedIndex like 15, 5, 27 or whatever. Just not -1.

On my Samsung Saga, I'm running:
Mozilla/4.0 (compatible; MSIE 6.0; Windows CE; IEMobile 7.11) VZW:SCH-i770 PPC 320x320
and the problem on this browser is the jQuery ready function.
If instead you use <body onload="autofocus()"> the <select> will have its first option selected. And that option is indeed focused; if I use the optical mouse, I can right-arrow to a different option and space-bar to select it.
So here's the test case I've ended up with:
<html>
<head>
<title>Test</title>
<!-- script type="text/javascript" src="jquery-1.4.2.js" -->
<script type="text/javascript">
function autofocus() {
var el = document.getElementById("autofocus");
if (el === null) {
return;
} else if (el.tagName.toUpperCase() == "SELECT") {
if (el.selectedIndex == -1) {
el.options[0].selected = true;
}
}
el.focus();
}
/*
$(window).ready(function () {
autofocus();
});
*/
</script>
</head>
<body onload="autofocus()">
<select autofocus="autofocus" id="autofocus" multiple="multiple">
<option value="0">0:17,00st</option>
<option value="P11">P11:1918,00st</option>
<option value="P12">P12:100,00st</option>
</select>
</body>
</html>
And of course it works on desktop browsers as well.

you can try if el.selectedIndex = 2; works or not, i can't seem to reproduce this problem in IE8, so may be the problem is just related to IE CE Mobile
function autofocus() {
var el = document.getElementById("autofocus");
if (el === null) {
return;
} else if (el.tagName.toUpperCase() == "SELECT") {
if (el.selectedIndex == -1) {
el.selectedIndex = 0;
el.options[0].selected = true;
}
}
el.focus();
}
$(window).ready(function () {
autofocus();
});

Related

Javascript Game Design - force screen to fullscreen - FAUX native App for touchscreens [duplicate]

How can I make a visitor's browser go fullscreen using JavaScript, in a way that works with IE, Firefox and Opera?
In newer browsers such as Chrome 15, Firefox 10, Safari 5.1, IE 10 this is possible. It's also possible for older IE's via ActiveX depending on their browser settings.
Here's how to do it:
function requestFullScreen(element) {
// Supports most browsers and their versions.
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
if (requestMethod) { // Native full screen.
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
var elem = document.body; // Make the body go full screen.
requestFullScreen(elem);
The user obviously needs to accept the fullscreen request first, and there is not possible to trigger this automatically on pageload, it needs to be triggered by a user (eg. a button)
Read more: https://developer.mozilla.org/en/DOM/Using_full-screen_mode
This code also includes how to enable full screen for Internet Explorer 9, and probably older versions,
as well as very recent versions of Google Chrome. The accepted answer may also be used for other browsers.
var el = document.documentElement
, rfs = // for newer Webkit and Firefox
el.requestFullscreen
|| el.webkitRequestFullScreen
|| el.mozRequestFullScreen
|| el.msRequestFullscreen
;
if(typeof rfs!="undefined" && rfs){
rfs.call(el);
} else if(typeof window.ActiveXObject!="undefined"){
// for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript!=null) {
wscript.SendKeys("{F11}");
}
}
Sources:
Chrome Fullscreen API (note, however, that
requestFullscreen "only works during" "[m]ost UIEvents and MouseEvents, such as click and keydown, etc.", "so it cannot be used maliciously".)
How to make browser full screen using F11 key event through JavaScript
This is as close as you can get to full screen in JavaScript:
<script type="text/javascript">
window.onload = maxWindow;
function maxWindow() {
window.moveTo(0, 0);
if (document.all) {
top.window.resizeTo(screen.availWidth, screen.availHeight);
}
else if (document.layers || document.getElementById) {
if (top.window.outerHeight < screen.availHeight || top.window.outerWidth < screen.availWidth) {
top.window.outerHeight = screen.availHeight;
top.window.outerWidth = screen.availWidth;
}
}
}
</script>
Here is a complete solution to get in and out of full screen mode (aka cancel, exit, escape)
function cancelFullScreen() {
var el = document;
var requestMethod = el.cancelFullScreen||el.webkitCancelFullScreen||el.mozCancelFullScreen||el.exitFullscreen||el.webkitExitFullscreen;
if (requestMethod) { // cancel full screen.
requestMethod.call(el);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
function requestFullScreen(el) {
// Supports most browsers and their versions.
var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;
if (requestMethod) { // Native full screen.
requestMethod.call(el);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
return false
}
function toggleFullScreen(el) {
if (!el) {
el = document.body; // Make the body go full screen.
}
var isInFullScreen = (document.fullScreenElement && document.fullScreenElement !== null) || (document.mozFullScreen || document.webkitIsFullScreen);
if (isInFullScreen) {
cancelFullScreen();
} else {
requestFullScreen(el);
}
return false;
}
You can use The fullscreen API
You can see an example here
The fullscreen API provides an easy way for web content to be
presented using the user's entire screen. This article provides
information about using this API.
The new html5 technology – fullscreen API gives us an easy way to
present a web page content in full-screen mode. We are about to give
you detailed information about the fullscreen mode. Just try to
imagine about all possible advantages which you can get using this
technology – full-screen photo albums, videos, and even games.
But before we describe this new technology, I have to note that this technology is experimental, and supported by all major Browsers.
You can find the full tutorial here : http://www.css-jquery-design.com/2013/11/javascript-jquery-fullscreen-browser-window-html5-technology/
Here is working Demo : http://demo.web3designs.com/javascript-jquery-fullscreen-browser-window-html5-technology.htm
Simple example from: http://www.longtailvideo.com/blog/26517/using-the-browsers-new-html5-fullscreen-capabilities/
<script type="text/javascript">
function goFullscreen(id) {
// Get the element that we want to take into fullscreen mode
var element = document.getElementById(id);
// These function will not exist in the browsers that don't support fullscreen mode yet,
// so we'll have to check to see if they're available before calling them.
if (element.mozRequestFullScreen) {
// This is how to go into fullscren mode in Firefox
// Note the "moz" prefix, which is short for Mozilla.
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
// This is how to go into fullscreen mode in Chrome and Safari
// Both of those browsers are based on the Webkit project, hence the same prefix.
element.webkitRequestFullScreen();
}
// Hooray, now we're in fullscreen mode!
}
</script>
<img class="video_player" src="image.jpg" id="player"></img>
<button onclick="goFullscreen('player'); return false">Click Me To Go Fullscreen! (For real)</button>
I've used this...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript">
function fullScreen(theURL) {
window.open(theURL, '', 'fullscreen=yes, scrollbars=auto');
}
// End -->
</script>
</head>
<body>
<h1 style="text-align: center;">
Open In Full Screen
</h1>
<div style="text-align: center;"><br>
<a href="javascript:void(0);" onclick="fullScreen('http://google.com');">
Open Full Screen Window
</a>
</div>
</body>
</html>
Create Function
function toggleFullScreen() {
if ((document.fullScreenElement && document.fullScreenElement !== null) ||
(!document.mozFullScreen && !document.webkitIsFullScreen)) {
$scope.topMenuData.showSmall = true;
if (document.documentElement.requestFullScreen) {
document.documentElement.requestFullScreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullScreen) {
document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
$scope.topMenuData.showSmall = false;
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}
In Html Put Code like
<ul class="unstyled-list fg-white">
<li class="place-right" data-ng-if="!topMenuData.showSmall" data-ng-click="toggleFullScreen()">Full Screen</li>
<li class="place-right" data-ng-if="topMenuData.showSmall" data-ng-click="toggleFullScreen()">Back</li>
</ul>
Try screenfull.js. It's a nice cross-browser solution that should work for Opera browser as well.
Simple wrapper for cross-browser usage of the JavaScript Fullscreen API, which lets you bring the page or any element into fullscreen. Smoothens out the browser implementation differences, so you don't have to.
Demo.
This function work like a charm
function toggle_full_screen()
{
if ((document.fullScreenElement && document.fullScreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen))
{
if (document.documentElement.requestFullScreen){
document.documentElement.requestFullScreen();
}
else if (document.documentElement.mozRequestFullScreen){ /* Firefox */
document.documentElement.mozRequestFullScreen();
}
else if (document.documentElement.webkitRequestFullScreen){ /* Chrome, Safari & Opera */
document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
else if (document.msRequestFullscreen){ /* IE/Edge */
document.documentElement.msRequestFullscreen();
}
}
else
{
if (document.cancelFullScreen){
document.cancelFullScreen();
}
else if (document.mozCancelFullScreen){ /* Firefox */
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen){ /* Chrome, Safari and Opera */
document.webkitCancelFullScreen();
}
else if (document.msExitFullscreen){ /* IE/Edge */
document.msExitFullscreen();
}
}
}
To use it just call:
toggle_full_screen();
Luckily for unsuspecting web users this cannot be done with just javascript. You would need to write browser specific plugins, if they didn't already exist, and then somehow get people to download them. The closest you can get is a maximized window with no tool or navigation bars but users will still be able to see the url.
window.open('http://www.web-page.com', 'title' , 'type=fullWindow, fullscreen, scrollbars=yes');">
This is generally considered bad practice though as it removes a lot of browser functionality from the user.
Now that the full screen APIs are more widespread and appear to be maturing, why not try Screenfull.js? I used it for the first time yesterday and today our app goes truly full screen in (almost) all browsers!
Be sure to couple it with the :fullscreen pseudo-class in CSS. See https://www.sitepoint.com/use-html5-full-screen-api/ for more.
This may support
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="PRODUCTION_Default5" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function max()
{
window.open("", "_self", "fullscreen=yes, scrollbars=auto");
}
</script>
</head>
<body onload="max()">
<form id="form1" runat="server">
<div>
This is Test Page
</div>
</form>
</body>
</html>
Can you Try:
<script type="text/javascript">
function go_full_screen(){
var elem = document.documentElement;
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
}
</script>
Full Screen / Compress Screen
This will works to show your window in full screen
Note: For this to work, you need Query from http://code.jquery.com/jquery-2.1.1.min.js
Or make have javascript link like this.
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<div id="demo-element">
<span>Full Screen Mode Disabled</span>
<button id="go-button">Enable Full Screen</button>
</div>
<script>
function GoInFullscreen(element) {
if(element.requestFullscreen)
element.requestFullscreen();
else if(element.mozRequestFullScreen)
element.mozRequestFullScreen();
else if(element.webkitRequestFullscreen)
element.webkitRequestFullscreen();
else if(element.msRequestFullscreen)
element.msRequestFullscreen();
}
function GoOutFullscreen() {
if(document.exitFullscreen)
document.exitFullscreen();
else if(document.mozCancelFullScreen)
document.mozCancelFullScreen();
else if(document.webkitExitFullscreen)
document.webkitExitFullscreen();
else if(document.msExitFullscreen)
document.msExitFullscreen();
}
function IsFullScreenCurrently() {
var full_screen_element = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || null;
if(full_screen_element === null)
return false;
else
return true;
}
$("#go-button").on('click', function() {
if(IsFullScreenCurrently())
GoOutFullscreen();
else
GoInFullscreen($("#demo-element").get(0));
});
$(document).on('fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange', function() {
if(IsFullScreenCurrently()) {
$("#demo-element span").text('Full Screen Mode Enabled');
$("#go-button").text('Disable Full Screen');
}
else {
$("#demo-element span").text('Full Screen Mode Disabled');
$("#go-button").text('Enable Full Screen');
}
});</script>
Try this script
<script language="JavaScript">
function fullScreen(theURL) {
window.open(theURL, '', 'fullscreen=yes, scrollbars=auto' );
}
</script>
For calling from script use this code,
window.fullScreen('fullscreen.jsp');
or with hyperlink use this
<a href="javascript:void(0);" onclick="fullScreen('fullscreen.jsp');">
Open in Full Screen Window</a>
In Firefox 10, you can make the current page go fullscreen (real fullscreen with no window chrome) using this javascript:
window.fullScreen = true;
A Q&D way to go full screen, if you are in a "kiosk" situation, is to feed an F11 to the browser window after it's up and running. This is not pretty starting up and the user might be able to poke a touch screen at the top and get a semi-full-screen view, but feeding the F11 might do in a pinch or just to get started on a project.
Here is my full solution for Full Screen and Exit Full Screen both (many thanks to help from tower's answer above):
$(document).ready(function(){
$.is_fs = false;
$.requestFullScreen = function(calr)
{
var element = document.body;
// Supports most browsers and their versions.
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
if (requestMethod) { // Native full screen.
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
$.is_fs = true;
$(calr).val('Exit Full Screen');
}
$.cancel_fs = function(calr)
{
var element = document; //and NOT document.body!!
var requestMethod = element.exitFullScreen || element.mozCancelFullScreen || element.webkitExitFullScreen || element.mozExitFullScreen || element.msExitFullScreen || element.webkitCancelFullScreen;
if (requestMethod) { // Native full screen.
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
$(calr).val('Full Screen');
$.is_fs = false;
}
$.toggleFS = function(calr)
{
$.is_fs == true? $.cancel_fs(calr):$.requestFullScreen(calr);
}
});
//
CALLING:
<input type="button" value="Full Screen" onclick="$.toggleFS(this);" />
function fs(){plr.requestFullscreen();document.exitFullscreen()}; or function fs(){(plr.offsetWidth==360)?plr.requestFullscreen():document.exitFullscreen()}
<!DOCTYPE html><html><head>
<style>
body{background:#000}
#plr{position:relative;background:#fff;width:360px}
#vd{width:100%;background:grey}
button{width:48px;height:48px;border:0;background:grey}
</style>
</head><body>
<div id="plr">
<video id="vd" src="video.mp4"></video>
<button onclick="(plr.offsetWidth==360)?plr.requestFullscreen():document.exitFullscreen()">fs</button>
<button onclick="plr.requestFullscreen();document.exitFullscreen()">fs2</button>
</div>
</body></html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Fullscreen with JavaScript</h2>
<p>Click on the button to open the video in fullscreen mode.</p>
<button onclick="openFullscreen();">Open Video in Fullscreen Mode</button>
<p><strong>Tip:</strong> Press the "Esc" key to exit full screen.</p>
<video width="100%" controls id="myvideo">
<source src="rain.mp4" type="video/mp4">
<source src="rain.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<script>
var elem = document.getElementById("myvideo");
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
}
}
</script>
<p>Note: Internet Explorer 10 and earlier versions do not support the msRequestFullscreen() method.</p>
</body>
</html>
Source:https://www.w3schools.com/howto/howto_js_fullscreen.asp

How to call one Script function from another

I try to validate Required fields in Java script. It will works fine on Chrome,Firefox.But it will not works for Textbox in IE at the same the scripts was works on DropDownlist validation on Submit button Click.
My Script For Validate Text Box:
function validateRecepitMaster() {
if ((!IsBlank(Pay_Amount))) {
ShowLabel(spPay_Amount);
spPay_Amount.innerHTML = "*";
Pay_Amount.focus();
return false;
}
}
function IsBlank(obj) {
if (obj) {
if ((obj.value.trim().length == 0) || (obj.value == null)) {
obj.focus();
return false;
}
return true;
}
}
The Working Script for DropDown
if (Cust_Id.value == "") {
ShowLabel(spCust_ID);
spCust_ID.innerHTML = "*";
Cust_Id.focus();
return false;
}
Above Both scripts woks fine on Chrome, Firefox, and not works at IE.
Thanks in advance
add below script before run yours:
String.prototype.trim=function()
{
return this.replace(/(^\s*)|(\s*$)/g, '');
};
Look in your console for the error that IE throws.
A possible candidate is:
obj.value.trim()
IE might not support trim (yet)

Full screen window either jquery or javascript for all browser? [duplicate]

How can I make a visitor's browser go fullscreen using JavaScript, in a way that works with IE, Firefox and Opera?
In newer browsers such as Chrome 15, Firefox 10, Safari 5.1, IE 10 this is possible. It's also possible for older IE's via ActiveX depending on their browser settings.
Here's how to do it:
function requestFullScreen(element) {
// Supports most browsers and their versions.
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
if (requestMethod) { // Native full screen.
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
var elem = document.body; // Make the body go full screen.
requestFullScreen(elem);
The user obviously needs to accept the fullscreen request first, and there is not possible to trigger this automatically on pageload, it needs to be triggered by a user (eg. a button)
Read more: https://developer.mozilla.org/en/DOM/Using_full-screen_mode
This code also includes how to enable full screen for Internet Explorer 9, and probably older versions,
as well as very recent versions of Google Chrome. The accepted answer may also be used for other browsers.
var el = document.documentElement
, rfs = // for newer Webkit and Firefox
el.requestFullscreen
|| el.webkitRequestFullScreen
|| el.mozRequestFullScreen
|| el.msRequestFullscreen
;
if(typeof rfs!="undefined" && rfs){
rfs.call(el);
} else if(typeof window.ActiveXObject!="undefined"){
// for Internet Explorer
var wscript = new ActiveXObject("WScript.Shell");
if (wscript!=null) {
wscript.SendKeys("{F11}");
}
}
Sources:
Chrome Fullscreen API (note, however, that
requestFullscreen "only works during" "[m]ost UIEvents and MouseEvents, such as click and keydown, etc.", "so it cannot be used maliciously".)
How to make browser full screen using F11 key event through JavaScript
This is as close as you can get to full screen in JavaScript:
<script type="text/javascript">
window.onload = maxWindow;
function maxWindow() {
window.moveTo(0, 0);
if (document.all) {
top.window.resizeTo(screen.availWidth, screen.availHeight);
}
else if (document.layers || document.getElementById) {
if (top.window.outerHeight < screen.availHeight || top.window.outerWidth < screen.availWidth) {
top.window.outerHeight = screen.availHeight;
top.window.outerWidth = screen.availWidth;
}
}
}
</script>
Here is a complete solution to get in and out of full screen mode (aka cancel, exit, escape)
function cancelFullScreen() {
var el = document;
var requestMethod = el.cancelFullScreen||el.webkitCancelFullScreen||el.mozCancelFullScreen||el.exitFullscreen||el.webkitExitFullscreen;
if (requestMethod) { // cancel full screen.
requestMethod.call(el);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
function requestFullScreen(el) {
// Supports most browsers and their versions.
var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;
if (requestMethod) { // Native full screen.
requestMethod.call(el);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
return false
}
function toggleFullScreen(el) {
if (!el) {
el = document.body; // Make the body go full screen.
}
var isInFullScreen = (document.fullScreenElement && document.fullScreenElement !== null) || (document.mozFullScreen || document.webkitIsFullScreen);
if (isInFullScreen) {
cancelFullScreen();
} else {
requestFullScreen(el);
}
return false;
}
You can use The fullscreen API
You can see an example here
The fullscreen API provides an easy way for web content to be
presented using the user's entire screen. This article provides
information about using this API.
The new html5 technology – fullscreen API gives us an easy way to
present a web page content in full-screen mode. We are about to give
you detailed information about the fullscreen mode. Just try to
imagine about all possible advantages which you can get using this
technology – full-screen photo albums, videos, and even games.
But before we describe this new technology, I have to note that this technology is experimental, and supported by all major Browsers.
You can find the full tutorial here : http://www.css-jquery-design.com/2013/11/javascript-jquery-fullscreen-browser-window-html5-technology/
Here is working Demo : http://demo.web3designs.com/javascript-jquery-fullscreen-browser-window-html5-technology.htm
Simple example from: http://www.longtailvideo.com/blog/26517/using-the-browsers-new-html5-fullscreen-capabilities/
<script type="text/javascript">
function goFullscreen(id) {
// Get the element that we want to take into fullscreen mode
var element = document.getElementById(id);
// These function will not exist in the browsers that don't support fullscreen mode yet,
// so we'll have to check to see if they're available before calling them.
if (element.mozRequestFullScreen) {
// This is how to go into fullscren mode in Firefox
// Note the "moz" prefix, which is short for Mozilla.
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
// This is how to go into fullscreen mode in Chrome and Safari
// Both of those browsers are based on the Webkit project, hence the same prefix.
element.webkitRequestFullScreen();
}
// Hooray, now we're in fullscreen mode!
}
</script>
<img class="video_player" src="image.jpg" id="player"></img>
<button onclick="goFullscreen('player'); return false">Click Me To Go Fullscreen! (For real)</button>
I've used this...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript">
function fullScreen(theURL) {
window.open(theURL, '', 'fullscreen=yes, scrollbars=auto');
}
// End -->
</script>
</head>
<body>
<h1 style="text-align: center;">
Open In Full Screen
</h1>
<div style="text-align: center;"><br>
<a href="javascript:void(0);" onclick="fullScreen('http://google.com');">
Open Full Screen Window
</a>
</div>
</body>
</html>
Create Function
function toggleFullScreen() {
if ((document.fullScreenElement && document.fullScreenElement !== null) ||
(!document.mozFullScreen && !document.webkitIsFullScreen)) {
$scope.topMenuData.showSmall = true;
if (document.documentElement.requestFullScreen) {
document.documentElement.requestFullScreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullScreen) {
document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
$scope.topMenuData.showSmall = false;
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}
In Html Put Code like
<ul class="unstyled-list fg-white">
<li class="place-right" data-ng-if="!topMenuData.showSmall" data-ng-click="toggleFullScreen()">Full Screen</li>
<li class="place-right" data-ng-if="topMenuData.showSmall" data-ng-click="toggleFullScreen()">Back</li>
</ul>
Try screenfull.js. It's a nice cross-browser solution that should work for Opera browser as well.
Simple wrapper for cross-browser usage of the JavaScript Fullscreen API, which lets you bring the page or any element into fullscreen. Smoothens out the browser implementation differences, so you don't have to.
Demo.
This function work like a charm
function toggle_full_screen()
{
if ((document.fullScreenElement && document.fullScreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen))
{
if (document.documentElement.requestFullScreen){
document.documentElement.requestFullScreen();
}
else if (document.documentElement.mozRequestFullScreen){ /* Firefox */
document.documentElement.mozRequestFullScreen();
}
else if (document.documentElement.webkitRequestFullScreen){ /* Chrome, Safari & Opera */
document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
else if (document.msRequestFullscreen){ /* IE/Edge */
document.documentElement.msRequestFullscreen();
}
}
else
{
if (document.cancelFullScreen){
document.cancelFullScreen();
}
else if (document.mozCancelFullScreen){ /* Firefox */
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen){ /* Chrome, Safari and Opera */
document.webkitCancelFullScreen();
}
else if (document.msExitFullscreen){ /* IE/Edge */
document.msExitFullscreen();
}
}
}
To use it just call:
toggle_full_screen();
Luckily for unsuspecting web users this cannot be done with just javascript. You would need to write browser specific plugins, if they didn't already exist, and then somehow get people to download them. The closest you can get is a maximized window with no tool or navigation bars but users will still be able to see the url.
window.open('http://www.web-page.com', 'title' , 'type=fullWindow, fullscreen, scrollbars=yes');">
This is generally considered bad practice though as it removes a lot of browser functionality from the user.
Now that the full screen APIs are more widespread and appear to be maturing, why not try Screenfull.js? I used it for the first time yesterday and today our app goes truly full screen in (almost) all browsers!
Be sure to couple it with the :fullscreen pseudo-class in CSS. See https://www.sitepoint.com/use-html5-full-screen-api/ for more.
This may support
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default5.aspx.cs" Inherits="PRODUCTION_Default5" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function max()
{
window.open("", "_self", "fullscreen=yes, scrollbars=auto");
}
</script>
</head>
<body onload="max()">
<form id="form1" runat="server">
<div>
This is Test Page
</div>
</form>
</body>
</html>
Can you Try:
<script type="text/javascript">
function go_full_screen(){
var elem = document.documentElement;
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
}
</script>
Full Screen / Compress Screen
This will works to show your window in full screen
Note: For this to work, you need Query from http://code.jquery.com/jquery-2.1.1.min.js
Or make have javascript link like this.
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<div id="demo-element">
<span>Full Screen Mode Disabled</span>
<button id="go-button">Enable Full Screen</button>
</div>
<script>
function GoInFullscreen(element) {
if(element.requestFullscreen)
element.requestFullscreen();
else if(element.mozRequestFullScreen)
element.mozRequestFullScreen();
else if(element.webkitRequestFullscreen)
element.webkitRequestFullscreen();
else if(element.msRequestFullscreen)
element.msRequestFullscreen();
}
function GoOutFullscreen() {
if(document.exitFullscreen)
document.exitFullscreen();
else if(document.mozCancelFullScreen)
document.mozCancelFullScreen();
else if(document.webkitExitFullscreen)
document.webkitExitFullscreen();
else if(document.msExitFullscreen)
document.msExitFullscreen();
}
function IsFullScreenCurrently() {
var full_screen_element = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || null;
if(full_screen_element === null)
return false;
else
return true;
}
$("#go-button").on('click', function() {
if(IsFullScreenCurrently())
GoOutFullscreen();
else
GoInFullscreen($("#demo-element").get(0));
});
$(document).on('fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange', function() {
if(IsFullScreenCurrently()) {
$("#demo-element span").text('Full Screen Mode Enabled');
$("#go-button").text('Disable Full Screen');
}
else {
$("#demo-element span").text('Full Screen Mode Disabled');
$("#go-button").text('Enable Full Screen');
}
});</script>
Try this script
<script language="JavaScript">
function fullScreen(theURL) {
window.open(theURL, '', 'fullscreen=yes, scrollbars=auto' );
}
</script>
For calling from script use this code,
window.fullScreen('fullscreen.jsp');
or with hyperlink use this
<a href="javascript:void(0);" onclick="fullScreen('fullscreen.jsp');">
Open in Full Screen Window</a>
In Firefox 10, you can make the current page go fullscreen (real fullscreen with no window chrome) using this javascript:
window.fullScreen = true;
A Q&D way to go full screen, if you are in a "kiosk" situation, is to feed an F11 to the browser window after it's up and running. This is not pretty starting up and the user might be able to poke a touch screen at the top and get a semi-full-screen view, but feeding the F11 might do in a pinch or just to get started on a project.
Here is my full solution for Full Screen and Exit Full Screen both (many thanks to help from tower's answer above):
$(document).ready(function(){
$.is_fs = false;
$.requestFullScreen = function(calr)
{
var element = document.body;
// Supports most browsers and their versions.
var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
if (requestMethod) { // Native full screen.
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
$.is_fs = true;
$(calr).val('Exit Full Screen');
}
$.cancel_fs = function(calr)
{
var element = document; //and NOT document.body!!
var requestMethod = element.exitFullScreen || element.mozCancelFullScreen || element.webkitExitFullScreen || element.mozExitFullScreen || element.msExitFullScreen || element.webkitCancelFullScreen;
if (requestMethod) { // Native full screen.
requestMethod.call(element);
} else if (typeof window.ActiveXObject !== "undefined") { // Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
$(calr).val('Full Screen');
$.is_fs = false;
}
$.toggleFS = function(calr)
{
$.is_fs == true? $.cancel_fs(calr):$.requestFullScreen(calr);
}
});
//
CALLING:
<input type="button" value="Full Screen" onclick="$.toggleFS(this);" />
function fs(){plr.requestFullscreen();document.exitFullscreen()}; or function fs(){(plr.offsetWidth==360)?plr.requestFullscreen():document.exitFullscreen()}
<!DOCTYPE html><html><head>
<style>
body{background:#000}
#plr{position:relative;background:#fff;width:360px}
#vd{width:100%;background:grey}
button{width:48px;height:48px;border:0;background:grey}
</style>
</head><body>
<div id="plr">
<video id="vd" src="video.mp4"></video>
<button onclick="(plr.offsetWidth==360)?plr.requestFullscreen():document.exitFullscreen()">fs</button>
<button onclick="plr.requestFullscreen();document.exitFullscreen()">fs2</button>
</div>
</body></html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Fullscreen with JavaScript</h2>
<p>Click on the button to open the video in fullscreen mode.</p>
<button onclick="openFullscreen();">Open Video in Fullscreen Mode</button>
<p><strong>Tip:</strong> Press the "Esc" key to exit full screen.</p>
<video width="100%" controls id="myvideo">
<source src="rain.mp4" type="video/mp4">
<source src="rain.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<script>
var elem = document.getElementById("myvideo");
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
}
}
</script>
<p>Note: Internet Explorer 10 and earlier versions do not support the msRequestFullscreen() method.</p>
</body>
</html>
Source:https://www.w3schools.com/howto/howto_js_fullscreen.asp

JavaScript non selectable text not working in Chrome/Internet Explorer

In Firefox seems fine, Chrome and Internet Explorer the text is still selectable, is there any way around this? The code was taken from another question, (which I can't find right now) so it may be out of date?
// Prevent selection
function disableSelection(target) {
if (typeof target.onselectstart != "undefined") // Internet Explorer route
target.onselectstart = function() { return false }
else if (typeof target.style.MozUserSelect != "undefined") // Firefox route
target.style.MozUserSelect = "none"
else // All other routes (for example, Opera)
target.onmousedown = function() { return false }
}
Used in code as:
disableSelection(document.getElementById("gBar"));
For webkit use khtmlUserSelect instead of MozUserSelect .
In opera and MSIE you may set the unselectable-property to "On"
As the both styles related to gecko/webkit are CSS, you can use a class to apply it:
<script type="text/javascript">
<!--
function disableSelection(target)
{
target.className='unselectable';
target.setAttribute('unselectable','on');
}
//-->
</script>
<style type="text/css">
<!--
.unselectable{
-moz-user-select:none;
-khtml-user-select: none;
}
-->
</style>
Note: unselectable will not pass on child-elements, so if you have there anything else than textNodes inside target, you need the workaround you already have there for MSIE/opera.
all of the above examples is too complicated.. based on the browser version.
I got simle solution ... works for all browsers!
// you can select here which html element you allow to be selected
var ExcludeElems = ["INPUT","SELECT","OPTION"]
function disableSelection (target) {
// For all browswers code will work .....
target.onmousedown = function (e)
{
var i;
var e = e ? e : window.event;
if (e)
for (i=0; i<ExcludeElems.length;i++)
if (e.target.nodeName == ExcludeElems[i] )
return true;
return false;
}
if you need you can make this function more complicated.
Use this code for any container element ...
disableSelection (document)
//disableSelection (document.body)
//disableSelection (divName) ....
For Wekbit (e.g. Chrome and Safari) you can add:
else if (typeof target.style.webkitUserSelect != "undefined") // Webkit route
target.style.webkitUserSelect = "none";
For IE, use 'unselectable':
else if (typeof target.unselectable != "undefined") // IE route
target.unselectable = true;
Reference: http://help.dottoro.com/ljrlukea.php
Like the MozUserSelect styling in Firefox you can use -webkit-user-select: none for Webkit based browser (like Safari and Chrome).
I think that you can use -o-user-select: none in Opera. But I have not tested it.
// Prevent selection
function disableSelection(target) {
if (typeof target.onselectstart != "undefined") //IE route
target.onselectstart = function() { return false }
else if (typeof target.style.userSelect != "undefined") //Some day in the future?
target.style.userSelect = "none"
else if (typeof target.style.webkitUserSelect != "undefined") //Webkit route
target.style.webkitUserSelect = "none"
else if (typeof target.style.MozUserSelect != "undefined") //Firefox route
target.style.MozUserSelect = "none"
else //All other route (ie: Opera)
target.onmousedown = function() { return false }
}
For IE, maybe this can help you: http://msdn.microsoft.com/en-us/library/ms534706(VS.85).aspx

onchange / onclick in a checkbox doesn't work in IE

I have the following code, which works perfectly in Chrome/FF:
chkbx_send_demo.onchange = function(){
if(sel_template.selectedIndex <= 0 && chkbx_send_demo.checked == true){
alert("Choose a Template");
sel_template.selectedIndex = 1;
}
if(chkbx_send_demo.checked == false){
sel_template.selectedIndex = 0;
}
}
But it just won't work in IE. I've tried to change the event to chkbx_send_demo.onclick and it still won't work.
Internet Explorer only fires the onchange event when the checkbox loses the focus (onblur).
also see here:
http://krijnhoetmer.nl/stuff/javascript/checkbox-onchange/
and here:
http://bytes.com/topic/javascript/answers/92116-onchange-checkbox
i faced the same issue on ie8, i used below trick to fix it.
http://sleeplesscoding.blogspot.com/2010/01/fixing-ie-onchange-event-for-checkboxes.html
Are you sure onclick does not work? Did you check for javascript errors?
The following works in IE7 (don't have IE6 to test)
<html>
<head>
<script>
function text()
{
alert(document.getElementById("cbxTest").checked);
}
</script>
</head>
<body>
<input type="checkbox" name="cbxTest" id="cbxTest" onclick="text()"/>
<label for="cbxTest"> Test </label>
</body>
</html>
Note: This is only for onclick. OnChange works differently in IE, see GOsha's answer.
my JS code is now something like this:
if(navigator.appName == "Microsoft Internet Explorer"){
alert("IE");
chkbx_send_demo.onclick = function(){
alert("HI");
if(sel_template.selectedIndex <= 0 && chkbx_send_demo.checked == true){
alert("Choose a Template");
sel_template.selectedIndex = 1;
}
if(chkbx_send_demo.checked == false){
alert("HI");
sel_template.selectedIndex = 0;
}
alert("HI");
}
}
else
{
chkbx_send_demo.onchange = function(){
if(sel_template.selectedIndex <= 0 && chkbx_send_demo.checked == true){
alert("Choose a Template");
sel_template.selectedIndex = 1;
}
if(chkbx_send_demo.checked == false){
sel_template.selectedIndex = 0;
}
}
}
No javascript errors, but the code just isn't executed on IE and i really can't understand why.

Categories

Resources