Solved

autofire color box when user leaves the page

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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

861 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