To make sure everyone is on the same page of what an on exit popup is; When someone clicks off my joomla page, a popup will open up and say "wait dont leave, ill offer you a greater bonus if you stay!" or watever i want it to say. It acts as a last ditch effort to make the sale to the potential customer.
I have gotten pretty close to my goal. I have the popup working and whenever i try to exit it successfully pops up and says wait, in the background a page from my website loads that i want them to land on if they stay. Now my problem is, whenever i click on a menu item or anything that navigates to another page the popup comes up. That is not what i want, i just want it to popup when i am on the Home page of my website and try to exit the site.
I have included a .rar file that is attached with my index.php and the javascript it calls to --> (as_exitPop.js) Or you can view the code below.
If anyone could help me with this, i would be greatly appreciative. I was surprised to see no one has made an "on-exit pop-up" component/module/plugin yet...
index.php
The Script is called at the very end, right before the closing </body> tag
Code: Select all
<?php
/**
* YOOtheme template
*
* @author yootheme.com
* @copyright Copyright (C) 2007 YOOtheme Ltd & Co. KG. All rights reserved.
*/
// no direct access
defined('_JEXEC') or die('Restricted access');
include_once(JPATH_ROOT . "/templates/" . $this->template . '/lib/php/yootools.php');
include_once(JPATH_ROOT . "/templates/" . $this->template . '/lib/php/yoolayout.php');
$template_baseurl = $this->baseurl . '/templates/' . $this->template;
JHTML::_('behavior.mootools');
// add template mootools to JDocumentHTML
if ($this->params->get('loadMootools')) {
$this->_scripts = array_merge(array($template_baseurl . '/lib/js/mootools.js.php' => 'text/javascript'), $this->_scripts);
unset($this->_scripts[$this->baseurl . '/media/system/js/mootools.js']);
}
// add template javascript to JDocumentHTML
if ($this->params->get('loadJavascript')) {
$this->addScriptDeclaration($yTools->getJavaScript());
$this->addCustomTag('<script type="text/javascript" src="' . $template_baseurl . '/lib/js/template.js.php"></script>');
}
// add template css to JDocumentHTML
$this->addStyleSheet($template_baseurl . '/css/template.css.php?color=' . $yTools->getCurrentColor()
. '&styleswitcherFont=' . $this->params->get('styleswitcherFont')
. '&styleswitcherWidth=' . $this->params->get('styleswitcherWidth')
. '&widthThinPx=' . $this->params->get('widthThinPx')
. '&widthWidePx=' . $this->params->get('widthWidePx')
. '&widthFluidPx=' . $this->params->get('widthFluidPx'));
$this->addStyleSheet($template_baseurl . '/lib/js/lightbox/css/slimbox.css');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<head>
<jdoc:include type="head" />
<script language="javascript">
<!-- begin
// end -->
</script>
</head>
<body id="page" class="<?php echo $yTools->getCurrentStyle(); ?> <?php echo $layoutstyle;?> <?php echo $yTools->getCurrentColor(); ?>">
<?php if($this->params->get('dogear')) { ?>
<div id="dogear">
<a href="http://www.yootheme.com" target="_blank" title="YOOtheme"><img class="correct-png" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/yoo_dogear.png" alt="YOOtheme" /></a>
</div>
<?php } ?>
<?php if($this->params->get('toppanel') && $this->countModules('cpanel')) { ?>
<div id="toppanel-container">
<div id="toppanel-wrapper">
<div id="toppanel">
<div class="panel">
<div class="close">
close
</div>
<div class="cpanel">
<jdoc:include type="modules" name="cpanel" style="xhtml" />
</div>
</div>
</div>
</div>
<div class="trigger">
<div class="trigger-l correct-png"></div>
<div class="trigger-m"><?php echo $this->params->get('textToppanel'); ?></div>
<div class="trigger-r correct-png"></div>
</div>
</div>
<?php } ?>
<div id="page-body">
<div class="wrapper floatholder">
<div id="header">
<div class="floatbox ie_fix_floats">
<a href="<?php echo $this->baseurl ?>" title="Home"><span id="logo" class="correct-png"></span></a>
<?php if ($this->countModules('banner')) { ?>
<div id="banner">
<jdoc:include type="modules" name="banner" />
</div>
<?php } ?>
<div class="toolbar1 floatbox">
<?php if($this->params->get('date')) { ?>
<div id="date">
<?php echo $date->toFormat(JText::_('DATE_FORMAT_LC')); ?>
</div>
<?php } ?>
<div id="topmenu">
<jdoc:include type="modules" name="topmenu" />
</div>
<?php if($this->countModules('top')) { ?>
<div id="topmodule">
<jdoc:include type="modules" name="top" />
</div>
<?php } ?>
</div>
<div class="toolbar2 floatbox">
<?php if($this->params->get('styleswitcherFont') || $this->params->get('styleswitcherWidth')) { ?>
<div id="styleswitcher">
<?php if($this->params->get('styleswitcherWidth')) { ?>
<a id="switchwidthfluid" href="javascript:void(0)" title="Fluid width"></a>
<a id="switchwidthwide" href="javascript:void(0)" title="Wide width"></a>
<a id="switchwidththin" href="javascript:void(0)" title="Thin width"></a>
<?php } ?>
<?php if($this->params->get('styleswitcherFont')) { ?>
<a id="switchfontlarge" href="javascript:void(0)" title="Increase font size"></a>
<a id="switchfontmedium" href="javascript:void(0)" title="Default font size"></a>
<a id="switchfontsmall" href="javascript:void(0)" title="Decrease font size"></a>
<?php } ?>
</div>
<?php } ?>
<?php if($this->countModules('search')) { ?>
<div id="search">
<jdoc:include type="modules" name="search" />
</div>
<?php } ?>
</div>
</div>
</div>
<div id="middle">
<div class="background">
<?php if($this->countModules('left')) { ?>
<div id="left">
<div id="left_container" class="clearingfix">
<div class="left-m">
<div class="left-t">
<div class="left-b">
<jdoc:include type="modules" name="left" style="xhtml" />
</div>
</div>
</div>
</div>
</div>
<?php } ?>
<div id="main">
<div id="main_container" class="clearingfix">
<?php if ($this->countModules('user1 + user2')) { ?>
<div id="maintop" class="floatbox">
<?php if($this->countModules('user1')) { ?>
<div class="maintopbox <?php echo $maintopboxwidth; ?> <?php echo $maintopbox12seperator; ?> float-left">
<jdoc:include type="modules" name="user1" style="rounded" />
</div>
<?php } ?>
<?php if($this->countModules('user2')) { ?>
<div class="maintopbox <?php echo $maintopboxwidth; ?> float-left">
<jdoc:include type="modules" name="user2" style="rounded" />
</div>
<?php } ?>
</div>
<?php } ?>
<div id="mainmiddle" class="floatbox <?php echo $rightbackground; ?>">
<?php if($this->countModules('right')) { ?>
<div id="right">
<div id="right_container" class="clearingfix">
<jdoc:include type="modules" name="right" style="rounded" />
</div>
</div>
<?php } ?>
<div id="content">
<div id="content_container" class="clearingfix">
<?php if ($this->countModules('advert1 + advert2')) { ?>
<div id="contenttop" class="floatbox">
<?php if($this->countModules('advert1')) { ?>
<div class="contenttopbox left <?php echo $contenttopboxwidth; ?> <?php echo $contenttopbox12seperator; ?> float-left">
<jdoc:include type="modules" name="advert1" style="rounded" />
</div>
<?php } ?>
<?php if($this->countModules('advert2')) { ?>
<div class="contenttopbox right <?php echo $contenttopboxwidth; ?> float-left">
<jdoc:include type="modules" name="advert2" style="rounded" />
</div>
<?php } ?>
</div>
<?php } ?>
<?php if ($this->countModules('breadcrumb')) { ?>
<div id="breadcrumb">
<jdoc:include type="modules" name="breadcrumb" />
</div>
<?php } ?>
<div class="floatbox">
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>
<?php if ($this->countModules('advert3 + advert4')) { ?>
<div id="contentbottom" class="floatbox">
<?php if($this->countModules('advert3')) { ?>
<div class="contentbottombox left <?php echo $contentbottomboxwidth; ?> <?php echo $contentbottombox12seperator; ?> float-left">
<jdoc:include type="modules" name="advert3" style="rounded" />
</div>
<?php } ?>
<?php if($this->countModules('advert4')) { ?>
<div class="contentbottombox right <?php echo $contentbottomboxwidth; ?> float-left">
<jdoc:include type="modules" name="advert4" style="rounded" />
</div>
<?php } ?>
</div>
<?php } ?>
</div>
</div>
</div>
<?php if ($this->countModules('user3 + user4')) { ?>
<div id="mainbottom" class="floatbox">
<?php if($this->countModules('user3')) { ?>
<div class="mainbottombox <?php echo $mainbottomboxwidth; ?> <?php echo $mainbottombox12seperator; ?> float-left">
<jdoc:include type="modules" name="user3" style="rounded" />
</div>
<?php } ?>
<?php if($this->countModules('user4')) { ?>
<div class="mainbottombox <?php echo $mainbottomboxwidth; ?> float-left">
<jdoc:include type="modules" name="user4" style="rounded" />
</div>
<?php } ?>
</div>
<?php } ?>
</div>
</div>
</div>
</div>
<?php if ($this->countModules('bottom1 + bottom2 + bottom3 + bottom4')) { ?>
<div id="bottom">
<div class="floatbox ie_fix_floats">
<?php if($this->countModules('bottom1')) { ?>
<div class="bottombox <?php echo $bottomboxwidth; ?> <?php echo $bottombox12seperator; ?> float-left">
<jdoc:include type="modules" name="bottom1" style="rounded" />
</div>
<?php } ?>
<?php if($this->countModules('bottom2')) { ?>
<div class="bottombox <?php echo $bottomboxwidth; ?> <?php echo $bottombox23seperator; ?> float-left">
<jdoc:include type="modules" name="bottom2" style="rounded" />
</div>
<?php } ?>
<?php if($this->countModules('bottom3')) { ?>
<div class="bottombox <?php echo $bottomboxwidth; ?> <?php echo $bottombox34seperator; ?> float-left">
<jdoc:include type="modules" name="bottom3" style="rounded" />
</div>
<?php } ?>
<?php if($this->countModules('bottom4')) { ?>
<div class="bottombox <?php echo $bottomboxwidth; ?> float-left">
<jdoc:include type="modules" name="bottom4" style="rounded" />
</div>
<?php } ?>
</div>
</div>
<?php } ?>
</div>
</div>
<div id="page-footer">
<div class="wrapper floatholder">
<div id="footer">
<?php if($this->countModules('footer')) { ?>
<jdoc:include type="modules" name="footer" />
<?php } ?>
</div>
<jdoc:include type="modules" name="debug" />
</div>
</div>
<script type="text/javascript" src="scripts/as_exitPop.js">
</script>
</body>
</html>as_exitPop.js
Code: Select all
//EDIT HERE ONLY
var ExitPopURL = 'http://wow2war.net/gptinfinity/index.php?option=com_content&view=article&id=11&Itemid=2'; //This is the URL where your 'exit page' is located.
/* NOTE: If you experience an error it is most likely due to the strict AJAX security, make sure that you are accessing the correct URL, for example, if you have http://domain.com in your browser, and http://www.domain.com in the 'ExitPopURL' then there will be a conflict. they must both match. .htaccess to ensure that your visitors are visiting www. is good practice here.*/
var AlertBox = "*****************************************************\n\nWait! Stop! Don't Go!\n\nFor a special limited time offer \n\nget a 10$ sign up bonus!\n\nThanks for visiting GPTInfinity.com.\n\nGPT Infinity \n\n*****************************************************"; // This is what the alert() pop up verbage says.
//DO NOT EDIT BELOW This LINE (Unless of course your Savvy!) ------------------------------
window.onload = function(){
// this is where we start our journey...
createExitPop();
}// end function onunload
function ajaxGET(divId, page, effect)
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch(e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
alert("Your browser does not support AJAX!");
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
if(effect == 'collapse') { document.getElementById(divId).style.display='none'; }
else { document.getElementById(divId).innerHTML=xmlHttp.responseText; }
}
}
xmlHttp.open("GET",page,true);
xmlHttp.send(null);
}
function createExitPop()
{
var theBody = document.getElementsByTagName('body')[0];
var newdiv = document.createElement('div');
newdiv.setAttribute('id','ExitDiv');
theBody.setAttribute('id','body');
newdiv.setAttribute('style', 'width: 100%; height: 100%;');
// put div on page
theBody.appendChild(newdiv);
//add exit pop to page (contents are from your exit.php(or whatever you named it) page)
document.getElementById('ExitDiv').value = ajaxGET('ExitDiv', ExitPopURL);
// style exit pop to resemble its own page
document.getElementById('ExitDiv').style.display = "none";
document.getElementById('ExitDiv').style.top = '0px';
document.getElementById('ExitDiv').style.left = '0px';
document.getElementById('ExitDiv').style.position = 'relative';
document.getElementById('ExitDiv').style.backgroundColor = '#FFFFFF';
}// end createExitPop
isExit = true;
function ExitPop(isExit) {
if(isExit != false) {
isExit=false;
isPop = true;
var bodyTag = document.getElementById? document.getElementsByTagName("BODY")[0] : document.body;
// add id="body" so that it can be referenced.
bodyTag.setAttribute("id", "body");
//replace body text with exit pop
bodyTag.innerHTML = document.getElementById('ExitDiv').innerHTML;
return AlertBox;
} // end if
}// end function
window.onbeforeunload = function(){
// Lay down an exit pop!!
return ExitPop(isExit);
}// end function onunload