How to detect with javascript or jquery when user turns iPad from vertical position to horizontal or from horizontal to vertical?
Try
$(window).bind('orientationchange', function(event) {
alert('new orientation:' + event.orientation);
});
You can detect the orientation change event using the following code:
jQuery:
$(document).ready(function() {
$(window).on('orientationchange', function(event) {
console.log(orientation);
});
});
Check if device is in portrait mode
function isPortrait() {
return window.innerHeight > window.innerWidth;
}
In Javascript:
<button onclick="detectIPadOrientation();">What's my Orientation?</button>
<script type="text/javascript">
window.onorientationchange = detectIPadOrientation;
function detectIPadOrientation () {
if ( orientation == 0 ) {
alert ('Portrait Mode, Home Button bottom');
}
else if ( orientation == 90 ) {
alert ('Landscape Mode, Home Button right');
}
else if ( orientation == -90 ) {
alert ('Landscape Mode, Home Button left');
}
else if ( orientation == 180 ) {
alert ('Portrait Mode, Home Button top');
}
}
</script>
Or for including additional stylesheets:
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
Both taken from: http://favo.asia/2010/07/detecting-ipad-orientation-using-javascript/ which, FYI, was the first result on Google for 'detect ipad orientation javascript'...
function detectIPadOrientation (orientation) {
if ( orientation == 0 ) {
alert ('Portrait Mode, Home Button bottom');
}
else if ( orientation == 90 ) {
alert ('Landscape Mode, Home Button right');
}
else if ( orientation == -90 ) {
alert ('Landscape Mode, Home Button left');
}
else if ( orientation == 180 ) {
alert ('Portrait Mode, Home Button top');
}
}
window.onorientationchange = detectIPadOrientation;
Related
I want to used on JH Image Popup. - https://joomla-handbuch.com/en/downloads/jh-image-popup
I have check on IF conditions image popup was not loading in our Mobile Devices.
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
}else{
}
How to check PHP code using on Javascirpt?
$doc->addScript('colorbox-min.js');
$doc->addStyleSheet('colorbox.min.css');
And This file was not execute in mobile devices.?
Maybe you can check if a device is touchable or not:
function is_touch_enabled() {
return ( 'ontouchstart' in window ) ||
( navigator.maxTouchPoints > 0 ) ||
( navigator.msMaxTouchPoints > 0 );
}
if(is_touch_enabled()){
//Your code
}else{
//Your code
}
I am doing a project on an online examination site. I wanted to make the title bar, minimize button and windows taskbar of the browser invisible when a candidate is clicking to attend the exam. Does anyone know how to do this ?
This can work for Firefox, Google Chrome, Safari, Opera, and IE 11+.
The below code is implemented using fullscreen API. It also toggle the fullscreen using user interaction. You can also detect the current status of fullscreen.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script language="javascript" type="text/javascript">
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
document.addEventListener("fullscreenchange", function () {
fullscreenState.innerHTML = (document.fullscreen)? "on" : "not ";
}, false);
document.addEventListener("mozfullscreenchange", function () {
fullscreenState.innerHTML = (document.mozFullScreen)? "on" : "not ";
}, false);
document.addEventListener("webkitfullscreenchange", function () {
fullscreenState.innerHTML = (document.webkitIsFullScreen)? "on" : "not ";
}, false);
document.addEventListener("msfullscreenchange", function () {
fullscreenState.innerHTML = (document.msFullscreenElement)? "on" : "not ";
}, false);
</script>
</head>
<body>
<a href="javascript:void(0);" onclick="toggleFullScreen();">
Open in Full Screen Window</a>
<p>Fullscreen state: I'm <b id="fullscreenState"> not </b> fullscreen</p>
</body>
</html>
As you are using this for online examination follow below steps
as by default status is 'no fullscreen'.
After making page to fullscreen start tracking user interaction with browser fullscreen using this status. If user changes back to normal, then discard user from giving exam/make as malpractice, etc.
All you have to do is check the request_access for fullscreen.
ref:- https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
dropdown list is misaligned when I rotate the device. I want the dropdown list is align on the select tag. I used javascript to close or blur the dropdown list when rotate but the browser crashed. Is there a work around on this? Below is the code that I'm using for the orientation detection.
$(document).ready(function(){
var winWidth = $(window).width();
if(winWidth <= 768) {
detectOrientation();
window.onorientationchange = detectOrientation;
function detectOrientation(){
if (typeof window.onorientationchange != 'undefined'){
if ( orientation == 0 ) {
//Do Something In Portrait Mode
}
else if ( orientation == 90 ) {
//Do Something In Landscape Mode
}
else if ( orientation == -90 ) {
//Do Something In Landscape Mode
}
else if ( orientation == 180 ) {
//Do Something In Portrait Mode
}
}
}
}
else {
alert("not passed");
}
});
I am building a web application and I’m want to our web application open on fullscreen in browser by default
I want, as our application run on browser at the same time it will open in full screen mode.
I’m getting output on button click but this is not working on onload event of body.
Javascript Code:
<script>
function show() {
var elem = document.body;
if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) {
if (elem.requestFullScreen) {
elem.requestFullScreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullScreen) {
elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
}
</script>
HTML Code:
This is working
<input type="button" value="click to toggle fullscreen" onclick="show()">
But this is not working
<body onload="show()">
Please help me how can I achieve this.
Thanks.
It's not allowed to start the full screen mode without any user-interaction.
FullScreen mode requires user interaction. When a user fires any event (i.e. click, keypress, keydown) then your window can go to fullscreen.
If you have that option that you'll be able to manage that interaction then you can go with jQuery fullScreen plugin
Try this way : [Using user interaction]
<html>
<head>
<meta charset="UTF-8" />
<title>Test iframe</title>
// load jQuery
<script src="./jquery-fullscreen-plugin-master/jquery-2.1.1.js"></script>
// load jquery fullscreen plugin
<script src="./jquery-fullscreen-plugin-master/jquery.fullscreen-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#fullscreenButton").on("click", function(){
$("body").fullScreen(true);
});
});
</script>
</head>
<body style="background:white">
<button id="fullscreenButton">Go to FullScreen Mode</button>
</body>
</html>
There's another way which is close to your scenario. But for that you have to let malicious script (auto fullscreen in your case) allowed in your browser.
javaScript :
var height = window.screen.availHeight;
var width = window.screen.availWidth;
for(var i = 0; i < 2; i++){
window.open ("http://www.google.com/","","fullscreen=yes, width=" + width + ", height=" + height + "");
}
The following script will open new window in fullscreen mode. But first time it'll as for your permission to allow popups from your site. If you allow those it'll always execute next time until it is blocked again.
So what is happening here is you are getting the resolution of your device and open the window with the appropriate height and width.
jsFiddle - window.open()
I am trying to run some code when the browser back button is clicked.
How can i found out browser's back button with out changing the browser history?
I tried the code below.
I got an exception in the else block saying: "event is not defined".
window.onunload = HandleBackFunctionality();
function HandleBackFunctionality()
{
if(window.event)
{
if(window.event.clientX < 40 && window.event.clientY < 0)
{
alert("Browser back button is clicked…");
} else {
alert("Browser refresh button is clicked…");
}
} else {
if(event.currentTarget.performance.navigation.type == 1)
{
alert("Browser refresh button is clicked…");
}
if(event.currentTarget.performance.navigation.type == 2)
{
alert("Browser back button is clicked…");
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
use
$(window).on("navigate", function (event, data) {
var direction = data.state.direction;
if (direction == 'back') {
// do something
}
if (direction == 'forward') {
// do something else
}
});
Okay. Besides the fact that you should not initially trigger the event and to .unload = FunctionName and not .unload=FunctionName() and that you need to pass the event-argument I checked the code in the browser.
currentTarget is empty - this totally makes sense as there is no event-target like onclick but it is just the site reloading/unloading.
Please debug the code by yourself by using this and fit it to your needs:
window.onunload = HandleBackFunctionality;
function HandleBackFunctionality(event)
{
console.log(event, window.event);
}
You will see that currentTarget is not set (while event is).
This is the only solution that works for me with IOS safari.
<script>
window.addEventListener( "pageshow", function ( event ) {
var pagehistory = event.persisted ||
( typeof window.performance != "undefined" &&
window.performance.navigation.type === 2 );
if ( pagehistory ) {
// back button event - Do whatever.
}
});
</script>