Solved

autofire color box when user leaves the page

Posted on 2010-08-19
5
793 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

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
JavaScript has plenty of pieces of code people often just copy/paste from somewhere but never quite fully understand. Self-Executing functions are just one good example that I'll try to demystify here.
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

808 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