autofire color box when user leaves the page

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

LVL 4
elliottbenzleAsked:
Who is Participating?
 
kiqkinasConnect With a Mentor Commented:
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
 
elliottbenzleAuthor Commented:
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
 
kiqkinasCommented:
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
 
elliottbenzleAuthor Commented:
That didn't work.

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

I also tried using onbeforeunload but that also didn't work.
0
 
elliottbenzleAuthor Commented:
Thank you. That pointed me in the right direction.
0
All Courses

From novice to tech pro — start learning today.