Develop Reference

add exception on onbeforeunload

I have this code on my sites:
<script type="text/javascript">
var popit = true;
window.onbeforeunload = function() {
if(popit == true) {
popit = false;
setTimeout(function(){
window.open("/out.php", "_blank");
window.location.href = "/out.php";
}, 0);
return "Do you really wanna exit this website?";
}
popit= true;
}
function noPop() {
popit = false;
}
(function(w,l,d){var cloc=l.pathname+l.search;history.replaceState(null,d.title,l.pathname+"#!/back");history.pushState(null,d.title,l.pathname);w.addEventListener("popstate",function(){if(l.hash==="#!/back"){noPop();history.replaceState(null,d.title,l.pathname);setTimeout(function(){l.replace("/out.php");},0);}},false);}(window,location,document));
</script>
But I have also an popunder code that triggers my onbeforeunload:
<script src="/js/p.js" data-endpoint-uuid="07c9a1e6-76be-45cb-9788-7a3e4e42b69b" data-subid="default" data-mode="popup" defer></script>
How I can add an exception for that pop script?
thanks

window.onbeforeunload confirmation if submit not clicked

I'm working on a quiz. The page can't be closed before submitting the form, otherwise all data will be lost. This can be done using:
window.onbeforeunload = function () {
return "Are you sure?"
}
But what if I don't want to trigger this alert if user clicked on "Submit"? I tried the code below but it doesn't work at all - it doesn't show the alert even if window is being closed.
var clicked_submit = false;
$(document).ready(function () {
$('#submit-button').click(function () {
clicked_submit = true;
});
window.onbeforeunload = function () {
if (clicked_submit){
} else {
return 'Are you sure?'
}
}
});

One simple solution is to just return the function without any value.
var clicked_submit = false;
$(document).ready(function () {
$('#submit-button').click(function () {
clicked_submit = true;
});
window.onbeforeunload = function () {
if (clicked_submit){
return; // equal to return undefined;
} else {
return 'Are you sure?'
}
}
});
A cleaner solution would be, to simply set the window.onbeforeunload to null.
var clicked_submit = false;
$(document).ready(function () {
$('#submit-button').click(function () {
clicked_submit = true;
});
if(!clicked_submit) {
window.onbeforeunload = function () {
return 'Are you sure?'
}
} else {
window.onbeforeunload = null;
}
});

how to show pageload popup only in index.html

$(function(){
var overlay = $('<div id="overlay"></div>');
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
$('.close').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
$('.x').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
});
here are my javascript code....
jquery plugin:http://code.jquery.com/jquery-1.8.2.js
jsfiddle:http://jsfiddle.net/7QA3p/
this popup worked on pageload of every page., but i want only show at the pageload of index.html

Check if the page is index.html using the code,
var pagePathName = window.location.href;
if (pagePathName.substring(pagePathName.lastIndexOf("/") + 1) == "index.html") {}
then you can display or not display the popup, like
$(function () {
var pagePathName = window.location.href;
if (pagePathName.substring(pagePathName.lastIndexOf("/") + 1) == "index.html") {
var overlay = $('<div id="overlay"></div>');
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
}
}

You can use this condition to check:
if (document.location.pathname.substr(-11) === "/index.html") {
//your code here
}

Add a QueryString (used like an identifier) to your URL like the example below:
http://example.com/index.html?pop=1
$(function(){
//check here
var checkQString = window.location.search;
if(checkQString.startsWith('?')) {
alert("Open Pop up here");
} else {
alert("no pop up");
}
});

How do I change a div from popup to slide down?

I'm not very good with javascript and I have this javascript code. When I click on the link the div shows and hides. The problem is the showing effect, it pops up and doesn't look good so I want the div to slide down when it shows.
Here's the code:
<script type="text/javascript">
var s;
ShowHideWidget = {
settings : {
clickHere : document.getElementById('clickHere'),
dropdown_signup : document.getElementById('dropdown_signup')
},
init : function() {
//kick things off
s = this.settings;
this.bindUIActions();
},
bindUIActions : function() {
//Attach handler to the onclick
/*
s.clickHere.onclick = function() {
ShowHideWidget.toggleVisibility(s.showing);
return false;
};
*/
ShowHideWidget.addEvent(s.clickHere, 'click', function() {
ShowHideWidget.toggleVisibility(s.dropdown_signup);
});
},
addEvent : function(element, evnt, funct) {
//addEventListener is not supported in <= IE8
if (element.attachEvent) {
return element.attachEvent('on'+evnt, funct);
} else {
return element.addEventListener(evnt, funct, false);
}
},
toggleVisibility : function(id) {
if(id.style.display == 'block') {
id.style.display = 'none';
} else {
id.style.display = 'block';
};
}
};
(function() {
ShowHideWidget.init();
})();
</script>

You can achieve it by using jquery slideDown and slideUp functions:
Add following code:
toggleVisibility : function(id) {
if( $(id).is(':visible') ){
$(id).slideUp();
} else {
$(id).slideDown();
}
}
DEMO

You'd do well to use something like jQuery's .slideDown function. You'll have to write a lot of code to do this yourself.

show() does not work

I am trying to display a loading spinner when a user clicks on the submit button. I tried implementing the solution provided here, but it's not working.
I have validated that the function is being called and that the target div is being found by jQuery by tossing in an alert(spinner.innerHTML) as follows:
<script type="text/javascript">
$(document).ready(function () {
var spinner = $("div#spinner");
});
var spinnerVisible = false;
function showProgress() {
if (!spinnerVisible) {
alert(spinner.innerHTML);
spinner.show();
spinnerVisible = true;
}
};
function hideProgress() {
if (spinnerVisible) {
spinner.hide();
spinnerVisible = false;
}
};
</script>
As expected, when I click on my button, I get an alert window with the text "Loading..." which is the text from my div. However, if I add a second alert after the call to spinner.show(); it doesn't pop up, which leads me to believe that the call to spinner.show(); is causing jQuery to fail.
This is my first foray into jQuery, so I'm struggling with how to debug this and find out what is breaking.

Based on the debugging procedures, it looks like your project has not included jQuery library.
Please enable jQuery in your project to make use of jQuery functionality.

you should define spinner correctly(i.e. in global)
<script type="text/javascript">
var spinner;
$(document).ready(function () {
spinner = $("div#spinner");
});
var spinnerVisible = false;
function showProgress() {
if (!spinnerVisible) {
alert(spinner.innerHTML);
spinner.show();
spinnerVisible = true;
}
};
function hideProgress() {
if (spinnerVisible) {
spinner.hide();
spinnerVisible = false;
}
};
</script>

You're trying to access the spinner variable without having scope to it in the function.
<script type="text/javascript">
$(document).ready(function () {
var spinner = $("div#spinner");
});
var spinnerVisible = false;
function showProgress() {
var spinner = $("div#spinner");
if (!spinnerVisible) {
alert(spinner.innerHTML);
spinner.show();
spinnerVisible = true;
}
};
function hideProgress() {
var spinner = $("div#spinner");
if (spinnerVisible) {
spinner.hide();
spinnerVisible = false;
}
};
</script>