How to initialize Lightbox on page load?

JavaScript
1

hello guys,
i’m registered here only because of this article, which i read over and over again but my skills fail me continuously.
I want the same thing as everyone else above me but somehow a bit modified:

  • I need something that loads on page-load (after a delay of a few secs) [and not on link/image-click]
  • Will display simple text with an extra checkbox function (will be a “Terms of use” agreement pop-up page), where someone once agreed, to not show this page for him for a given period
  • Smooth, fast & clean looking - preferably one like the jQuery lightbox popups which look so cool
  • If possible, have cookies to load only once

because i don’t have any java knowledge, i cant combine the above given instruction or to use the help from the main page: http://www.jacklmoore.com/colorbox/

can you guys help me out?

thank you.

2

Hi,

Welcome to the forums :slight_smile:

I wrote a blog post detailing how to do this recently.
You can find it here.
There’s a link to a demo at the top of the post.

Let me know if you have any questions.

3

for unknown reason i can submit my comment on your site, so, i\ll ask it here again:

can you add a load with delay to this great script?
lets say: show only after 30 sec upon full page load?

as i see it, is exactly what i looking for (design can be improved of course, but customizing a DIV is much more handy for me).

4

Use setTimeout to create the delay:

if (!hasReadAnnouncement){
  $('<div>', {id : 'overlay'}).appendTo('body');
  setTimeout(function(){
    $("#announcement").fadeIn('slow').center();
  }, 3000);
}
5

it’s working great thank you.
even without java knowledge, i managed to modify it to my needs,
i mean as it is, the #overlay is present from the begining and only the #anouncement is delayed, but i want to be both delayed, so i included in the function this line too: $(‘<div>’, {id : ‘overlay’}).appendTo(‘body’); and it’s working like a charm now (as i wanted).

I have one more question.
As i can see it now, the “cookie” management is bound to current browser usage, if you open/close your browser, you get the pop-up.

If i want a longer control, the pop-up window only pop up once for an user, lets say once for 30 days (or even longer)? How can this be done?

Thank you again for your help.

6

Hi,

A small point, Java and JavaScript are two different languages.
Here we are using JavaScript.

The example I linked to uses HTML5’s storage API.
If you want to show the user the popup once every thirty days or so, use cookies.

Here is a blog post I wrote that explains how to do that (albeit with a slightly different example).

Let me know if you have any questions.

7

as you can see it from the beginning, (having confusion between Java and Javascript), i’m not a programmer, i’m only a simple “user” who write on a blog and want to implement a “terms of use” pop-up window with cookie control to not bother my readers every time with my terms, but also to acknowledge them from time to time.

you example looks pretty simple but is way to much for me, even is about 2-3 function line.

Can you help me to modify your example to have cookie control with 30 days expire?
I know it’s your time and work, but is above my skills. You can include a comment with credits too if you want, i’ll won’t hide/delete them).

Thank you.

8

Hi,

Here is the script modified to set a cookie which expires after 30 days:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <style>
      #overlay{
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: black;
        -moz-opacity: 0.8;
        filter: alpha(opacity=80);
        opacity:.80;
        z-index:1001;
      }
 
      #announcement{
        display: none;
        position: absolute;
        width: 250px;
        height: 120px;
        padding: 0 16px;
        border: 16px solid orange;
        background-color: white;
        z-index:1002;
      }
 
      #close{
        display: inline;
        float: right;
      }
    </style>
  </head>
  <body>
    <h1>Some content</h1>
    <button>Clear cookie</button>
 
    <div id="announcement">
      <p>This is an important announcement.</p>
      <p>Seriously!</p>
      <a id="close" href="#">Close</a>
    </div>
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="path/to/jquery.cookie.js"></script>
    <script>
      jQuery.fn.center = function () {
        var w = $(window);
        this.css("position","absolute");
        this.css("top", Math.max(0, ((w.height() - $(this).outerHeight()) / 2) 
          + w.scrollTop()) + "px");
        this.css("left", Math.max(0, ((w.width() - $(this).outerWidth()) / 2) 
          + w.scrollLeft()) + "px");
        return this;
      }
 
      var hasSeenTerms = $.cookie("terms");
      if (!hasSeenTerms){
        $('<div>', {id : 'overlay'}).appendTo('body');
        $("#announcement").fadeIn('slow').center();
      }
 
      $("#close").click(function(e){
        localStorage.setItem("hasReadAnnouncement", "true");
        $.cookie("terms", true, {expires:30});
        $("#announcement").remove();
        $("#overlay").remove();
        e.preventDefault();
      });
 
      $("button").on("click", function(){
        $.cookie("terms", null);
        alert("Cookie removed!");
      })
    </script>
  </body>
</html>

To use it you will need to download the jQuery-cookie plugin and make sure you set the path in the following line correctly.

<script src="path/to/jquery.cookie.js"></script>

HTH

9

thank you very much

10

sorry for not editing my above post, but i have a new question :slight_smile: (no, i don’t need new coding, just clarifying this one)

$.cookie(“terms”, true, {expires:30});
for this line, i need to add path: ‘/’ to not repeat the pop-up on every page?

$(“button”).on(“click”, function(){
$.cookie(“terms”, null);
alert(“Cookie removed!”);
if cookie are removed, how will know it to keep it’s value for the next 30 days, and not pop-up with the next browsing session?

or i misunderstand how cookies working?

thank you again.

11

Hi,

Yeah, that makes the cookie valid valid across entire site.
If you want the popup to appear on every page, then that’s what you need to do.

That was just for demo purposes :slight_smile:

12

sorry for my dumb questions, but i better clarify it before any wrong use of them.

you mean, an user can access any of my page, he will get the pop-up, and once he agree, the pop-up will be gone for the next 30 days, no matter what page he will access further, yes? :slight_smile:

so, i need to keep that cookie, yes? my code will be just something like?

$("button").on("click", function(){
      })
13

Hey,

No problem :slight_smile:

Yes.

No. Remove this part entirely:

$("button").on("click", function(){...})

HTH

14

i wanna die :(( :(( :((

after setup and testing, i looks great (for me) and working under firefox,

<style>
#disclhead {
text-align: left;	
position: absolute;
border: 1px solid #FF5500;
border-radius:5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
padding: 10px;
background: #007800;
background: -moz-linear-gradient(#00dd00, #007800);
background: -webkit-linear-gradient(#00dd00, #007800);
	background: -o-linear-gradient(#00dd00, #007800);
	font-size: 20px;
	width: 378px;
	color: white;
}
#disclclose {
text-align: center;
border: 1px solid #007800;
border-radius:5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
padding: 5px;
background: #FF8D54;
background: -moz-linear-gradient(#FF8D54, #BC4001);
background: -webkit-linear-gradient(#FF8D54, #BC4001);
	background: -o-linear-gradient(#FF8D54, #BC4001);
	font-size: 16px;
	width: 393px;
	cursor:pointer;
}
#disclclose:hover {
background: #007800;
background: -moz-linear-gradient(#00dd00, #007800);
background: -webkit-linear-gradient(#00dd00, #007800);
	background: -o-linear-gradient(#00dd00, #007800);
}
#overlay{
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
opacity:.80;
-moz-opacity: 0.8;
	filter: alpha(opacity=80);
	z-index:1001;
}
#announcement{
display: none;
position: absolute;
width: 400px;
padding: 0 16px;
border: 2px solid #007800;
border-radius:5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
background: #fff;
	padding: 10px;
	text-align: justify;
	font-size: 12px;
	z-index:1002;
}
</style>


[COLOR="#FF0000"]<b:if cond='data:blog.pageType == "item"'>[/COLOR]
<div id="announcement">
    <div id='disclhead'>
        Terms of use
    </div>
    <br />
    <br />
    <br />
    <br />Lore ipsum ...
    <br />
    <br />Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi...
    <br />
    <br />
    <a id="close" style="text-decoration: none; color: #fff;">
        <div id='disclclose'>
            <b>I Agree</b>
        </div>
    </a>
</div>
[COLOR="#FF0000"]</b:if>[/COLOR]

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ciupercomania.googlecode.com/svn/trunk/jquery.cookie.js"></script>
<script  type='text/javascript'>
    jQuery.fn.center = function () {
        var w = $(window);
        this.css("position", "absolute");
        this.css("top", Math.max(0, ((w.height() - $(this).outerHeight()) / 2) + w.scrollTop()) + "px");
        this.css("left", Math.max(0, ((w.width() - $(this).outerWidth()) / 2) + w.scrollLeft()) + "px");
        return this;
    }

    var hasSeenTerms = $.cookie("terms");
    if (!hasSeenTerms) {
        setTimeout(function () {
            $('<div>', {
                id: 'overlay'
            }).appendTo('body');
            $("#announcement").fadeIn('slow').center();
        }, 3000);
    }

    $("#close").click(function (e) {
        localStorage.setItem("hasSeenTerms", "true");
        $.cookie("terms", true, {
            expires: 1,
            path: '/'
        });
        $("#announcement").remove();
        $("#overlay").remove();
        e.preventDefault();
    });
</script>

but for unknown reason the very same code don’t work under IE (i’m not tested yet under chrome or other browsers).
the fail under IE occurs at the close function, which don’t close the announcement and overlay DIV’s (but i repeat it, it works with firefox).

I different aspects it’s the fact that even at this stage i tried it on blogger.com and there occurs another fail :frowning:

  • the overlay came up with the specified delay
  • the announcement DIV don’t show up at all
  • due to no announcement, is no close button and implicitly the overlay stay forever with blocked “background”

this code part makes the cookie available on all pages from my blog


        $.cookie("terms", true, {
            path: '/'

but same time, this code:


<b:if cond='data:blog.pageType == "item"'>
-code here-
</b:if>

should limit the popup announcement to be work only on article posts, not on index. but the above given code works as described above on index page too.

any idea what i’m doing wrong?

15

yeah, edit option not exist :frowning: (or I cannot find it) and i made my previous reply probably more faster than was needed.

testing and testing i found out that actually the code as it is, it’s work on blogger BUT:

[list][*]it not recognize the screen size, more exactly the center function
jQuery.fn.center = function () {
so, if i put my code at the end of the template, i’ll have a huge overlay, and the announcement div only show up at the very end (bottom) of the page.
moving the code upper, will change it’s position, but still not recognize the screen center

so, the above mentioned 3 points are still valid and unsolved:
[] not working under IE
[] not centering with blogger
[*] showing even at the index page[/list]

any ideas?
thank you.

16

Could you post a link to the page where I can see this?

17

link for testing only:

with Firefox 28 and Chrome 34 works almost same, but at the very bottom of the page
and with IE 8 don’t pop up at all, with IE9 Agreement button is not not functional and with IE10 seems to work as with firefox and chrome (testing with IE10 it was done by someone else, so i cannot be very exact).

18

Hey,
I don’t have IE installed (running Linux), but I can set up a virtual machine and have a look later on.

19

you don’t need to install it, it’s enough if you take a look for current situation if is displaced at the bottom for you too.
if with IE8 don’t pop up at all, that’s it, anyway lesser and lesser people use it …

first things first, fix first what is “working”

PS if you need access to that testing blog, give me an email address to send an invitation

20

Ok, when I go to your testing page in Chrome, after a short delay, I just see the overlay and nothing else :frowning:

Do you have access to any instructions on how to include JavaScript in your blogspot site?