I am trying to activate full screen mode using Javascript but it is not working.
Please note that console logs inside the function (on line 4 and 11) are printing correct values but full screen mode is not appearing.
what might be the issue? Here's my code.
function fullscreen()
{
var _element = document.getElementById('BookMainDiv');
console.log(_element);
if (_element.mozRequestFullScreen)
{
_element.mozRequestFullScreen();
}
else if(_element.webkitRequestFullScreen)
{
console.log("aaa");
_element.webkitRequestFullScreen();
}
}
HTML
<body>
<div id="BookMainDiv" style="width:500px;height:500px;background-color:yellow">
</div>
<input type="button" style="height:20%;width:20%" onclick="fullscreen()">
</body>
p.s. I am using chrome 31 on windows 8
This should work..
<html>
<head>
<script>
function fullscreen()
{
var fullscrn = document.getElementById("BookMainDiv");
req= fullscrn.requestFullScreen || fullscrn.webkitRequestFullScreen || fullscrn.mozRequestFullScreen;
req.call(fullscrn);
}
</script>
</head>
<body>
<div id="BookMainDiv" style="width:500px;height:500px;background-color:yellow">
</div>
<input type="button" style="height:20%;width:20%" onclick="fullscreen()">
</body>
</html>
P.S:Your code is working fine in my system , (yes, browser is chrome itself)
It happens that the requesFullScreen (webkitRequestFullScreen) does not work in Chrome when developper tools are open and you have break points in the javascript!
Close it and you will see it will work!
----------------------------- EDITED ------------------
Be sure your document declaration is this one:
<!DOCTYPE html>
And try this code :
function FullScreen() {
var element = document.getElementById("BookMainDiv");
if (element.requestFullScreen) {
element.requestFullScreen();
}
if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
}
Related
In the Firefox extension, I want to implement a simple toggle switch that will enable/disable an extension. A basic idea is that the change of state will be saved as a boolean into browser (sync) storage. The state should be read every time, so an extension will know if should work or not.
But - my Javascript knowledge is so poor that I came into trouble.
Here is simple HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<form id="form" class="ps-3 mt-3">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="flexSwitch">
<label class="form-check-label" for="flexSwitch">Plugin ON/OFF</label>
</div>
</form>
<label id="test"></label>
<br>
<script src="options.js"></script>
</body>
</html>
And here is a simple JS file:
function CheckAndSave()
{
var state = document.getElementById("flexSwitch");
if(state.checked)
{
document.getElementById('test').innerHTML = 'ON';
browser.storage.sync.set({ delovanje: 1 });
}
else
{
document.getElementById('test').innerHTML = 'OFF';
browser.storage.sync.set({ delovanje: 0 });
}
restoreState();
}
function restoreState()
{
//browser.storage.sync.get("delovanje", function(items) { console.log(items)});
let getting4 = browser.storage.sync.get("delovanje");
getting4.then(setCurrentChoice, onError);
function onError(error) {
console.log(`Error: ${error}`);
}
function setCurrentChoice()
{
var toggle = document.getElementsByName("flexSwitch");
if (result.delovanje === 1)
toggle.checked = true;
else
toggle.checked = false;
}
}
document.addEventListener("DOMContentLoaded", restoreState);
document.getElementById("flexSwitch").addEventListener('change', CheckAndSave);
What is wrong with my code? Is my way of saving Boolean ok?
I tried to write to the console for "debugging", but I don't know how to do it - this is a pop-up after a user press an icon, and nothing is shown in the console.
Most of all you did a mistake here:
function setCurrentChoice(result)
{
var toggle = document.getElementsByName("flexSwitch");
if (result.delovanje === 1)
toggle.checked = true;
else
toggle.checked = false;
}
In this case, toggle will be array like object, but not the element you expect.
You should use document.getElementById("flexSwitch") as previously.
Another issue that you missed an argument in the setCurrentChoice function. It should take settings like this:
function setCurrentChoice(result){...}
I would also suggest to hide the logic of getting element behind the scene by either wrapping it to the function:
const getToggle = () => document.getElementById("flexSwitch")
Or even move it to the separate class and encapsulate all logic there:
class Toggle {
constructor() {
this._el = document.getElementById("flexSwitch");
}
setCheck(value) {
this._el.checked = value;
}
}
Here is the working sample:
function CheckAndSave()
{
var state = document.getElementById("flexSwitch");
if(state.checked)
{
document.getElementById('test').innerHTML = 'ON';
chrome.storage.sync.set({ delovanje: 1 });
}
else
{
document.getElementById('test').innerHTML = 'OFF';
chrome.storage.sync.set({ delovanje: 0 });
}
}
function restoreState()
{
chrome.storage.sync.get("delovanje",setCurrentChoice );
function setCurrentChoice(result)
{
var toggle = document.getElementById("flexSwitch");
if (result.delovanje === 1)
toggle.checked = true;
else
toggle.checked = false;
}
}
document.addEventListener("DOMContentLoaded", restoreState);
document.getElementById("flexSwitch").addEventListener('change', CheckAndSave);
This approach will help you reduce the code and accidental mistakes.
P.S. Here is how I worked with the storage
The code seems okay, while there are some things I would change (for refactoring purposes to match my flavour) I think it should be working without much issue.
In any case verify the following.
The browser.storage.sync API is only available from extensions, so check that the HTML and JS that you are posting are actually part of the extension that you are using.
The manifest.json is what tells the browser what resources can your extension access, verify that you did add the "storage" permission on there here you can read more about it for chrome, though it will be the same for other browsers
For debugging purposes always remember that the browser lets you have great tools. Read more about developer tools, but as a starter I would tell you to open them and put a debugger statement there where you feel like there's something that isn't working as expected. And then with the console start looking for the properties that you are not finding.
To log items to the console use console.log('XXX') and it should show what you want
I think the problem is that the change event is not fired when setting toggle.checked with JavaScript. Just call CheckAndSave(); from the end of setCurrentChoice.
For some reason, this page won't go to the mobile or desktop page when I use it! Here is the code:
<html>
<head>
<title>Loading...</title>
</head>
<script>
window.onload = function() {
var iOS = ( navigator.userAgent.match(/iPad|iPhone|iPod/g) ? true : false );
if (iOS == true) {
window.location.href="http://m.lifewithzooza.x10host.com/";
} else {
window.location.href="http://lifewithzooza.x10host.com/wordpress/";
}
</script>
<body bgcolor="#FFFFFF">
Loading...
</body>
</html>
Sorry, this is my first time on Stack Overflow, so I'm not familiar with some stuff. Thanks.
You are missing the closing } for onload function. Update code to following.
window.onload = function() {
var iOS = ( navigator.userAgent.match(/iPad|iPhone|iPod/g) ? true : false );
if (iOS == true) {
window.location.href="http://m.lifewithzooza.x10host.com/";
} else {
window.location.href="http://lifewithzooza.x10host.com/wordpress/";
}
}
You have missing } . so its not working. You have missed } for the window.onload = function() { //your code goes here }
Please check running code here
window.onload = function() {
var iOS = ( navigator.userAgent.match(/iPad|iPhone|iPod/g) ? true : false );
if (iOS == true) {
window.location.href="http://m.lifewithzooza.x10host.com/";
} else {
window.location.href="http://lifewithzooza.x10host.com/wordpress/";
}
}
<html>
<head>
<title>Loading...</title>
</head>
<body bgcolor="#FFFFFF">
Loading...
</body>
</html>
2 problems:
You've put your script element in the wrong place, in the middle of nowhere. The script tag must be under body or head and nothing else. As said at W3: The SCRIPT element places a script within a document. This element may appear any number of times in the HEAD or BODY of an HTML document.
You also missed a } on your onload function:
<html>
<head>
<title>Loading...</title>
<script>
window.onload = function() {
var iOS = ( navigator.userAgent.match(/iPad|iPhone|iPod/g) ? true : false );
if (iOS) {
window.location.href="http://m.lifewithzooza.x10host.com/";
} else {
window.location.href="http://lifewithzooza.x10host.com/wordpress/";
}
}
</script>
</head>
<body bgcolor="#FFFFFF">
Loading...
</body>
</html>
I am trying to detect browser types and IE compatibility from user agent and redirect accordingly. It works only in IE but not in Firefox and Chrome. I am still looking around the solution and cannot figure out yet.
<html>
<head>
<title>Testing </title>
<script src="UserAgent.js" type="text/javascript"></script>
</head>
<body>
<div id="results">Output</div>
<script type="text/javascript">
if (UserAgent.firefox){
window.location.href("http://www.yahoo.com");
}
if (UserAgent.compatibilityMode) {
window.location.href("http://192.168.10.236/iecorrect.html");
} else {
window.location.href("http://www.apple.com");
}
</script>
</body>
</html>
UserAgent.js
if (typeof jQuery == 'undefined') {
document.write("\<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'>\<\/script>");
}
// Create new object
var UserAgent = {
init: function () {
// Get the user agent string
var ua = navigator.userAgent;
this.compatibilityMode = false;
this.firefox = ua.toLowerCase().indexOf("firefox") > -1;
this.chrome = ua.toLowerCase().indexOf("chrome") > -1
if (ua.indexOf("MSIE 7.0") > -1) {
this.compatibilityMode = true;
}
}
};
// Initialize the object
ieUserAgent.init();
Change your window.loacation.href calls to the below code:
if (UserAgent.compatibilityMode) {
window.location.href = "http://192.168.10.236/iecorrect.html";
} else {
window.location.href = "http://www.apple.com";
}
You wrote them like you would write jQuery :)
To check for IE and/or a specific version of IE you are better off using conditional statements.
http://www.quirksmode.org/css/condcom.html
I have been trying to get this exit pop to work. So far I can get it to work on a Mac in FF, Chrome and Safari, but struggling with IE, FF, Chrome for Windows. These are two snippets that I have tried so far:
<script language=javascript>
function thankYou(){
var win=window.open("[url.com]", "_blank", "left=20,top=20,width=500,height=500,scrollbars=1"); win.focus(); }
</script>
<body onUnload="thankYou()">
and
<SCRIPT>
function thankYou() {
var ConfirmStatus = confirm("We would love to receive your feedback on your experience of this page. Would you like to complete our short survey?");
if (ConfirmStatus == true) {
window.open("[url]", "win", "left=20,top=20,width=500,height=500,scrollbars=1");
} else {
window.close();
}
}
window.onunload=thankYou;
</SCRIPT>
Not sure how to get it functioning on Windows. Thanks in advance!
change:
<body onUnload="thankYou()">
to:
<body onBeforeUnload="thankYou()">
and....
change:
window.onunload=thankYou;
to:
window.onbeforeunload=thankYou;
How can you check to see if a pop-up is already open strictly by the original pop-up's name, and not URL, etc.
The pop-up is opened via window.open().
Keep the handle to the window:
var popup = window.open( URL, name, features )
So later you can check whether it's closed by using it's "closed" property.
if (popup.closed) {
// closed
}
else {
// still open
}
You can see it working here: http://www.javascripter.net/faq/windowclosed.htm
EDIT
You should be able to do just what Cheery said, but if you would like more detail, I tested this, and it works:
<html>
<head>
<script type="text/javascript">
var popup;
function openPopup() {
popup = window.open("http://www.stackoverflow.com", "so", "location=1,status=1,scrollbars=1,width=300,height=300");
}
</script>
</head>
<body>
<button onclick="openPopup()">open popup</button>
<button onclick="checkIfPopupIsOpen()">check for popup</button>
<script type="text/javascript">
function checkIfPopupIsOpen() {
if (popup.closed) {
alert("it's closed");
}
else {
alert("it's still open");
}
}
</script>
</body>
</html>