On Exit Pop-up

Contact the Development Working Group here: http://groups.google.com/group/joomla-dev-general

This forum is now closed and archived.
sirkhan
Joomla! Fledgling
Joomla! Fledgling
Posts: 1
Joined: Fri Oct 30, 2009 7:33 am

On Exit Pop-up

Postby sirkhan » Fri Oct 30, 2009 7:53 am

Ok so i have been trying to get an "on exit popup" to work on my joomla site for the past few days and have run into a few snags that i can not get pass.

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()
                                             . '&amp;styleswitcherFont=' . $this->params->get('styleswitcherFont')
                                             . '&amp;styleswitcherWidth=' . $this->params->get('styleswitcherWidth')
                                             . '&amp;widthThinPx=' . $this->params->get('widthThinPx')
                                             . '&amp;widthWidePx=' . $this->params->get('widthWidePx')
                                             . '&amp;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
You do not have the required permissions to view the files attached to this post.

Return to “Development”

Who is online

Users browsing this forum: No registered users and 1 guest