Using this Code we will get Fullscreen functionality in google chrome
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Baby's First Years - The first years of my life!</title>
<script type="text/javascript">
function validate() {
document.getElementById('username').innerHTML = "";
document.getElementById('password').innerHTML = "";
var user = document.forms["login"]["usersView.username"].value;
var pass = document.forms["login"]["usersView.password"].value;
if (user == null || user == "") {
document.getElementById('username').innerHTML = "Username not be empty.";
}
if (pass == null || pass == "") {
document.getElementById('password').innerHTML = "Password not be empty.";
}
if (user == null || user == "" || pass == null || pass == "") {
return false;
} else {
return true;
}
}
</script>
</head>
<body>
<div id="specialstuff">
<div id="babys_wrapper">
<div id="babys_header">
<!-- end of babys_menu -->
<div class="cleaner"></div>
</div>
<!-- end of babys header -->
<div id="babys_middle">
<div id="mid_title"></div>
<form method="post" action="http://asmansoft.com" name="login">
<table>
<tr>
<th scope="row" align="left"><label>Username</label></th>
<th scope="row">:</th>
<td><div id="username" style="color: red"></div> <input
type="text" name="usersView.username" id="username" /></td>
</tr>
<tr>
<th scope="row" align="left"><label>Password</label></th>
<th scope="row">:</th>
<td><div id="password" style="color: red"></div> <input
type="password" name="usersView.password" id="password" /></td>
</tr>
<tr>
<th scope="row" align="center"></th>
<th scope="row"></th>
<td align="center"><input type="submit" value="login"
class="button" onclick="return validate()" id="fsbutton" /></td>
</tr>
</table>
</form>
<p>Status: <span id="fsstatus"></span>
</div>
<!-- end of middle -->
<div style="height: 200px;"></div>
<!-- end of main -->
</div>
<!-- wrapper -->
</div>
</div>
<script>
/*
Native FullScreen JavaScript API
-------------
Assumes Mozilla naming conventions instead of W3C for now
*/
(function() {
var
fullScreenApi = {
supportsFullScreen: false,
isFullScreen: function() { return false; },
requestFullScreen: function() {},
cancelFullScreen: function() {},
fullScreenEventName: '',
prefix: ''
},
browserPrefixes = 'webkit moz o ms khtml'.split(' ');
// check for native support
if (typeof document.cancelFullScreen != 'undefined') {
fullScreenApi.supportsFullScreen = true;
} else {
// check for fullscreen support by vendor prefix
for (var i = 0, il = browserPrefixes.length; i < il; i++ ) {
fullScreenApi.prefix = browserPrefixes[i];
if (typeof document[fullScreenApi.prefix + 'CancelFullScreen' ] != 'undefined' ) {
fullScreenApi.supportsFullScreen = true;
break;
}
}
}
// update methods to do something useful
if (fullScreenApi.supportsFullScreen) {
alert("supported");
fullScreenApi.fullScreenEventName = fullScreenApi.prefix + 'fullscreenchange';
fullScreenApi.isFullScreen = function() {
switch (this.prefix) {
case '':
return document.fullScreen;
case 'webkit':
return document.webkitIsFullScreen;
default:
return document[this.prefix + 'FullScreen'];
}
}
fullScreenApi.requestFullScreen = function(el) {
return (this.prefix === '') ? el.requestFullScreen() : el[this.prefix + 'RequestFullScreen']();
}
fullScreenApi.cancelFullScreen = function(el) {
return (this.prefix === '') ? document.cancelFullScreen() : document[this.prefix + 'CancelFullScreen']();
}
}
// jQuery plugin
if (typeof jQuery != 'undefined') {
jQuery.fn.requestFullScreen = function() {
return this.each(function() {
var el = jQuery(this);
if (fullScreenApi.supportsFullScreen) {
fullScreenApi.requestFullScreen(el);
}
});
};
}
// export api
window.fullScreenApi = fullScreenApi;
})();
</script>
<script>
// do something interesting with fullscreen support
var fsButton = document.getElementById('fsbutton'),
fsElement = document.getElementById('specialstuff'),
fsStatus = document.getElementById('fsstatus');
if (window.fullScreenApi.supportsFullScreen) {
fsStatus.innerHTML = 'YES: Your browser supports FullScreen';
fsStatus.className = 'fullScreenSupported';
// handle button click
/*window.addEventListener('load', function() {
alert("hai");
window.fullScreenApi.requestFullScreen(document);
}, true);*/
fsButton.addEventListener('click', function() {
window.fullScreenApi.requestFullScreen(fsElement);
}, true);
fsElement.addEventListener(fullScreenApi.fullScreenEventName, function() {
if (fullScreenApi.isFullScreen()) {
fsStatus.innerHTML = 'Whoa, you went fullscreen';
} else {
fsStatus.innerHTML = 'Back to normal';
}
}, true);
} else {
fsStatus.innerHTML = 'SORRY: Your browser does not support FullScreen';
}
</script>
</body>
</html>
No comments:
Post a Comment