|
JavaScript - Onbeforeunload: Close Vs. Back Button
Hi,
I have the following problem: When I use this script it pops up both if a user tries to close the window and also if he presses the back button. Please tell how to show another window or do another action when the back button is pressed? I know it is possible although a lot of people say it's not. Code: <script type="text/javascript" type="text/javascript">
window.onbeforeunload = confirmExit;
function confirmExit()
{
return "blabla";
}
</script>
Similar TutorialsI am creating a popup for an online store so that when prospective customers put something in their shopping cart and then try to leave the site, they are offered a coupon in a popup. I am using the following code (FYI, uses prototype.js) Code: Event.observe(document.body, 'click', function(event) {
if (Event.element(event).tagName == 'A' || Event.element(event).tagName == 'INPUT' || Event.element(event).tagName == 'IMG') {
staying_in_site = true;
}
});
window.onbeforeunload = popup;
function popup() {
if (staying_in_site) {
return;
}
if (popup_displayed) {
return;
}
popup_displayed = true;
//popup displayed here
}
The popup is not displayed when the user clicks on a link or submits a form (correct behavior) and it is displayed when the user types in a URL or tries to close the browser (also correct behavior). The problem is when the user clicks the back or forward buttons, the popup is displayed which is not the desired behavior. Anyone here have a solution for this? -------------------------------------------------------------------------------- I am currently using onbeforeunload to show user a message 'click ok to save, cancel to continue' Question.. On browser close event (user clicks on window close button 'X' on browser), I do not want to show the message to user. Can you please help with how to check the browser close event. Other details.. If user closes the browser, my ajax request is not getting executed and hence I am not able to save the data to database. Hence I am planning not to show the popup when user closes the browser. Thanks in advance... Sandip Have been trying to make a button to close a web page but every time i try to get it validated "strict" it fails. I have used the following code. Code: <form action=""> <input type="button" value="Close Window" onclick="window.close()"> </form> Would really appreciate any help. Thanks Does anyone knows how to make an overlay ad with close button? Well I have seen already on another websites.I want to make an ad which is over a video and that video can't be started without closing this ad.So when ad is closed then video can be loaded.Something like on this webiste: http://www.soccerclips.net/videos/we...-villa-fortune But i don't know how to do it?If someone knows please post the code. Unable to close the popup. Have done the best I can Can someone please help me here. Would also like to be able to display without scrolling bars Here is the link http://www.videowebmastery.com/video...ters/index.htm Cheers I'm implementing that stupid Cookie Law thing here in the UK, but I can't get the popup to close on click in IE. Every other browser is working fine. Any one know the fix? Code: <style type="text/css">
<!--
#eucookielaw { display:none }
#note {
position: fixed;
z-index: 101;
bottom: 0;
left: 0;
right: 0;
background: #98FB98;
text-align: center;
vertical-align: middle;
color: #2C2C2C;
line-height: 2.5;
overflow: hidden;
-webkit-box-shadow: 0 0 5px black;
-moz-box-shadow: 0 0 5px black;
box-shadow: 0 0 5px black;
}
#note a {
color: #2C2C2C;
}
#note img {
vertical-align: middle;
}
#close {
cursor: pointer;
}
@-webkit-keyframes slideDown {
0%, 100% { -webkit-transform: translateY(-50px); }
10%, 90% { -webkit-transform: translateY(0px); }
}
@-moz-keyframes slideDown {
0%, 100% { -moz-transform: translateY(-50px); }
10%, 90% { -moz-transform: translateY(0px); }
}
.cssanimations.csstransforms #note {
-webkit-transform: translateY(-50px);
-webkit-animation: slideDown 2.5s 1.0s 1 ease forwards;
-moz-transform: translateY(-50px);
-moz-animation: slideDown 2.5s 1.0s 1 ease forwards;
}
.cssanimations.csstransforms #close {
display: none;
}
-->
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function SetCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+";path=/"+((expiredays==null) ? "" : ";expires="+exdate.toUTCString())
}
</script>
<div id="eucookielaw" >
<div id="note">
<img src="/images/cookie_sm.png" alt="Cookie" border="0"> This Site Uses Cookies. :: <a rel="nofollow" href="/terms.php">Learn More</a> :: <a id="close"><u>Close this Message</u> <img src="/images/close_sm.png" alt="Close" border="0"></a>
</div>
<script>
close = document.getElementById("close");
close.addEventListener('click', function() {
note = document.getElementById("note");
note.style.display = 'none';
}, false);
</script>
</div>
<script type="text/javascript">
$("#eucookielaw").show();
SetCookie('eucookie','eucookie',365*10)
</script>
Example he No Claims Discount Insurance | Car, Home, Bike and Health No Claims Bonuses i have the following code which i am trying to insert a 'back button' into to go back to the previous page. i can only seem to get the button to appear either at the very top or very bottom of the page, does anyone know how i can specify the location? this script is generated from easypano tourweaver - Code: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Virtual Tour Created By CAPITA SYMONDS</title>
</head>
<body leftMargin="0" topMargin="0" rightMargin="0" bottomMargin="0">
<script type="text/javascript" src="swfobject.js"></script>
<div id="flashcontent">
To view virtual tour properly, Flash Player 9.0.28 or later version is needed.
Please download the latest version of <a href="http://www.adobe.com/go/getflashplayer" target="_blank">Flash Player</a> and install it on your computer.
</div>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("twviewer.swf", "sotester", "1024", "768", "9.0.0", "#FFFFFF");
so.addParam("allowNetworking", "all");
so.addParam("allowScriptAccess", "always");
so.addParam("allowFullScreen", "true");
so.addParam("scale", "noscale");
//<!-%% Share Mode %%->
so.addVariable("lwImg", "resources/2_area_multipix_preloading image file.jpg");
so.addVariable("lwBgColor", "255,255,255,255");
so.addVariable("lwBarBgColor", "255,186,186,186");
so.addVariable("lwBarColor", "255,153,0,0");
so.addVariable("lwBarBounds", "-512,-384,1024,768");
so.addVariable("lwlocation", "4");
so.addVariable("lwShowLoadingPercent", "false");
so.addVariable("lwTextColor", "255,0,0,0");
so.addVariable("iniFile", "config_2_Area_Multipix.bin");
so.addVariable("progressType", "1");
so.addVariable("swfFile", "resources/2_area_multipix_1_animation for tourweaver.swf");
so.addVariable("href", location.href);
so.write("flashcontent");
// ]]>
</script>
</body>
</html>
here is the button code - Code: <span onclick="javascript:history.back()" style="text-decoration:underline; color:blue; cursor:hand">Back</span> i used the code window.close(); it works well for Internet Explorer but it not worked in firefox I am making a simple puzzle game on Android using Phonegap, that is HTML5, CSS3 and JavaScript. When a user fills an answer on a page, if the answer is correct, it will go to another page. However, once the user goes to the next page, he/she CANNOT return back to the previous page. I do not want the user to return back, else he/she will have to fill the answer again to go to the next page, so it's not good. Thank How to center javascript popup without css? Cant get close button working(wrong position and dosen't close popup). Code: <script language="javascript">
function openPopup(a, b, c){//a = url, b = width, c = height
var pOverlay,
pContent,
pClose;
pOverlay = document.createElement('div');
pOverlay.className = 'popupOverlay';
pContent = document.createElement('div');
pContent.className = 'popupContent';
pClose = document.createElement('div');
pClose.className = 'popupClose';
document.body.appendChild(pOverlay);
document.body.appendChild(pContent);
var myRequest = new ajaxRequest();
myRequest.open('GET', a, true);
myRequest.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
myRequest.send(null);
myRequest.onreadystatechange = function(){
if(myRequest.readyState == 4 && myRequest.status == 200){
pContent.innerHTML = myRequest.responseText;
}
}
}
</script>
Code: <style type="text/css">
.popupOverlay {
background: #000000;
opacity: 0.8;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
z-index: 1001;
}
.popupContent {
background: #333333;
border: 2px solid #DDDDDD;
box-shadow: 0px 0px 20px #999999;
border-radius: 3px;
position: absolute;
top: 50%;
left: 50%;
padding: 5px;
z-index: 1002;
overflow: auto;
word-wrap: break-word;
color: #FFFFFF;
/*height: 300px; width: 500px;*/
}
.popupClose {
background: url('images/closePopup.png') no-repeat;
width: 32px;
height: 32px;
cursor: pointer;
}
</style>
How you handle back button scenario in firefox browser. The problem is when i click browser back button , the javascript on load is not executed and page is rendered from cache. It works in IE.. I have a website using this pageslide function http://srobbin.com/blog/jquery-pageslide/ Basically the page you see in the example is acting as a side menu bar and when you click the links on that page, it performs the sliding action and a new page slides into the screen. I'm wondering if there is any way to get the back button to slide it back to the main page, rather than having to click a link to go back? Sorry if this is the wrong place for this question, but... I'm having an issue with the difference in behavior between the IE and FF back buttons. I'm using jQuery to create collapsable div regions which contain text boxes on a search form. After submit, if the use clicks the back button in FF, the region(s) the user had previously expanded, show as expanded. Also, there search term is still present. In IE, when clicking the back button, all regions are collapsed, in there original loaded state, but the search term is still saved. I put the following code at the top of the page: onload=function(){ alert('Onload!'); } When clicking the back button in FF, nothing happens. For IE, the alert pops up. This tells me that IE reloads the page (but somehow still saves some things, like the search text). My question is, is there a way to keep IE from reloading when the use clicks 'back'? I will be creating my own 'edit' back button for users to get around this, but I also would like to prevent this from confusing users and causing undesired results. Any help would be greatly appreciated. Hello, I need some script to force the browser to reload/refresh when a page is reached from the back button. EG You're on page A -> You click a link onto page B -> You Press Browser back to go onto Page A, it has old content that requires a reload. Now, my page is currently php so I won't bother with my code here as I am looking for any solution (I have also posted in php forum). Any JS solution that will trigger a reload on browser back is appreciated. I have tried a few ideas, most work in Chrome, IE always works, Firefox 4 and Opera 11 wont reload, simply fetching from cache I believe. Thanks. Hello to all and thank you for any help beforehand. I have an issue with the script below, Select the top dropdown and the second gets populated, this is a nice piece of script, the only problem is that when the information is posted and presented on the process page I click page back to the form to rectify some other field but the ajax resets so I have to select Country & City each time even if thease fields are correct. I know that back button as well as bookmark is a problem with ajax but i think there is a solution the only thing is I don't know how to apply it to this script. Source of the script: http://www.dhtmlgoodies.com/index.ht...chained_select Ajax file: http://www.dhtmlgoodies.com/AJAX/ajax.js test.html Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
var ajax = new Array();
function getCityList(sel)
{
var countryCode = sel.options[sel.selectedIndex].value;
document.getElementById('dhtmlgoodies_city').options.length = 0; // Empty city select box
if(countryCode.length>0){
var index = ajax.length;
ajax[index] = new sack();
ajax[index].requestFile = 'getCities.php?countryCode='+countryCode; // Specifying which file to get
ajax[index].onCompletion = function(){ createCities(index) }; // Specify function that will be executed after file has been found
ajax[index].runAJAX(); // Execute AJAX function
}
}
function createCities(index)
{
var obj = document.getElementById('dhtmlgoodies_city');
eval(ajax[index].response); // Executing the response from Ajax as Javascript code
}
function getSubCategoryList(sel)
{
var category = sel.options[sel.selectedIndex].value;
document.getElementById('dhtmlgoodies_subcategory').options.length = 0; // Empty city select box
if(category.length>0){
var index = ajax.length;
ajax[index] = new sack();
ajax[index].requestFile = 'getSubCategories.php?category='+category; // Specifying which file to get
ajax[index].onCompletion = function(){ createSubCategories(index) }; // Specify function that will be executed after file has been found
ajax[index].runAJAX(); // Execute AJAX function
}
}
function createSubCategories(index)
{
var obj = document.getElementById('dhtmlgoodies_subcategory');
eval(ajax[index].response); // Executing the response from Ajax as Javascript code
}
</script>
</head>
<body>
<form action="" method="post">
<table>
<tr>
<td>Country: </td>
<td><select id="dhtmlgoodies_country" name="dhtmlgoodies_country" onchange="getCityList(this)">
<option value="">Select a country</option>
<option value="dk">Denmark</option>
<option value="no">Norway</option>
<option value="us">US</option>
</select>
</td>
</tr>
<tr>
<td>City: </td>
<td><select id="dhtmlgoodies_city" name="dhtmlgoodies_city">
</select>
</td>
</tr>
</table>
</form>
</body>
</html>
Here's the content of getCities.php Code: <?php
if(isset($_GET['countryCode'])){
switch($_GET['countryCode']){
case "no":
echo "obj.options[obj.options.length] = new Option('Bergen','1');\n";
echo "obj.options[obj.options.length] = new Option('Haugesund','2');\n";
echo "obj.options[obj.options.length] = new Option('Oslo','3');\n";
echo "obj.options[obj.options.length] = new Option('Stavanger','4');\n";
break;
case "dk":
echo "obj.options[obj.options.length] = new Option('Aalborg','11');\n";
echo "obj.options[obj.options.length] = new Option('Copenhagen','12');\n";
echo "obj.options[obj.options.length] = new Option('Odense','13');\n";
break;
case "us":
echo "obj.options[obj.options.length] = new Option('Atlanta','21');\n";
echo "obj.options[obj.options.length] = new Option('Chicago','22');\n";
echo "obj.options[obj.options.length] = new Option('Denver','23');\n";
echo "obj.options[obj.options.length] = new Option('Los Angeles','24');\n";
echo "obj.options[obj.options.length] = new Option('New York','25');\n";
echo "obj.options[obj.options.length] = new Option('San Fransisco','26');\n";
echo "obj.options[obj.options.length] = new Option('Seattle','27');\n";
break;
}
}
?>
The question is on iframes/bookmarkablity and back button functionality. This issue I am facing is how to create iframes with bookmarkable url's without loosing the back button functionality.Lets say all the pages are in the same domain and the child pages inform parent of the child page load for updating the window.location.hash property to modify the current browser address bar. The updation of the url works fine on IE/FF/webkit. But the back button works as expected in IE-8 but the browser back-button does not work in FF/webkit (just the url changes the previous page is not loaded). If we don't update the window.location.hash property the back button works but the window url is not meaningful. Is there a way to get this functionality accross browsers, or is there an easier better way to do it (any other js libs). All pages are served from the same server to get around the permission issue. Gmail and other sites looks like they does something like this. I am trying to write script that allows a user to select a new page using a select menu. But if a user changes mind and clicks Back button. i want a use to see again "Select a New Page" as a first option in the select menu. instead i see the page that was chosen before. in firefox, even when i click Refresh button, the select menu does not go back to its initial format. I tried to use the principle that each time window is loaded, the selected Index would be 0. it is not working. Could anyone give me a hint on how to fix this problem? my script is below. <html> <head> <title>Jump Menu 2</title> <script type="text/javascript"> function new_page() { var selectmenu=document.getElementById("states_form").states_select; selectmenu.onchange=function new_state() { var i=selectmenu.selectedIndex; var state=selectmenu.options[i].value; var new_page="http://www.50states.com/"+state+".htm"; location.href=new_page; window.onload=function select_reload() { i=0; } } } window.onload=new_page; </script> </head> <body> <form id="states_form"> <select name="states_select"> <option value="0"> -- Select a New State--</option> <option value="nebraska"> Nebraska</option> <option value="texas"> Texas</option> <option value="florida">Florida </option> <option value="oregon"> Oregon</option> <option value="wisconsi"> Wisconsin</option> </select> </form> </body> </html> Hi All, I am using a loop slider to scroll 4 pages. When I am on any page and click through the product on that. I go to the product but when I click the back button, it goes to the start of the slider rather then the page where I left it. How to go back in loop slider from a back button to the page where we left the scroller. Instead of going to the start of the scroller. It is annoying to go back again to start of the page and scroll all pages. Any help, Highly appreciated. Regards, Meenakshi. Hello Everbody, I have been at this problem for 10 hours now and am going NUTS!! I am making website to look around an ancient Egyptian Tomb. Feel free to have a look: http://www.campbelltest.co.uk/britishMuseum/online/ I have a flash movie which I have scripted to utilise the browser back button using this script http://www.asual.com/swfaddress/docs/. This works fine until open a lightbox image form within the flash movie using Lokesh Dhakar Light box http://www.lokeshdhakar.com/projects/lightbox2/ and the browsers back button stops working!! The code below is to the JavScript links and the code that lauches the lightbox: Code: <script type="text/javascript" src="js/swfaddress-optimizer.js"></script>
<script type="text/javascript" src="js/swfobject.js"></script>
<script type="text/javascript" src="js/swfaddress.js"></script>
<script type="text/javascript" src="js/swfmacmousewheel.js"></script>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<!-- start | JC -->
<!-- added for flash -->
<!-- added for launch from flash -->
<script language="JavaScript">
function openLightbox(url,group){
var objLink = document.createElement('a');
objLink.setAttribute('href',url);
objLink.setAttribute('rel','lightbox['+group+']');
objLink.setAttribute('title','caption');
Lightbox.prototype.start(objLink);
}
</script>
<!-- end | JC -->
This code is how I have embeded the flash in the page: Code: <script type="text/javascript">
var so = new SWFObject('container04.swf', 'container04', '760', '450', '8', '#ffffff');
so.useExpressInstall('js/expressinstall.swf');
so.addParam('menu', 'false');
//so.addParam('movie','container04');
so.write('flashcontent');
var macmousewheel = new SWFMacMouseWheel( so );
</script>
I have added a text box to movie that shows the back button function exicuting and what its exicuting. I have never done any work with JavaScript before so I am up the creek without a paddle!! Hi, "This happens only in chrome browser" I am trying to design a website and it has a couple of radio button on the first page. I selected one radio button and navigated to the next page. On my second page, if i hit back button, the first page show the radio option that i selected(which is correct) but when I hit save and continue it throws a JS error "please select one option". Chrome forces me to re-click the radio option again. The application is MVC 3.5, C# Here is the snippet of the ascx Code: <%= Html.RadioButton("radAccnt", "abc", Account != null ? (entity != string.Empty ? (entity.Substring(0, 3).Equals("abc") ? true : false) : false) : false, new { id = "radAbc", onClick = "SetEntity('abc');", onBlur = "javascript:ValidateOnBlur(\"ValidateAccount('true');\");" })%>
I had a alert in SetEntity(Value) function and value is empty when the back button is clicked. I did some research and found that Chrome does not cache the form data. If this is true is there a work around for this? Please help. Thanks. |
|||||||