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

JavaScript
41

I think my script should be different. I’ll post all the code so you can have a better idea.

<script src="/images/www.sntravel.co.uk/js/jquery.min.js"></script>
<script src="/images/www.sntravel.co.uk/js/jquery.colorbox.js"></script>
 <script>
      function openColorBox(){
        jQuery.colorbox({iframe:true, width:"300px", height:"700px", maxWidth:'80%', maxHeight:'100%', escKey: false, loop: false, scrolling: false, overlayClose: false, href: "/images/www.sntravel.co.uk/popup.html"}); 
      }
      $.noConflict();
      setTimeout(openColorBox, 6000);
    </script>

<script type="text/javascript"> 
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();
        jQuery.colorbox({width:"30%", inline:true, href:"#subscribe"});
    }
});
             </script>
42

Not really. Are you testing locally?

43

No I’m doing that live as it appears to work anyway, the only problem is it doesn’t stop showing up

code:

<script src="/images/www.sntravel.co.uk/js/jquery.min.js"></script>
<script src="/images/www.sntravel.co.uk/js/jquery.colorbox.js"></script>
 <script>
      function openColorBox(){
        jQuery.colorbox({iframe:true, width:"300px", height:"700px", maxWidth:'80%', maxHeight:'100%', escKey: false, loop: false, scrolling: false, overlayClose: false, href: "/images/www.sntravel.co.uk/popup.html"}); 
      }
      $.noConflict();
      setTimeout(openColorBox, 6000);
    </script>

<script type="text/javascript"> 
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();
        jQuery.colorbox({width:"300px", inline:true, href:"/images/www.sntravel.co.uk/popup.html"});
    }
});
             </script>

Here’s the web site.

44

Hi,

When I look at the page you sent me in the PM (and that I then added to the above post), I see the following in the console:

Uncaught ReferenceError: d is not defined offerdetail.pl?id=241338&zoneid=2530:81
Invalid App Id: Must be a number or numeric string representing the application id. sdk.js:57
Uncaught TypeError: Cannot read property 'src' of null offerdetail.pl?id=241338&zoneid=2530:251
Uncaught TypeError: Cannot read property 'getElementsByTagName' of null offerdetail.pl?id=241338&zoneid=2530:455

I don’t however find any reference to cookies in the document’s source code.
Did I miss something?

45

The website link is www.sntravel.co.uk sorry, not the one I posted earlier

46

On that page the console says:

Uncaught ReferenceError: d is not defined (index):493
Uncaught TypeError: Cannot read property 'src' of null (index):521
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.
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
Failed to load resource: the server responded with a status of 404 (Not Found) http://static0.traveltek.net/images/www.sntravel.co.uk/images/loading_background.png
Failed to load resource: the server responded with a status of 404 (Not Found) http://static0.traveltek.net/images/www.sntravel.co.uk/images/loading.gif
GET http://static2.traveltek.net/images/www.sntravel.co.uk/js/jquery.min.map 404 (Not Found) static2.traveltek.net/images/www.sntravel.co.uk/js/jquery.min.map:1

The killer there is “jQuery is not defined”. I would start by having a look at that.

47

I have no idea about javascript or jquery unfortunately

48

I gotta go to work now, so I can take a look this evening or maybe tomorrow.
However, I would really advise you to clean up as much of your page as you can (I appreciate you may not be able to access everything).
Even if we get this working, then the same thing will happen with then next addition you want to make, and the next, and the next …
How much of the page can you actually alter?

49

I can modify the site_header part which has all the links to css and js files, and the footer section as well.
I’m not sure how to clean it properly though so any help is well appreciated.
I will send you on a private message the full html of the header so you can have a look later

50

I’m trying to use this carousel

I’d like to have it work like in this page

but to me it appears all messed up.

I linked the jquery and css js files but it looks messed up. I’m probably missing some html and css tweaks but not sure what to do.

it looks like this on my page:

[ATTACH=CONFIG]65611[/ATTACH]

this is the code I’m using on my html page:

<script type="text/javascript">
  $(document).ready(function(){
    
$('.bxslider').bxSlider({
  auto: true,
  autoControls: true
});
  });
</script>
      <ul class="bxslider">
  <li><img src="images/hill_trees.jpg" /></li>
  <li><img src="images/me_trees.jpg" /></li>
  <li><img src="images/houses.jpg" /></li>
</ul>
51

Hi,

There are two issues here:

  • The state of your site’s code
  • The slider

I’ll have a look at the first issue when I get back, as you really need to sort this, before you can make anything else work properly.

Can you make a test page (without content), that we can work on?

52

Hi Pullo, I have a parallel website that I can access while coding but you won’t be able to see the results on that.
I’m not sure how to strip all of it as I told you it’s divided in many blocks which can’t be accessed properly.

What content should I try to remove?

53

Well, I’m guessing you work with some kind of CMS which will include some amount of boilerplate.
What would be really helpful is to see what the minimum you can start with is.

Ideally a web page should be structured like this:

<!DOCTYPE HTML>
<html>
  <head>
  <meta charset="utf-8">
  <title></title>
    STYLESHEETS HERE
  </head>

  <body>
    YOUR STUFF HERE

    JAVASCRIPT LIBRARIES HERE
  </body>
</html>

The page shouldn’t include any inline CSS or JS. At a push you can put any miscellaneous styles between <style> tags in the head and any miscellaneous scripts between <script> tags at the bottom of the page.

Do you think that is something we can achieve?

54

Ok I think we can manage, I’ll work on it tomorrow and let you know thanks!

55

there you go, thanks

56

Nice one!
I’ll have a look at this later on.

Just to be sure: am I correct in thinking that you are able to alter the order that the scripts are included?

57

yeah I can alter the order no problem

58

So, I recreated your site on my PC and got the following errors:

GET http://static3.traveltek.net/images/www.sntravel.co.uk/js/jquery.min.map 404 (Not Found)
Uncaught TypeError: undefined is not a function
Uncaught ReferenceError: d is not defined
Uncaught TypeError: Cannot read property 'src' of null
GET http://localhost/images/www.sntravel.co.uk/js/track.js  gtm.js?id=GTM-K9SKH3:52
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. ping?client_id=500072273433614&domain=localhost&origin=1&redirect_uri=http%3A%2F%2Fstatic.ak.facebo…:1
GET http://localhost/images/loading.gif 404 (Not Found) loading.gif:1
GET http://localhost/images/closelabel.gif 404 (Not Found) closelabel.gif:1
GET http://localhost/images/lw-black.png 404 (Not Found)

The first (jquery.min.map) is to do with a missing map file for jQuery:
Updating your version of jQuery would get rid of it.

The second (undefined is not a function), is something to do with the colorbox script.

The third (d is not defined) is something to do with tthe formget script

The forth (Cannot read property ‘src’ of null ) is something to do with the anonymous function at the bootom of the page:

(function() {
  var matcher = /.*\\/([^\\/]*\\.\\w+)$/.exec($('flightLogo_in_%RESULTNO%').src);
  if (matcher[1] == 'VS.gif' || matcher[1] == 'VS.gif') {
    $('flightLogo_in_%RESULTNO%').hide();
  }
}());

The fifth is a cross domain issue to do with Facebook

And the last three are images (presumably from colorbox) that are missing. As you can see, the script is looking under localhost

So, back to our problem, the following should fix the first error:

change

$.noConflict();

to:

jQuery.noConflict();

After that, what would you like to happen. Presumably, once the user has seen the popup, they shouldn’t be bothered for a certain amount of time?

59

Hi Pullo, I changed the code. Yes it would need to set a cookie that recognizes the user and doesn’t let the popup re appear on a second visit.

60

Ok, well let’s change the JS to this:

function openColorBox(){
  jQuery.colorbox({
    iframe:true,
    width:"300px",
    height:"700px",
    maxWidth:'80%',
    maxHeight:'100%',
    escKey: false,
    loop: false,
    scrolling: false,
    overlayClose: false,
    href: "http://www.sntravel.co.uk/images/www.sntravel.co.uk/popup.html"
  });
}

setTimeout(function(){
  var hasVisitedBefore = false;

   if(!hasVisitedBefore){
      openColorBox();
      
  }, 1000
);

As you can see, when the page loads we are checking the contents of the variable hasVisitedBefore (which is set to false).
We then open the popup if this value is falsy (i.e. the user has NOT vistited before).

Now let’s include a jQuery cookie library. This gives us a nice set of cross-browser functions for dealing with cookies.

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

Now, let’s set a cookie once the colorbox has displayed once:

if(!hasVisitedBefore){
  openColorBox();
  jQuery.cookie('hasVisitedBefore', true, { expires: 99, path: '/' });
}

This creates a cookie, which expires in 99 days and is valid across entire site.

Now, when the page loads, we check for the presence of the cookie and assign it to our variable:

var hasVisitedBefore = jQuery.cookie('hasVisitedBefore');

If the cookie has not been set, the value will be nil, so the colorbox will open.

Here’s the complete code:


<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="description" content="%pagedescription%">
  <meta name="keywords" content="%pagekeywords%">
  <title>SN Travel (Stoke Newington Travel) - Caribbean Holidays and More...</title>
  <link rel="icon" href="http://static3.traveltek.net/images/www.sntravel.co.uk/favicon.ico" type="image/x-icon" />
  <link rel="shortcut icon" href="http://static0.traveltek.net/images/www.sntravel.co.uk/favicon.ico" type="image/x-icon" />

  <link rel="stylesheet" href="http://static0.traveltek.net/ssi/lightbox.css" type="text/css" media="screen">
  <link rel="stylesheet" href="http://static1.traveltek.net/ssi/lightwindow.css" type="text/css" >
  <link rel="stylesheet" href="http://static3.traveltek.net/images/www.sntravel.co.uk/css/pluit-carousel.css" type="text/css">
  <link rel="stylesheet" href="http://static0.traveltek.net/images/www.sntravel.co.uk/css/sn.css" type="text/css">
  <link rel="stylesheet" href="http://static1.traveltek.net/images/www.sntravel.co.uk/css/viewmybooking.css" type="text/css">
  <link rel="stylesheet" href="http://static2.traveltek.net/images/www.sntravel.co.uk/css/new_sn.css" type="text/css">
  <link rel="stylesheet" href="http://static1.traveltek.net/images/www.sntravel.co.uk/css/colorbox.css" type="text/css">
  <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="http://static2.traveltek.net/images/www.sntravel.co.uk/css/sn-ie.css">
  <![endif]-->
</head>

<body>
  CONTENT
  <div id="fb-root"></div>

  <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=500072273433614";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://static0.traveltek.net/images/www.sntravel.co.uk/js/jquery.colorbox.js"></script>
  <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://static0.traveltek.net/ssi/lightbox.js"></script>
  <script type="text/javascript" src="http://static1.traveltek.net/ssi/fusion.js"></script>
  <script type="text/javascript" src="http://static2.traveltek.net/ssi/lightwindow.js"></script>
  <script type="text/javascript" src="http://static1.traveltek.net/images/www.sntravel.co.uk/js/effects.js"></script>
  <script type="text/javascript" src="http://static2.traveltek.net/images/www.sntravel.co.uk/js/track.js"></script>
  <script type="text/javascript" src="http://static3.traveltek.net/images/www.sntravel.co.uk/js/pluit-carousel.js"></script>
  <script type="text/javascript" src="http://static3.traveltek.net/images/www.sntravel.co.uk/js/pluit-carousel.js"></script>
  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

  <script>
    function openColorBox(){
      jQuery.colorbox({
        iframe:true,
        width:"300px",
        height:"700px",
        maxWidth:'80%',
        maxHeight:'100%',
        escKey: false,
        loop: false,
        scrolling: false,
        overlayClose: false,
        href: "http://www.sntravel.co.uk/images/www.sntravel.co.uk/popup.html"
      });
    }

    setTimeout(function(){
        var hasVisitedBefore = jQuery.cookie('hasVisitedBefore');

        if(!hasVisitedBefore){
          openColorBox();
          jQuery.cookie('hasVisitedBefore', true, { expires: 99, path: '/' });
        }
      }, 1000
    );
  </script>

  <!-- FOLLOW AND SHARE SCRIPT START-->
  <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-536388b775d62aad"></script>
  <script type="text/javascript">
    addthis.layers({
      'theme' : 'transparent',
      'responsive' : {
        'maxWidth' : '979px',
        'minWidth' : '0px'
      },
      'share' : {
        'position' : 'right',
        'services' : 'facebook,twitter,google_plusone_share,print',
        //'numPreferredServices' : 5,
        'title': 'Caribbean Specialists, Share for special offers and last minute deals',
        'desktop' : true,
        'mobile' : true,
        'offset' : {'top': '130px'}
      },

      'follow' : {
        'title':'Follow us on:',
        'desktop' : 'true',
        'mobile' : 'true',
        'services' : [
        {'service': 'facebook', 'id': 'sntravelholidays'},
        {'service': 'twitter', 'id': 'sntravelholiday'},
        {'service': 'google_follow', 'id': '111564810141168702893'},
        {'service': 'rss', 'id': 'http://sntravelblog.wordpress.com'}
        ],
      },
      'mobile' : {
        'buttonBarPosition' : 'top',
        'buttonBarTheme' : 'transparent',
        'mobile' : true
      }
    });
  </script>
  <!-- FOLLOW AND SHARE SCRIPT END-->

  <!-- AddThis Welcome BEGIN -->
  <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-536388b775d62aad"></script>
  <script type='text/javascript'>
    addthis.bar.initialize({'default':{
      "backgroundColor": "#777777",
      "buttonColor": "#FA971E",
      "textColor": "#FFFFFF",
      "buttonTextColor": "#FFFFFF",
      "hideAfter": 20
    },rules:[
    {
      "name": "Twitter",
      "match": {
        "referringService": "twitter"
      },
      "message": "If you find this page helpful:",
      "action": {
        "type": "button",
        "text": "Tweet it!",
        "verb": "share",
        "service": "twitter"
      }
    },
    {
      "name": "Facebook",
      "match": {
        "referringService": "facebook"
      },
      "message": "Tell your friends about us:",
      "action": {
        "type": "button",
        "text": "Share on Facebook",
        "verb": "share",
        "service": "facebook"
      }
    },
    {
      "name": "Google",
      "match": {
        "referrer": "google.com"
      },
      "message": "If you like this page, let Google know:",
      "action": {
        "type": "button",
        "text": "+1",
        "verb": "share",
        "service": "google_plusone_share"
      }
    }
    ]});
</script>
<!-- AddThis Welcome END -->

<script type="text/javascript">
  var _gaq = _gaq || [];
  var pluginUrl =
  '//www.google-analytics.com/plugins/ga/inpage_linkid.js';
  _gaq.push(['_require', 'inpage_linkid', pluginUrl]);
  _gaq.push(['_setAccount', 'UA-29531122-1']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

<!--<script type='text/javascript'>(function(s) {var head = document.getElementsByTagName('HEAD').item(0);var s= document.createElement('script');s.type = 'text/javascript';s.src='http://www.formget.com/app/app_data/new-widget/popup.js';head.appendChild(s); var options = {'tabKey': 'PMGt-58125/t','tabtext':'Send us an Enquiry!','height': '644','width': '350','tabPosition':'bottom','textColor': 'ffffff','tabBackground': 'e8a127','fontSize': '16','tabbed':''};s.onload = s.onreadystatechange = function() {var rs = this.readyState;if (rs)if (rs != 'complete')if (rs != 'loaded')return;try {sideBar = new buildTabbed();sideBar.initializeOption(options);sideBar.loadContent();sideBar.buildHtml();} catch (e) {}  };var scr = d.getElementsByTagName(t)[0], par = scr.parentNode;par.insertBefore(s, scr);})(document, 'script');</script>-->

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-29531122-1', 'auto');
  ga('send', 'pageview');
</script>

<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-K9SKH3"
  height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-K9SKH3');</script>
<!-- End Google Tag Manager -->

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

<script>
  // (function() {
  //   var matcher = /.*\\/([^\\/]*\\.\\w+)$/.exec($('flightLogo_in_%RESULTNO%').src);
  //   if (matcher[1] == 'VS.gif' || matcher[1] == 'VS.gif') {
  //     $('flightLogo_in_%RESULTNO%').hide();
  //   }
  // }());
</script>
</body>
</html>

Let me know if this works for you, then we’ll go on to the slider.

1 Like