We Keep Coding

Confirmation before leaving/closing of tab?

I'm trying to show a confirmation pop before user close the tab or went to another tab like facebook, gmail, GoDaddy & others do.
My code working for Firefox but not for other browser like chrome, safari etc.
<script type="text/javascript">
var hook = true;
window.onbeforeunload = function() {
if (hook) {
return "Did you save"
}
}
function unhook() {
hook=false;
}
</script>
Call unhook() onClick for button and links
No Block URL
Please help me to get this fixed.

If you take a look at the api of window.beforeunload(), you can see that, though widely the basic unload event is supported, a custom message can only be set in internet explorer and certain versions of some browsers. So just use the normal standard message.
This feature (custom messages) was often exploited by malicous sites to interact with user in a harmful or malipulative way. This is why many browsers don't support this anymore, until some patch removes the threat for users.
Standard message solution:
window.addEventListener('beforeunload', function (e) {
// Cancel the event
e.preventDefault();
// Chrome requires returnValue to be set
e.returnValue = '';
});

Look at Ouibounce it helps detect when a user is about to leave the page(It looks at the position of the cursor). You could probably build off this library.

How to save fullscreen state in Firefox?

Following Mozilla's API document on Fullscreen, I've placed the following code in my website, it simply takes the whole document (html element) and makes the page go fullscreen once the user clicks anywhere in the page, and once there's another click, page goes back to normal.
var videoElement = document.getElementsByTagName('html')[0];
function toggleFullScreen() {
if (!document.mozFullScreen) {
if (videoElement.mozRequestFullScreen) {
videoElement.mozRequestFullScreen();
}
} else {
if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
}
}
window.addEventListener("click", function(e) {
toggleFullScreen();
}, false);
My question is how can I save this fullscreen state so every time that Firefox loads up, that page is still on fullscreen.
Or any workaround? This is for Firefox for Android.

It's an extreme workaround, but you can make your website a progressive web app and put "display": "fullscreen" in its manifest. Then you can launch your site from the home screen and use it like a fullscreen native app.

Following my experiments and the specs, this isn't doable, from client browser javascript
This api need an user interaction. We can't activate the fullscreen by scripting.
From the fullscreen api specification:
Fullscreen is supported if there is no previously-established user
preference, security risk, or platform limitation.
An algorithm is allowed to request fullscreen if one of the following
is true:
The algorithm is triggered by user activation.
The algorithm is triggered by a user generated orientation change.
https://fullscreen.spec.whatwg.org/#model
About activation events:
An algorithm is triggered by user activation if any of the following
conditions is true:
The task in which the algorithm is running is currently processing an
activation behavior whose click event's isTrusted attribute is true.
The task in which the algorithm is running is currently running the
event listener for an event whose isTrusted attribute is true and
whose type is one of:
change
click
dblclick
mouseup
pointerup
reset
submit
touchend
https://html.spec.whatwg.org/multipage/interaction.html#triggered-by-user-activation
We can't trigger fullscreens from scripts, or if so, the script must be triggered by the user.
Including simulating a click won't works, this is regular behavior, made to protect user experience.
With some reflexion, we can't agree more on this, imagine any ads page can launch full screens, the web would be a hell to browse!
You told in comment: «I am the only user here»
What you can do if using unix: (( probably alternatives exists in other os )).
Using midori (a lightweight webkit browser), this will start a real fullscreen.
midori -e Fullscreen -a myurl.html
There is no ways to start firefox or chromium in a fullscreen state from the command line, to my knowledge.
But what is doable is to trigger a F11 click at system level, focusing on the good window, just after the page launch. ((sendkey in android adb shell?))
xdotool can do that.
Here is a pipe command line that will launch firefox with myurl.html, search for the most recent firefox window id, then trigger the F11 key on this window.. (Press F11 again to exit)
firefox myurl.html && xdotool search --name firefox | tail -1 | xdotool key F11
This should be easy to adapt for other browsers.
As last alternative, have a look at electron or nw.js.

take a look at this add on for Firefox, i have not tried it, as I'm posting this from mobile, it's description does say that it can force start in full screen. I'm just quoting their description .
Saves the last state or force start in full screen forever! Simple and
complete for this purpose.
Edit : And the link to it
https://addons.mozilla.org/en-US/firefox/addon/mfull/

What about using localStorage like this?
function goFullScreen() {
if (videoElement.mozRequestFullScreen) {
localStorage.setItem('fullscreenEnabled', true)
videoElement.mozRequestFullScreen();
}
}
window.onload = function () {
if (localStorage.getItem('fullscreenEnabled') === true) {
goFullScreen();
}
};
function toggleFullScreen() {
if (!document.mozFullScreen) {
goFullScreen();
} else {
if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
localStorage.setItem('fullscreenEnabled', false)
}
}
}
window.addEventListener("click", function(e) {
toggleFullScreen();
}, false)

catching events from a window.open handle

I am working on a Google Chrome extension. We need to display a pop-up login window for users to enter credentials, then handle logins. My extension project consists of three pages: extension, background and options. Options html and JavaScript pieces handle login, however reference to a window opened from options.html is always null.
Therefore, I tried sending a message from options to background scripts, and have the background script open the login window. That part is working, however I never receive any events from that popup, and therefore cannot process the results of login.
case 'openSignInWindow':
let loginWindowRef = window.open('https://myurl.com/client/signin.html', 'signinpopup', 'width=400,height=400,resizeable,scrollbars');
console.log('login window ref:', loginWindowRef);
loginWindowRef.onload = () => { alert("message one "); };
loginWindowRef.addEventListener('DOMAttrModified', event => {
console.log('event:', event);
});
break;
Tried onsubmit - the one that I am interested in, as well as other events. My ultimate goal is to catch the "DOM Mutation events."
What am I doing wrong?

Popup problem...Not sure if this is the best way to do this

I have written a script that allows a customer to log in, and download their contract in PDF.
We want the contract PDF to open in a popup, but are experiencing problems with customers who don't understand the basics of web browsers...
Basically, the customer logs in and a link is generated for their contract. The link is bound through jQuery's live event handler, that takes the request, sends it to an AJAX logging function then opens the PDF via window.open.
Since it is a user's action that opens the window, I can only think that because it goes through 2 other functions first, it is making the pop-up blocker kick in.
Does anybody have any better ideas?
My code is all over the place, in differnt namespaces, so I hope you guys can figure it all out:
Generate the link in a call back function, if the customer's credentials are correct:
$("#pdfLinks").prepend("<span><a href='#' id='pdfLink'><img src='img/btnDownloadPdf.png' alt='Downdload PDF' /><br>Download Adobe © PDF<\/a><\/span>");
$("#pdfLink").live('click', function() {
UI.showWorkingDialog();
net.tssol.contract.log(contractId['contract'], "DOWNLOAD_PDF", lead);
});
$("#pdfLinks").prepend("<h5>Adobe PDF<\/h5>");
the tssol.log function:
log: function(contract, method, lead) {
$.post("log.php", { lead: lead,
method: method},
function(log) {
if (log['success'] == true) {
if (method == "DOWNLOAD_PDF") {
// change to window.open for popup
window.open("http://oururl.net/public_html/viewPdf.php?verify=" + contract, '', 'scrollbars=1,menubar=0,height=600,width=800,resizable=1,toolbar=0,location=0,status=0');
Let me know if you guys see any way to make the user experience better.
Thanks

Maybe you can provide a HTML Version of the contract in a popup and add a "Download PDF" Button at the bottom of the popup content?
But in general you shouldnt use popups since they are often blocked by the web browsers and are in users head synced with trash and viagra-advertising.. you know what I mean ;)
I would do a jQuery Lightbox-like popup inside the website with the HTML-Contract, and optionally offer a PDF Download Button!
Have a look at this one: http://fancybox.net/

window.focus(), self.focus() not working in firefox

Hi all i am developing a chat application ... i have multiple chat windows ... i want to know which windw contain new message ... i have the following code ..
function getCount()
{
$.ajax({
type: "POST",
url: baseUrl + '/Chat/count',
data: "chat_id=" + document.ajax.chat_id.value,
success: function(msg){
if(msg == 'new1') {
self.focus();
//window.focus();
}
}
});
}
If an operator attending both chat....
for example the url is like
http://localhost/nisanth/admin/Chat/index/chatId/15
http://localhost/nisanth/admin/Chat/index/chatId/16
http://localhost/nisanth/user/Chat/index/chatId/15
http://localhost/nisanth/user/Chat/index/chatId/16
if the user 16 enter a message i need focus
http://localhost/nisanth/admin/Chat/index/chatId/16
This code is work fine with IE but not in firefox...please give me a solution... the above code is in the same html

Firefox will only obey requests to raise a window if a security option is set, and it's not set by default. Chrome won't pay attention to focus() requests at all, as far as I can tell. Safari does obey focus() request.
The specific Firefox setting is in the "Tools" -> "Options" ("Edit -> Preferences" on Linux, maybe MacOS) dialog. There's a "Content" tab, and in that there's a checkbox for enabling Javascript. Along with that is an "Advanced" button that brings up another dialog, wherein one finds a checkbox to allow (or disallow) the raising and lowering of windows by page code.
edit: Here is a test page: http://gutfullofbeer.net/focus1.html and you should be able to see that Firefox will raise a window when the page calls window.focus(). You must either have the browser set up so that new windows (created with window.open()) open up in a new separate window instead of a tab, or else you can tear off the tab of the secondary page when it opens.

I had the same problem, i though there was a problem with my JS script, after a long search i have found a solution:
1) In a new tab, type about:config in the address bar and press button "Enter". Click the button "I accept the risk!" in order to confirm the warning
2) In the search field, type dom.disable to get dom.disable_window_flip
3) If the property dom.disable_window_flip is true, double-click it to switch the value from true to false

For anyone else looking to focus on a tab, another tab (tab A) can bring a different tab (tab B) to the front.
If the window.name of tab B is 'myWindow123', then in tab A run this:
window.open('', 'myWindow123');
If you want to re-focus on the tab that opened you, run:
window.open('', window.opener.name);