How to change to Fullscreen the entire webpage with confirm()? - javascript

I want that when click in "OK" in the confirm box the entire webpage go to fullscreen, but with this only get error TypeError: docelem.requestFullscreen is not a function. I tried of all but nothing...
var conf = confirm("Fullscreen mode?");
var docelem = document.documentElement;
if (conf == true) {
docelem.requestFullscreen();
}
else if (conf == true) {
docelem.mozRequestFullScreen();
}
else if (conf == true) {
docelem.webkitRequestFullScreen();
}
else if (conf == true) {
docelem.msRequestFullscreen();
}
Some solution? or is it not possible with confirm()? Because with a button works:
(function () {
var fullscreenon = document.getElementById("fullscreenbutton");//button Id
if (fullscreenon) {
fullscreenon.addEventListener("click", function () {
var docelem = document.documentElement;
if (docelem.requestFullscreen) {
docelem.requestFullscreen();
}
else if (docelem.msRequestFullscreen) {
docelem.msRequestFullscreen();
}
else if (docelem.mozRequestFullScreen) {
docelem.mozRequestFullScreen();
}
else if (docelem.webkitRequestFullScreen) {
docelem.webkitRequestFullScreen();
}
}, false);
}
})();

Firsty, your conditions are different between 2 samples. Right code is:
var conf = confirm("Fullscreen mode?");
var docelem = document.documentElement;
if (conf == true) {
if (docelem.requestFullscreen) {
docelem.requestFullscreen();
}
else if (docelem.mozRequestFullScreen) {
docelem.mozRequestFullScreen();
}
else if (docelem.webkitRequestFullscreen) {
docelem.webkitRequestFullscreen();
}
else if (docelem.msRequestFullscreen) {
docelem.msRequestFullscreen();
}
}
Secondly and importantly, you can't make fullscreen your page without a user interaction. This is a security restriction. If you trigger code above by a user click, it'll be work. For example:
document.onclick = function (argument) {
var conf = confirm("Fullscreen mode?");
var docelem = document.documentElement;
if (conf == true) {
if (docelem.requestFullscreen) {
docelem.requestFullscreen();
}
else if (docelem.mozRequestFullScreen) {
docelem.mozRequestFullScreen();
}
else if (docelem.webkitRequestFullScreen) {
docelem.webkitRequestFullScreen();
}
else if (docelem.msRequestFullscreen) {
docelem.msRequestFullscreen();
}
}
}
If you click anywhere on the page, fullscreen mode will be activated. More detail: https://stackoverflow.com/a/20533579/198062

Related

Skip page timer with tampermonkey

My knowledge is limited, so I'm just praying y'all will enlighten me who knows bare minimum of JS. I want to bypass a timer that makes it unable to go to the next page (I need 35s every single time and that's a lot considering some lessons have over 200 slides). How do I write a script for tampermonkey to make it show the link to the next page instantly?
// Obsługa przycisku Dalej
function goNext(vIsExam) {
// Przycisk nieaktywny - blokada przejścia
if (document.getElementById("pNext").rel != 'enabled') return false;
if (vIsExam==1) {
} else {
location.href='../sql/MemSql.php?pRun=MemCourseGoNext&pCourseResultId=262261&pCourseLessonId=227436';
}
} // function
// Aktywacja przycisku Dalej
function waitNextLesson(vTimeLeft, vTimer) {
setCookie('cLessonTime',vTimeLeft);
if (vTimeLeft > 0) {
document.getElementById('pNext').rel = 'disabled';
document.getElementById('pNextDiv').className = 'CourseInactive';
if (vTimer == 0) {
document.getElementById('pNextIcon').className = 'FontAwesome';
document.getElementById('pNextIcon').innerHTML = vTimeLeft;
} else {
document.getElementById('pNextIcon').className = 'FontAwesome';
document.getElementById('pNextIcon').className = 'FontAwesome FontAwesomeArrowRight';
}
document.getElementById('pNextName').innerHTML = 'CZEKAJ';
vTimeLeft = vTimeLeft - 1;
setTimeout("waitNextLesson("+vTimeLeft+","+vTimer+")",1000);
} else {
document.getElementById('pNext').rel = 'enabled';
document.getElementById('pNextDiv').className = '';
document.getElementById('pNextIcon').className = 'FontAwesome FontAwesomeArrowRight';
document.getElementById('pNextIcon').innerHTML = '';
document.getElementById('pNextName').innerHTML = 'NASTĘPNY SLAJD';
if (document.getElementById('iLessonAutoPlay').checked == true) document.getElementById('pNext').click();
}
} // function
// Obsługa LessonAutoPlay
function jLessonAutoPlay(e) {
setCookie('LessonAutoPlay', document.getElementById('iLessonAutoPlay').checked);
jStopPropagation(e);
} // function
//if (getCookie('LessonAutoPlay') == 'true') document.getElementById('iLessonAutoPlay').checked = true;
// Obsługa skrótów klawiaturowych (strzałka [<] i [>])
$("body").keyup(function(oEvent){
// Sprawdzenie czy można obsługiwać skróty
if (document.getElementById('DIALOG').style.display == 'none' && document.getElementById('LOADER').style.display == 'none') {
// Klawisz [<]
if (oEvent.keyCode == 37) {
document.getElementById("pPrev").click();
}
// Klawisz [>]
if (oEvent.keyCode == 39) {
if (document.getElementById("pNext").rel == 'enabled') {
document.getElementById("pNext").click();
}
}
}
});

Set button state - Create.js/Easel.js

In Adobe Animate HTML5 Canvas (Create.js/Easel.js), I am trying to set the state of a button, but not working with various code:
this.retinoscopeButton.addEventListener("click", retinoscope.bind(this));
/*function retinoscope(evt) {
var retinoscopeButtonState = evt.currentTarget.state = !evt.currentTarget.state;
if (retinoscopeButtonState) {
alert(retinoscopeButtonState);
this.retinoscopeButton.upState = this.retinoscopeButton.downState;
} else {
this.retinoscopeButton.downState = this.retinoscopeButton.upState;
}
}*/
var retinoscopeButtonState = 'up';
function retinoscope(evt){
if (retinoscopeButtonState == 'up'){
this.retinoscopeButton.upState = this.retinoscopeButton.downState;
retinoscopeButtonState = 'down';
} else if (retinoscopeButtonState == 'down'){
this.retinoscopeButton.downState = this.retinoscopeButton.upState;
retinoscopeButtonState = 'up';
}
}
This works for me...
Note that this is using a MovieClip with three keyframes for the different 'states' in the button MC retinoscopeButton
var toggle;
if (!root.retinoscopeButton.hasEventListener("click")) {
toggle = false;
root.retinoscopeButton.addEventListener("click", retinoscopeButtonClickHandler.bind(this));
}
root.retinoscopeButton.addEventListener("mouseover", retinoscopeButtonRollOverHandler.bind(this));
root.retinoscopeButton.addEventListener("mouseout", retinoscopeButtonRollOutHandler.bind(this));
function retinoscopeButtonClickHandler() {
if (toggle == false) {
root.retinoscopeButton.gotoAndStop(2);
toggle = true;
} else if (toggle == true) {
root.retinoscopeButton.gotoAndStop(0);
toggle = false
}
}
function retinoscopeButtonRollOverHandler() {
if (toggle == false) {
root.retinoscopeButton.gotoAndStop(1);
}
}
function retinoscopeButtonRollOutHandler() {
if (toggle == false) {
root.retinoscopeButton.gotoAndStop(0);
}
}

Javascript function on url change of page

I have an html page (http://www.autoelettric.com/info/SafeConversionToLed.html) that when I click on button the status bar on top will change.
The site would be designed for easy navigation through the buttons, but if an user uses the scroll, the status bar is not updated. So I would like to know if can I do an event that updates the status bar on the change of url (httt.url.com # step1, httt.url.com # step2, httt.url.com # step3).
For example, my code now:
Script:
<script type = "text/javascript">
function status0()
{
document.getElementById("imgStausBar").src ="status0.png";
}
function status1()
{
document.getElementById("imgStausBar").src ="status1.png";
}
function status2()
{
document.getElementById("imgStausBar").src ="status2.png";
}
function status3()
{
document.getElementById("imgStausBar").src ="status3.png";
}
</script>
Html
<div class="btn-5" width="50px">↓ START</div>
<div class="btn-5" width="50px">→ YES</div>
<div class="btn-5-previous" width="50px">↩ PREVIOUS</div>
<div class="btn-5-top" width="10px">↑</div>
What I would do:
if current url is #SafeConversion do status0()
if current url is #FlasherUnit do status1()
if current url is #ExactPower do status2()
etc...
EDIT:
I added this, but it doesn't work.
if ("onhashchange" in window) { // event supported?
window.onhashchange = function () {
hashChanged(window.location.hash);
}
}
else {
var locationHash = window.location.hash;
window.setInterval(function () {
if(locationHash == "#SafeConversion") {
status0();
} else if(locationHash == "#FlasherUnit") {
status1();
} else if(locationHash == "#ExactPower") {
status2();
} else if(locationHash == "#ExactPower") {
status2();
} else if(locationHash == "#YourSolution") {
status3();
} else if(locationHash == "#YourSolution2") {
status3();
} else if(locationHash == "#YourSolution2/1") {
status3();
} else if(locationHash == "#YourSolution3") {
status3();
} else if(locationHash == "#YourSolution3/1") {
status3();
} else if(locationHash == "#YourSolution4") {
status3();
} else if(locationHash == "#Contact") {
status0();
}
}, 100);
}
Something like this should work:
<script type="text/javascript">
function hashChanged(locationHash) {
if(locationHash == "#SafeConversion") {
status0();
} else if(locationHash == "#FlasherUnit") {
status1();
} else if(locationHash == "#ExactPower") {
status2();
} else if(locationHash == "#ExactPower") {
status2();
} else if(locationHash == "#YourSolution") {
status3();
} else if(locationHash == "#YourSolution2") {
status3();
} else if(locationHash == "#YourSolution2/1") {
status3();
} else if(locationHash == "#YourSolution3") {
status3();
} else if(locationHash == "#YourSolution3/1") {
status3();
} else if(locationHash == "#YourSolution4") {
status3();
} else if(locationHash == "#Contact") {
status0();
}
}
if ("onhashchange" in window) { // event supported?
window.onhashchange = function () {
hashChanged(window.location.hash);
}
}
else { // event not supported:
var storedHash = window.location.hash;
window.setInterval(function () {
if (window.location.hash != storedHash) {
storedHash = window.location.hash;
hashChanged(storedHash);
}
}, 100);
}
</script>
If you mean the url, when you said status bar, i tried it and the status bar updated when i scroll-up or down.
use "window.location.hash"
var locationHash = window.location.hash;
if(locationHash == "#SafeConversion") {
status0();
} else if(locationHash == "#FlasherUnit") {
status1()
}
and so on....

Javascript - Toggle Element only works one way! Also help required for URL append

I am trying to use a toggle script to show and hide certain elements of a page... it works fine hiding the Table containing a list of links and showing the Table with the content inside, but using it to reverse this does not work at all!
<script type="text/javascript">
function getElement(iElementId)
{
if (document.all)
{
return document.all[iElementId];
}
if (document.getElementById)
{
return document.getElementById(iElementId);
}
}
function toggleElement(oElement)
{
if (oElement.style.display == "none")
{
oElement.style.display = "inline";
}
else if (oElement.style.display == "inline")
{
oElement.style.display = "none";
}
else
{
oElement.style.display = "none";
}
}
function OpenPage(name) {
// other function not relevant here //
toggleElement( getElement('MainTable'));
toggleElement( getElement('ContentTable'));
return false;
}
function Switchback(){
// document.getElementById(MainTable).style.display = "inline";
// document.getElementById('ContentTable').style.display = "none";
toggleElement( getElement('MainTable'));
toggleElement( getElement('ContentTable'));
return false;
}
</script>
Even just trying a "getElementByID" function doesn't work for the switching back to displaying the main table of links and hiding the content table... Any way to make it work? thanks.
(also, whilst we're at it, what is the best way to append a URL using Javascript/AJAX? as the page is presently forum/index.php but when a link to a forum is clicked I want the URL to append to forum/index.php?f= and then the relevant number)
<script type="text/javascript">
function getElement(iElementId)
{
if (document.all)
{
return document.all[iElementId];
}
if (document.getElementById)
{
return document.getElementById(iElementId);
}
}
function toggleElement(oElement)
{
if (oElement.style.display == "none")
{
oElement.style.display = "inline";
}
else if (oElement.style.display == "inline")
{
oElement.style.display = "none";
}
else
{
oElement.style.display = "none";
}
}
function OpenPage(name) {
// other function not relevant here //
toggleElement( getElement('MainTable'));
toggleElement( getElement('ContentTable'));
return false;
}
function Switchback(){
// document.getElementById(MainTable).style.display = "inline";
// document.getElementById('ContentTable').style.display = "none";
toggleElement( getElement('MainTable'));
toggleElement( getElement('ContentTable'));
return false;
}
</script>

ajax hidding div problem in IE

I have a javascript page which checks an email and username, this works fine in every browser but Internet Explorer. The div box where errors are shown should be hidden unless an error is given e.g. username taken or invalid email.
If the email gets an error this is shown in the div tag, but doesnt work for username (in all browsers)
below is my code:
<script type="text/javascript">
var usernameok;
var emailok;
function checksubmit()
{
if (usernameok && emailok) {
document.getElementById("button").disabled = false;
} else {
document.getElementById("button").disabled = true;
}
}
function username(username)
{
make_request();
function stateck()
{
if (httpxml.readyState == 4) {
if (httpxml.responseText.indexOf("Username Ok") >= 0) {
usernameok = true;
} else {
usernameok = false;
}
checkCanSubmit();
}
}
httpxml.onreadystatechange = stateck;
user_url = "check_username.php?username=" + username.value;
httpxml.open("GET", user_url, true);
httpxml.send(null);
}
function email(email)
{
make_request();
function stateck()
{
if (httpxml.readyState == 4) {
if (httpxml.responseText.indexOf("Email Ok") >= 0) {
emailok = true;
} else {
emailok = false;
}
checkCanSubmit();
}
}
httpxml.onreadystatechange = stateck;
email_url = "check_email.php?email=" + email.value;
httpxml.open("GET", email_url, true);
httpxml.send(null);
}
</script>
I see your function stateck() is the return function from the HTTP request. However, you are defining it within another function. Not as an anonymous function, but just as a function within another function.
I see what you're doing now...ok, try this instead:
httpxml.onreadystatechange = function()
{
if (httpxml.readyState == 4) {
if (httpxml.responseText.indexOf("Email Ok") >= 0) {
document.getElementById("email").style.backgroundColor = "green";
document.getElementById("email").style.color = "white";
document.getElementById("email_div").style.display = 'none';
emailok = true;
} else {
document.getElementById("email").style.backgroundColor = "red";
document.getElementById("email_div").innerHTML=httpxml.responseText;
emailok = false;
}
checkCanSubmit();
}
};
Do you need to set your initial state to display: none? I think IE may initialize the divs with a non-0 height whereas the divs may be technically visible in other browsers but too short to see.
Edit:
Okay I think I misunderstood your question. Your problem is not with hiding the divs but with displaying errors for the username.
Nothing obvious jumps out at me. Try stepping through the code using VS or VWDE:
http://www.berniecode.com/blog/2007/03/08/how-to-debug-javascript-with-visual-web-developer-express/

Categories