Solved

autofire color box when user leaves the page

Posted on 2010-08-19
5
789 Views
Last Modified: 2013-11-19
I have a colorbox (a javascript pop-in window) on my page which currently opens when a user first visits the page. The code looks like this:

<script>
            //this chunk of code causes the autofire
                  $(document).ready(function(){
                        $.fn.colorbox({inline:true, href:"#inline_example1", transition:"elastic", speed:1000});
                  });
</script>

The entire code is included below but this is the part that causes the box to open. I am wondering if there is an easy way to get this to run when the user tries to leave the page, instead of when they open the page? Thanks for any help.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD>

<TITLE>ColorBox Autofire Example</TITLE>

<style type="text/css">
<!--
.style2 {color: #CCCCCC}
			.style3 {
	font-size: 26px;
	font-weight: bold;
	color: #FFFFFF;
	font-family: "Times New Roman", Times, serif;
			}
.style4 {color: #CFDFF3}
-->
</style>

<!--  Start colorbox includes and code -->
		<link media="screen" rel="stylesheet" href="example1/colorbox.css" />
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script src="colorbox/jquery.colorbox.js"></script>
		<script>
		//this chunk of code causes the autofire
			$(document).ready(function(){
				$.fn.colorbox({inline:true, href:"#inline_example1", transition:"elastic", speed:1000});
			});
		</script>
<!--  End colorbox include and code -->
        
</HEAD>
<BODY>

<!-- This contains the hidden content for the ColorBox content -->
    <div style='display:none'>
	<div id='inline_example1' style='padding:10px; background:#fff;'>
		<table width="400" height="300" border="3" cellpadding="5" cellspacing="0" bordercolor="#000000" background="example1/images/gradient_bg.jpg">
  			<tr>
    		<td valign="top">
                <div align="center">        
      				<h2><span class="style2"><br />
        				<span class="style3"><br />
          				On Load Auto Fire ColorBox Example<br />
        				</span></span>
						<br />
      				</h2>
    			</div>
              </td>
  			</tr>
		</table>
	</div>
	</div>
<!-- End hidden email grabber content  -->

</BODY></HTML>

Open in new window

0
Comment
Question by:elliottbenzle
  • 3
  • 2
5 Comments
 
LVL 1

Accepted Solution

by:
kiqkinas earned 500 total points
ID: 33474443
I think you are looking for this.

$(window).unload(function() {
  $.fn.colorbox({inline:true, href:"#inline_example1", transition:"elastic", speed:1000});
});

http://api.jquery.com/unload/
0
 
LVL 4

Author Comment

by:elliottbenzle
ID: 33474677
It's working, but the user is redirected before they can see the results.

http://www.glowfishtw.com/colorbox/colorbox_autofire.html

Is there a way to stop the redirect until the box is dismissed?
0
 
LVL 1

Expert Comment

by:kiqkinas
ID: 33474886
Try adding return false;  as show below.

$(window).unload(function() {
  $.fn.colorbox({inline:true, href:"#inline_example1", transition:"elastic", speed:1000}); return false;
});

If that works then it will be up to the colorbox to redirect them where they were trying to go.
0
 
LVL 4

Author Comment

by:elliottbenzle
ID: 33475206
That didn't work.

http://www.glowfishtw.com/colorbox/colorbox_autofire.html

I also tried using onbeforeunload but that also didn't work.
0
 
LVL 4

Author Closing Comment

by:elliottbenzle
ID: 33476017
Thank you. That pointed me in the right direction.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Viewers will learn about the different types of variables in Java and how to declare them. Decide the type of variable desired: Put the keyword corresponding to the type of variable in front of the variable name: Use the equal sign to assign a v…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

948 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now