Solved

autofire color box when user leaves the page

Posted on 2010-08-19
5
797 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

749 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