JavaScript/HTML5 FullScreen API - javascript

<div id="divbody">
<button id="begin">Click me</button>
<script>
$(document).ready(function() {
$("#begin").click(function() {
var e = document.getElementById('divbody');
e.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
});
document.addEventListener("webkitfullscreenchange",function(){
if (document.webkitIsFullScreen) {
//alert('a');
document.webkitCancelFullScreen();
}
}, false);
});
</script>
</div>
The following code basically should cancel full screen as soon as it enters. However, the code above does not work (e.g., it enters full screen but does not cancel back). However, by uncommenting the alert in the webkitfullscreenchange event handler, it does actually cancel.
I have hard time understanding why this is so. Also, how would I achieve what I am trying to do without using alert?
Thanks.
UPDATE
I have tried all the comments, but it does not seem to work. Any help on this would be greatly appreciated!

Questions like this where an alert() fixes a problem is always a matter of the sequence of events. One solution that almost always works is to put the offending code in a short timing function:
window.setTimeout(cancelFull,10);
function cancelFull() { document.webkitCancelFullScreen(); }
UPDATE
Put the setTimeout() in place of your current CancelFullScreen, inside the listener.

Try this:
window.setTimeout(document.webkitCancelFullScreen, 10);

Related

Function Toggle not working onf Firefox

I have no idea whats going on with this but I have a website with this html:
<button id="mute"><input type="image" src="img/stop.png" class="stop" onclick="toggleStop(this);"/></button>
<button id="mute2"><input type="image" src="img/sonido.png" class="mute stop" onclick="toggle(this);"/></button>
And I'm trying to toggle the image when ON CLICK with this JS:
<script type="text/javascript">
function toggle(el){
if(el.className!="mute")
{
el.src='img/mute.png';
el.className="mute";
}
else if(el.className=="mute")
{
el.src='img/sonido.png';
el.className="audio";
}
return false;
}
</script>
<script>
function toggleStop(event){
if(el.className!="play")
{
el.src='img/play.png';
el.className="play";
}
else if(el.className=="play")
{
el.src='img/stop.png';
el.className="stop";
}
return false;
}
</script>
It works perfect on Chrome, but it doesnt work on Firefox. I have no clue what's wrong. Sadly I'm no developer, so I do what I can searching on the Internet. Any help would be appreciated.
There is no way this code, as posted, can run under Chrome (or Firefox or any other browser.)
I tried turning it into a snippet but had to make a number of changes to get it usable ... then I stopped trying.
Main issues:
You can't nest an <input> instead of a <button>. Use one or the other.
If you use <button>, it should be <button type="button"> to keep it from acting as a submit button and reloading your form.
Your code is broken.
function toggleStop(event){
if(el.className!="play")
There is no element el and an error is generated.
The first rule of JavaScript work: ALWAYS, ALWAYS check the error console.
So...I took what you said about an INPUT inside an BUTTON and I just delete the button and use an isntead and now it works on both browsers.
Thanks a lot Jeremy!

code not working, jcepopup window not reloading while closing

I'm having a problem with a form. I need to perform a query once a jcepopup window has closed, but so far i can't make it work. I tried the following code:
function passVal(val1,val2){
parent.document.getElementById('award_number').value=val1;
parent.document.getElementById('award_name').value=val2;
parent.document.getElementById('aw_number').value=val1;
parent.document.getElementById('aw_name').value=val2;
window.onunload = refreshParent;
window.parent.jcepopup.close();
}
window.onunload = refreshParent;
function refreshParent() {
window.opener.location.reload();
}
However, so far it's not working, at least not the reload part. It returns the values, but i can't use them to trigger the next query that i would like to use.
Anyway, I'm open to suggestions. Thanks
Check the MDN docs which state:
You can and should handle this event through window.addEventListener() and the unload event. More documentation is available there.
window.addEventListener('unload', function () { console.log('do stuff'); } );
https://developer.mozilla.org/en-US/docs/Web/API/Window.onunload

script always working in chrome / firefox works only once in IE

In a partial view I have these lines of scripts:
<script type="text/javascript">
$(document).ready(function() {
$('#randomCard').click(function () {
alert("button clicked!");
$.get("#Url.Action("GetRandomCard")", {}, function (data) {
$('#rightSide').html(data);
});
});
})
</script>
This calls a Get method in my controller which returns a random card from a database. In chrome, this methods is 100% working. Firefox fires the event 100% of the time too. But in IE the action is fired only once while the alert always pops.
Can somebody help me figure out why?
EDIT
Following everyone's advice, I have debugged my session which made me realize that the html data was being added, not replaced. I have created an upper div #rightSide which gets updated with the data, thus resolving this small problem.
However, the problem of IE calling the partial view controller method is still active and I appreciate everyone's help to resolve this issue.
Fire up a debugger in IE. Run and see what fails.
Catch if there is an error from $.get(…).
( I bet on the randomCard-control being a anchor link and there being i subtle bug that makes the anchor get the page again. )
Don't forget to post your findings.
even if it is not an
$(document).ready(function() {
$('#randomCard').click(function (e) {
e.preventDefault();
alert("button clicked!");
//etc

Use JQuery or onbeforeunload for IE and FF

I'm working in a Flex4 application, using javascript, in the "index.template.html" document. I'm having an issue being able to use onbeforeunload with Firefox. The application works perfectly in IE, but the exact same one doesn't sit well with FF. (See below)
<script type="text/javascript">
window.onbeforeunload=before;
window.onunload=after;
function before(evt)
{
var flex=document.$(application)||window.$(application);
flex.unloadMethod(); //custom method to log out the user
}
function after(evt)
{
}
</script>
From what I've found, FF doesn't seem to register onbeforeunload events, so I found that the popular thing to use instead is binding with JQuery. So, I deleted the above code and replaced it with the below code, but it doesn't display a pop-up when the user tries leaving the page in both IE and FF. Anyone that seems to be using JQuery for this seems to be doing the exact same thing, so I don't know what's going on.
<script type="text/javascript">
$(window).bind("beforeunload",function(event){
return "This should create a pop-up";
});
</script>
Eventually it would be nice to call the "flex.unloadMethod" like in the first bit of code, but for the time being I'm just trying to get a pop-up to work so I know I'm on the right track. Any insight would be greatly appreciated.
Try:
<script>
$(window).on('beforeunload', function(){
return "This should create a pop-up";
});
</script>
Example: http://jsfiddle.net/AeztA/3/
Would like to add that i figured out that you can't use an empty string in firefox.
It has to be at least 1 blank for example as return.
var text = 'Exit Message';
$(window).on('beforeunload', function(){
return " " + text;
});

Click button on load event

I have the following javascript -
function onLoad() {
if (!(document.applets && document.VLVChart && document.VLVChart.isActive())) {
setTimeout('onLoad()', 200);
return;
}
objChart = document.VLVChart;
PollEvent();
}
function fan() {
objChart.reorganize();
}
And then when the HTML page is loaded -
<body onLoad="onLoad()">
and have a button within the HTML that execute the fan() function -
<input type='button' value='Fan' onClick='fan();'>
Is it possible for me to activate the fan() function within the onload event so that a user does ont have to click the button?
EDIT
After trying the provided answers, on debugging the code breaks on the line -
objChart.reorganize();
Within the fan() function with the error -
SCRIPT5007: Unable to get value of the property 'reorganize': object is null or undefined
This is odd as when I manually click the button on the page, the function works fine.
Solution
After much head scratching I have realised that I was trying to load the fan() function before the page (and more specifically the objChart) had fully loaded. Hence why adding the function in the onLoad event was not working. I added a setTimeout -
function Fan()
{
setTimeout(function(){objChart.reorganize();},3000);
}
<body onload='onLoad(); fan();'>...
However inline JS is best avoided and you would do well to begin looking into centralised event management. There are various advantages to this.
An answer I wrote yesterday to another question outlines why this is. Something like jQuery makes this trivial if it's new for you.
$(function() {
$('body').on('load', function() {
onLoad();
fan();
});
});
Reading your question I assume you didn't even have tried. Just call that function from within your onLoad()-function:
function onLoad()
{
fan();
/* … */
}
Yes.
You can use <body onload='onLoad(); fan();'> as Utkanos suggests.
If you use jQuery, you can also stick a script in the head containing:
$(function(){
...
});
The jQuery function actually fires earlier, as is explained here.

Categories