Develop Reference

Exit Feedback Popup when someone click on tab "x"

Can someone help me with a JavaScript code to show an exit popup when someone clicks on tab "x" to leave that specific page/or website only. (not asking about intent exit pop up). I need to take the userfeedback on my order form to find out if he is happy with the prices. I want to integrate it with contact form 7. Using wordpress. Asking it after 5 hours of search around web.
Thorough help is appreciated.

You can use the beforeunload event (https://developer.mozilla.org/fr/docs/Web/Events/beforeunload) :
$(window).on('beforeunload', function () {
alert('Exit site')
});

You can use the beforeunload event to show a form
$(window).on('beforeunload', function () {
$('.feedbackform').show();
});
on close of the feedbackform you close the page

javascript style alert with link before user navigates away from page

I am looking at having a alert style box show up when a user tries to leave the page but I what I wanted to do is have a share link in the alert style box
I have read this ticket javascript before leaving the page and now am unsure if this is possible.
I realise this will run
$(window).bind('beforeunload', function(){
alert("hi");
});
Now I know you cannot add links to an alert window so am trying to get round this another way but cant think of how i would display a alert/popup before going to another page that has a link in
Can anyone suggest anything - is there a plugin that might do this?

Its better you not do even if u do a hack as if you find a bug and use it to do it one they they will fix it and you will be again at same point. This is a security risk suppose i want to close a tab and in code you opne new popups or do malicious things???? So browserts dont allow it. If user wants to go they are allowed u can use standard
window.onbeforeunload = function() { return 'You have unsaved changes!'; }
if you like So try this. istead of custom things.
DEMO

You cannot add links to an alert window. What you could do is use a jQuery Plugin like http://jqueryui.com/dialog/#default and call it within beforeunload function.
HTML
<div id="dialog" title="My Link">
My Link
</div>
jQuery
$(window).bind('beforeunload', function(){
$( "#dialog" ).dialog();
});
OR if don't want to use jQuery you could use a window.open
eg: http://www.quirksmode.org/js/popup.html

Make browser's back button work when using hide and show (jquery)

I've seen the new website of megaupload (mega) and we've got this:
Ok, if I press on left-menu contacts, it only reloads the white part on the image, if I press messages, the same, it only reloads white part. But if I go from contacts to messages and I press browser's back button, it goes from messages to contact and only reloads white part as always.
In my website, I do the same using jquery hide and show, but obviously, if I press browser's back button it doesn't hide the div and shows the other one.
My web site is only one html file and there are 4 div that get shown or hidden depending on the button you press, this is an example:
$("#btn_contact").click(function () {
$("#content_contact").show();
$("#content_home").hide();
$("#content_products").hide();
$("#body_aux").hide() ;
$(this).addClass('visited');
$('#btn_products').removeClass('visited');
$('#btn_home').removeClass('visited');
});
Can anybody tell me how to find this with jquery or whatever I have to use.
I don't know if I've explained myself well, if not, ask me to do it better.
I would appreciate any help. Thanxs a lot.

Maybe it'd be easier for you and more appropiate to make "content_contact.html", "content_home.html", and so on and use .load() function as Ozan Deniz said. You wouldn't have to change margins, positions, etc. and back button would work withouth programming. I think is not appropiate to make the whole website using just one html file, showing and hiding div's, ofcourse you can do this but maybe is not the right way. I'm newbie at this, but that's what an expert told me beacuse I was doing something similar to that.
Hope to help you.

You can use jquery load function to load white part
For example;
$('#result').load('ajax/test.html');
And in back button event you can load the white part
jquery hide and show
window.onbeforeunload = function() { $('#result').hide(); }; or
window.onbeforeunload = function() { $('#result').show(); };
jquery load function
window.onbeforeunload = function() { $('#result').load('ajax/test.html'); };

tinymce dont show the alert leaving the page

I am using jquery with normal version 3.4.3.2 (non-jquery).
I am using jquery to get contents of the box like this
$(function(){
$(".submit").click(function() {
var text = tinyMCE.get('elm1').getContent();
$(".here").html(text);
return false;
});
});
But when i edit the content of the textarea and click submit and then leave the page.
But it shows the alert box.
I dont want it to come if the users have clicked the .submit after editing.
Thanks

Brett seems right.
You can even use this to get the content into the form in case $(."here") ist the element you initialized the tinymce editor for:
$(".submit").click(function() {
tinymce.get('elm1').save();
return false;
});

Sorry to post in an old topic but I tried .save() and it did not work for me either. So, I figured out a better solution that I wanted to share for the next person.
The unsaved alert is part of the autosave plugin which checks function tinymce.get('mce1').isDirty(). This function checks the value of tinymce.get('mce1').isNotDirty
A "dirty" mce is one which has unsaved changes. So, to prevent the popup you have to tell mce that it is clean without any unsaved changes.
tinymce.get('mce1').isNotDirty = 1;//clean mce
That will prevent the popup when leaving/refreshing page, assuming no more edits are done to the content of mce1

If you have one editor per page try
tinymce.activeEditor.save();
See the documentation for more details
https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/

Alert Box error

I have alert boxes all around my site, that have been working up until now, ( I have done a few updates to my blog recently before this started happening ) the problem I am experienceing is that when I click on a link ( in my case a image link ) and the alert box appears, I submitt the ok button and suddenly im rediercted to a white page with 'true' in the top corner. My alert box scripts are inside my blog template.
I tested this alert box script out in a blog post:
<"a href="javascript:onClick=alert("Not an active link");">CLICK<"/a>
withouth the extra "
and then went to preview the post, however the same error occured. This is not a browser problem as it only happens on my site, when i got to someone elses with alert boxes, it works. Please help with this I have been asking about it for about a week now and would appreciate someone who can help
here is a screenshot of what I get redirected to:
http://img813.imageshack.us/img813/2674/true.png
Thanks for all help.

Use this
CLICK
Demo here: http://jsfiddle.net/e2fkT/embedded/result/

I think you have some typos... It would be:
click
Use simple quotes inside or escape double quotes.
I don't understand the use of onclick there too... Just the alert will open an alert box when you click.
click
Also it would be better to separate javascript from html... You could include with the following content (jquery example, i forgot almost everything about old javascript... just get the idea) into a non-active-links.js file or in a block:
$(document).ready(function () {
$('a.non-active-link').click(function () {
window.alert('Not an active link');
return false;
});
});
That way all links in the page with a class attribute of "non-active-link" will fire up the alert box.

I think you messed up with javascript inside href and the onclick attribute. Your snippet is actually assigning the result of the alert function call to the variable onCLick. The display of true might be the return value of the alert method. Still an odd behavior.
CLICK
CLICK
Those two cause no problems to me.