Need a simple popup (modal, on-page-load with time-delay, fast & clean)

Hi,

As long as the redirect doesn’t take place until after the data is saved, this sounds like a good solution :slight_smile:
How are you determining if the save was successful?

All the coding was used for a previous project that I worked on, I just had to incorporate the Colorbox code. At the begining I forgot to mention the redirection file, but you gave me an idea to map out what events happen and when to be able to know where to place the automatic closing. Additionally, I checked the file that the information saves to. I have been looking for this solution for about 2yrs. now, I just did’t know all of the coding. Thank you, again!

Hi guys, thank you for this post. It was really helpful for me as well.

My popup works fine but for some reason it blocked my banner-carousel (pluit-carousel) from working and sliding images.
I wonder if you could have a look and see what’s wrong as I can’t seem to find the problem here.

if I can’t post the link I’ll message you in private.

Hi,

By blocked do you mean, “caused it not to work”?

Yeah, it doesn’t start sliding and I can’t change between images anymore.
If I disable jquery script (hide it with <!-- –> ) it works again

Are you seeing any errors in your browser’s console?

Hi, not regarding the colorbox or the carousel
I’m going to list them anyway, but they pertain to different .js files

Uncaught TypeError: Cannot read property ‘src’ of null
Uncaught ReferenceError: d is not defined
Uncaught TypeError: undefined is not a function
Uncaught ReferenceError: jQuery is not defined
Uncaught TypeError: Cannot set property ‘width’ of undefined

To add:
If I disable the popup it removes quite a few errors and “Uncaught TypeError: undefined is not a function” doesn’t appear.

Yeah, then it’d be better to have a look at the site.
You can’t post a link until you have 10 posts under your belt, so if you PM me it instead, that’ll be fine.

Ok Pullo, I’ve sent you a pm. Thanks!

Link: http://www.sntravel.co.uk/

Hi,

Thanks for that.
I added the link to your post in case anyone else wants to offer an opinion.

In the meantime, when I look at the page in the browser, I see the following:

Failed to load resource: net::ERR_BLOCKED_BY_CLIENT http://s7.addthis.com/js/300/addthis_widget.js#pubid=ra-536388b775d62aad
Uncaught TypeError: Cannot read property 'src' of null (index):80
Uncaught ReferenceError: d is not defined (index):102
Uncaught ReferenceError: addthis is not defined (index):155
Uncaught ReferenceError: addthis is not defined (index):195
Uncaught TypeError: undefined is not a function searchframe.js:1
2Uncaught TypeError: undefined is not a function prototype.js:8
Failed to load resource: net::ERR_BLOCKED_BY_CLIENT http://stats.g.doubleclick.net/dc.js
Failed to load resource: net::ERR_BLOCKED_BY_CLIENT http://www.formget.com/app/app_data/new-widget/popup.js
replacing tracker button for AddThis socialwidgets.js:290
Failed to load resource: net::ERR_BLOCKED_BY_CLIENT http://static.ak.facebook.com/connect/xd_arbiter/W2xi4Tmu0YA.js?version=41#channel=f1cdd4fc6&origin=http%3A%2F%2Fwww.sntravel.co.uk
clobbering cookies for Location
replacing tracker button for AddThis socialwidgets.js:290
Failed to load resource: net::ERR_BLOCKED_BY_CLIENT http://googleads.g.doubleclick.net/pagead/viewthroughconversion/969849441/?&#8230;va=true&u_nplug=4&u_nmime=7&frm=0&url=http%3A//www.sntravel.co.uk/&async=1
Failed to load resource: net::ERR_BLOCKED_BY_CLIENT http://dni2_0.agcdn.com/
2Uncaught #<Object> gtm.js?id=GTM-K9SKH3:51
Uncaught ReferenceError: jQuery is not defined tab_hotel_flight.phtml?country=&destair=:28
Uncaught TypeError: Cannot set property 'width' of undefined lightbox.js:1
Uncaught #<Object> gtm.js?id=GTM-K9SKH3:51
Uncaught TypeError: undefined is not a function prototype.js:1
Uncaught #<Object> gtm.js?id=GTM-K9SKH3:51
replacing tracker button for AddThis socialwidgets.js:290
Given URL is not allowed by the Application configuration.: One or more of the given URLs is not allowed by the App's settings.  It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains.
clobbering cookies for Location
replacing tracker button for AddThis socialwidgets.js:290
clobbering cookies for Location
replacing tracker button for AddThis socialwidgets.js:290
Failed to load resource: the server responded with a status of 404 (Not Found) http://static3.traveltek.net/images/www.sntravel.co.uk/images/loading.gif
Failed to load resource: the server responded with a status of 404 (Not Found) http://static3.traveltek.net/images/www.sntravel.co.uk/images/loading_background.png
replacing tracker button for AddThis socialwidgets.js:290
GET http://static1.traveltek.net/images/www.sntravel.co.uk/js/jquery.min.map 404 (Not Found) 

Ouch!

Would it be possible for you to make a simple page without any content, which just includes the popup and the slider?
When you’ve done that, hopefully things will be a bit easier to unravel.

Is this fine?

I had to disable the script because it was not displaying the searchbox correctly.
Let me know when you can have a look so I can turn it on pleaser

I can have a look this evening.

Hi there,

As promised, I had a look.
This is probably not what you want to hear, but the page is a bit of a mess and needs a bit of sorting out.

There are multiple issues, such as inline JS, inline CSS, stray/unclosed tags, invalid markup.
If you run your page through the W3C Validator, the validator chokes and dies on the second opening <body> tag (presumably something to do with one of the widgets).

You’re also including your JavaScript multiple times (e.g. Pluit Slider on line 18 and line 555) and in the wrong order.

I boiled all of this down to a small page that reproduces your issue:


<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <base href="http://www.sntravel.co.uk/" />
    <title>Demo </title>

    <link href="http://static1.traveltek.net/images/www.sntravel.co.uk/css/pluit-carousel.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="http://static1.traveltek.net/images/www.sntravel.co.uk/css/sn.css">
    <link rel="stylesheet" type="text/css" href="http://static3.traveltek.net/images/www.sntravel.co.uk/css/new_sn.css">
    <link rel="stylesheet" href="http://static2.traveltek.net/images/www.sntravel.co.uk/css/colorbox.css" />
  </head>

  <body id="body">
    <div id="wrapper" class="boxBorder">
      <div id="header2">

        <div id="newsletterlink" style="display: none;">
          <div style="padding:10px;">
            <form onsubmit="return checkform();" action="/email_addnew.phtml" method="get" id="newsletter">
              <input type="hidden" name="listident" value="web-signups">
              <input type="hidden" name="createcustomer" value="Y">
              <table width="343" border="0">
                <tr>
                  <td><span style="font-weight:bold">Email Address:</span></td>
                  <td><input id="email" name="email" value="enter email" onClick="this.value=''"></td>
                </tr>
                <tr>
                  <td><span style="font-weight:bold">First Name::</span></td>
                  <td><input id="firstname" name="firstname" value="enter first name" onClick="this.value=''"></td>
                </tr>
                <tr>
                  <td><span style="font-weight:bold">Surname:</span></td>
                  <td><input id="surname" name="surname" value="enter last name" onClick="this.value=''"></td>
                </tr>
              </table>
              <br /><input type="submit" name="signup" value="Sign Up Now" class="btnLg right">
              <div class="clear"></div>
            </form>
          </div>
        </div>

        <a class="headerImg" href="http://www.sntravel.co.uk/"><img src="http://static2.traveltek.net/images/www.sntravel.co.uk/logo.png" title="SN Travel Homepage" alt="SN Travel"/></a>
        <div class="contact">
          <span class="callexpert">Call one of our experts:</span><br>
          <span class="tel"; style="color:#ed9107;">020 7241 7172</span></div>
          <div id="navNew">
            <div class="clear"></div>
          </div>
        </div>
        <div id="content">
          <div id="homepage">
            <div id="rightCol">
              <div id="carousel" class="pluit-carousel photo-tag-skin fancy-nav-skin">
                <div class="viewport" id="viewportid">
                  <ul>
                    <li><div class="carouselImage">
                      <a href="http://www.sntravel.co.uk/specialbooking_address.phtml"><img src="http://www.sntravel.co.uk/uploaded/2014/8/1408532245.jpg"></a>
                    </div></li>
                    <li><div class="carouselImage">
                      <a href="http://www.sntravel.co.uk/location/19182/north-america/caribbean?country=Caribbean&destair=MBJ"><img src="http://www.sntravel.co.uk/uploaded/2014/8/1406908719.jpg"></a>
                    </div></li>
                    <li><div class="carouselImage">
                      <a href="http://www.sntravel.co.uk/disney_cruise.phtml"><img src="http://www.sntravel.co.uk/uploaded/2014/8/1406908717.jpg"></a>
                    </div></li>
                    <li><div class="carouselImage">
                      <a href="http://www.sntravel.co.uk/location/9805/north-america/united-states?country=USA&destair=NYC"><img src="http://www.sntravel.co.uk/uploaded/2014/8/1406908721.jpg"></a>
                    </div></li>
                    <li><div class="carouselImage">
                      <a href="http://www.sntravel.co.uk/holiday_executive_music_cruise.phtml"><img src="http://www.sntravel.co.uk/uploaded/2014/8/1406908715.jpg"></a>
                    </div></li>
                  </ul>
                </div>
                <ul class="nav" id="someid">
                  <li class="prev"><a href="#">Prev</a></li>
                  <li class="pages">
                    <ul>
                      <li class="page-1 active"><a href="#">1</a></li>
                      <li class="page-2"><a href="#">3</a></li>
                      <li class="page-3"><a href="#">26</a></li>
                      <li class="page-4"><a href="#">27</a></li>
                      <li class="page-5"><a href="#">27</a></li>
                    </ul>
                  </li>
                  <li class="next"><a href="#">Next</a></li>
                </ul>
              </div><!-- /carousel -->
            </div>
            <!-- /rightCol -->
            <div class="clear"></div>
          </div><!-- /content -->
          <div id="footer">
          </div>
        </ul>
      </div>
    </div>

    <script type="text/javascript" src="http://static2.traveltek.net/ssi/prototype.js"></script>
    <script type="text/javascript" src="http://static3.traveltek.net/ssi/scriptaculous.js?load=effects"></script>
    <script type="text/javascript" src="http://static2.traveltek.net/images/www.sntravel.co.uk/js/effects.js"></script>
    <script type="text/javascript" src="http://static0.traveltek.net/images/www.sntravel.co.uk/js/pluit-carousel.js"></script>
    <script type="text/javascript">
      Event.observe(window, 'load', function() {
      // Initialize a single carousel through an element ID
      new Pluit.Carousel('#carousel', {
        circular: true,
        autoPlay: true,
        effect:'fade',
        slideDuration: 10
      });
      });
    </script>

    <script src="http://static0.traveltek.net/images/www.sntravel.co.uk/js/jquery.min.js"></script>
    <script src="http://static1.traveltek.net/images/www.sntravel.co.uk/js/jquery.colorbox.js"></script>
    <script>
      function openColorBox(){
        $.colorbox({iframe:true, width:"310px", height:"593px", escKey: false, loop: false, scrolling: false, overlayClose: false, href: "/images/www.sntravel.co.uk/popup.html"});
      }

      setTimeout(openColorBox, 1000);
    </script>
  </body>
</html>

Once we have this, the problem becomes obvious: the carousel relies on the Prototype library, the lightbox effect on jQuery. Out of the box, these two libraries are not compatible, as they both make use of the $ variable.

You can either use a different, more modern carousel, such as this one, or you need to run jQuery in no-conflict mode, like so:

function openColorBox(){
  [B]jQuery[/B].colorbox({iframe:true, width:"310px", height:"593px", escKey: false, loop: false, scrolling: false, overlayClose: false, href: "/images/www.sntravel.co.uk/popup.html"});
}
[B]$.noConflict();[/B]
setTimeout(openColorBox, 1000);

Here’s the complete code:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <base href="http://www.sntravel.co.uk/" />
    <title>Demo </title>

    <link href="http://static1.traveltek.net/images/www.sntravel.co.uk/css/pluit-carousel.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="http://static1.traveltek.net/images/www.sntravel.co.uk/css/sn.css">
    <link rel="stylesheet" type="text/css" href="http://static3.traveltek.net/images/www.sntravel.co.uk/css/new_sn.css">
    <link rel="stylesheet" href="http://static2.traveltek.net/images/www.sntravel.co.uk/css/colorbox.css" />
  </head>

  <body id="body">
    <div id="wrapper" class="boxBorder">
      <div id="header2">
        <div id="newsletterlink" style="display: none;">
          <div style="padding:10px;">
            <form onsubmit="return checkform();" action="/email_addnew.phtml" method="get" id="newsletter">
              <input type="hidden" name="listident" value="web-signups">
              <input type="hidden" name="createcustomer" value="Y">
              <table width="343" border="0">
                <tr>
                  <td><span style="font-weight:bold">Email Address:</span></td>
                  <td><input id="email" name="email" value="enter email" onClick="this.value=''"></td>
                </tr>
                <tr>
                  <td><span style="font-weight:bold">First Name::</span></td>
                  <td><input id="firstname" name="firstname" value="enter first name" onClick="this.value=''"></td>
                </tr>
                <tr>
                  <td><span style="font-weight:bold">Surname:</span></td>
                  <td><input id="surname" name="surname" value="enter last name" onClick="this.value=''"></td>
                </tr>
              </table>
              <br /><input type="submit" name="signup" value="Sign Up Now" class="btnLg right">
              <div class="clear"></div>
            </form>
          </div>
        </div>

        <a class="headerImg" href="http://www.sntravel.co.uk/"><img src="http://static2.traveltek.net/images/www.sntravel.co.uk/logo.png" title="SN Travel Homepage" alt="SN Travel"/></a>
        <div class="contact">
          <span class="callexpert">Call one of our experts:</span><br>
          <span class="tel"; style="color:#ed9107;">020 7241 7172</span></div>
          <div id="navNew">
            <div class="clear"></div>
          </div>
        </div>
        <div id="content">
          <div id="homepage">
            <div id="rightCol">
              <div id="carousel" class="pluit-carousel photo-tag-skin fancy-nav-skin">
                <div class="viewport" id="viewportid">
                  <ul>
                    <li><div class="carouselImage">
                      <a href="http://www.sntravel.co.uk/specialbooking_address.phtml"><img src="http://www.sntravel.co.uk/uploaded/2014/8/1408532245.jpg"></a>
                    </div></li>
                    <li><div class="carouselImage">
                      <a href="http://www.sntravel.co.uk/location/19182/north-america/caribbean?country=Caribbean&destair=MBJ"><img src="http://www.sntravel.co.uk/uploaded/2014/8/1406908719.jpg"></a>
                    </div></li>
                    <li><div class="carouselImage">
                      <a href="http://www.sntravel.co.uk/disney_cruise.phtml"><img src="http://www.sntravel.co.uk/uploaded/2014/8/1406908717.jpg"></a>
                    </div></li>
                    <li><div class="carouselImage">
                      <a href="http://www.sntravel.co.uk/location/9805/north-america/united-states?country=USA&destair=NYC"><img src="http://www.sntravel.co.uk/uploaded/2014/8/1406908721.jpg"></a>
                    </div></li>
                    <li><div class="carouselImage">
                      <a href="http://www.sntravel.co.uk/holiday_executive_music_cruise.phtml"><img src="http://www.sntravel.co.uk/uploaded/2014/8/1406908715.jpg"></a>
                    </div></li>
                  </ul>
                </div>
                <ul class="nav" id="someid">
                  <li class="prev"><a href="#">Prev</a></li>
                  <li class="pages">
                    <ul>
                      <li class="page-1 active"><a href="#">1</a></li>
                      <li class="page-2"><a href="#">3</a></li>
                      <li class="page-3"><a href="#">26</a></li>
                      <li class="page-4"><a href="#">27</a></li>
                      <li class="page-5"><a href="#">27</a></li>
                    </ul>
                  </li>
                  <li class="next"><a href="#">Next</a></li>
                </ul>
              </div><!-- /carousel -->
            </div>
            <!-- /rightCol -->
            <div class="clear"></div>
          </div><!-- /content -->
          <div id="footer">
          </div>
        </ul>
      </div>
    </div>

    <script type="text/javascript" src="http://static2.traveltek.net/ssi/prototype.js"></script>
    <script type="text/javascript" src="http://static3.traveltek.net/ssi/scriptaculous.js?load=effects"></script>
    <script type="text/javascript" src="http://static2.traveltek.net/images/www.sntravel.co.uk/js/effects.js"></script>
    <script type="text/javascript" src="http://static0.traveltek.net/images/www.sntravel.co.uk/js/pluit-carousel.js"></script>
    <script type="text/javascript">
      Event.observe(window, 'load', function() {
      // Initialize a single carousel through an element ID
      new Pluit.Carousel('#carousel', {
        circular: true,
        autoPlay: true,
        effect:'fade',
        slideDuration: 10
      });
      });
    </script>

    <script src="http://static0.traveltek.net/images/www.sntravel.co.uk/js/jquery.min.js"></script>
    <script src="http://static1.traveltek.net/images/www.sntravel.co.uk/js/jquery.colorbox.js"></script>
    <script>
      function openColorBox(){
        jQuery.colorbox({iframe:true, width:"310px", height:"593px", escKey: false, loop: false, scrolling: false, overlayClose: false, href: "/images/www.sntravel.co.uk/popup.html"});
      }
      $.noConflict();
      setTimeout(openColorBox, 1000);
    </script>
  </body>
</html>

You can read more about no conflict mode here: http://api.jquery.com/jquery.noconflict/
HTH

1 Like

I know, the thing is it’s managed through a CMS and divided in different blocks such as site_header, content, site_footer and some of them are unique for different pages (it’s crap)
so I can edit yes, but it’s not as easy as having a single .html page :frowning:

But I can grab some of the code for sure and reorder the page. Thank you SO MUCH!
With this I’m pretty sure I can make them coexist easily, or change slider if it all fails.

Thanks a lot again, I’ll update this if I manage to fix it :slight_smile:

Update, managed to make them work together. You are awesome.
Thank you mate.

Edit: also thank you for the responsive carousel. I’ll work on that too

No problem :slight_smile:
Glad you got it sorted geezer!

Hi again Pullo, I’m trying to set the popup to show only once (needs a cookie)
but I’m not sure if this code I found on the colorbox page is right for my no-conflict script:

jQuery(document).ready(function(){
    if (document.cookie.indexOf('visited=true') == -1) {
        var fifteenDays = 1000*60*60*24*15;
        var expires = new Date((new Date()).valueOf() + fifteenDays);
        document.cookie = "visited=true;expires=" + expires.toUTCString();
        $.colorbox({width:"30%", inline:true, href:"#subscribe"});
    }
});

No conflict means that jQuer releases control of the $ variable.
You would therefore need to change this:

$.colorbox({width:"30%", inline:true, href:"#subscribe"});

to this:

[B]jQuery[/B].colorbox({width:"30%", inline:true, href:"#subscribe"});