Creating a SitePoint-like sliding popup in jQuery

I can haz scripts? Check out The Little Book of JavaScript!

How to create a sliding popup like the one used at SitePoint using jQuery.

Background

This week, our web ninja needed to add to advertise a survey on the main Uniblue site. Not wanting to have an annoying popup (which would most likely be blocked or ignored) or an overlay (which would interrupt the user), she decided to go for a sliding popup, which is about as unobtrusive as you can get while still being visible.

The script she located and used had some problems; IE6 detection was not working properly, and while the script was supposed to set itself so it would not be shown more than once to a given user, this was not actually happening. Finally, it was blowing up when used in conjunction with other scripts in the page. While she did manage to fix all these items, the script itself was pretty overcomplicated for what it does. This post deals with building a similar feature using jQuery.

Linking jQuery

Like most javascript frameworks, jQuery can be pretty hefty. Google have kindly decided to host a number of such frameworks though, so you can actually link to them. Not only will this save you bandwidth, but it also means that the framework is probably already cached somewhere handy. This means that it gets served to the user much more quickly.

To link to Google’s hosted framework, you can use the URL http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js. Visit http://code.google.com/apis/ajaxlibs/ for details of other hosted frameworks.

Calling the popup

We need to call the popup at some point if we want to display it. A good place for this is in the ready() hook provided by jQuery:

   1: $(document).ready(function () {
   2:     CreatePopup("popup.html", 200, 1500, "testpopup", 5);
   3: });

The first argument is the url to the file containing the … um … contents of the popup. The second specifies the height of the popup when the popup is fully open, while the third specifies the amount of time, in milliseconds, that it will take the popup to extend completely. In this case, 1500 means that it will take the popup 1.5 seconds to open to its full size.

The last two arguments are related to the cookie which the popup sets. We’re creating one so that we don’t keep showing the popup every time the user goes into the page. Instead, we store a cookie for a number or days, so that a popup would only ever be shown once. The fourth argument, above, will be the name of the cookie, while the last one is the number of days we will allow the cookie to live. In other words, we’re going to set a cookie called “testpopup” for 5 days.

The popup

The popup will need to be displayed from various pages, since there can be multiple entry points to a site. For this reason, it will be stored in a separate html document, which we will reference from our script. We can do this using jQuery’s get(url, callback) function, which lets us make a request, and fire a callback when that request is received

Creating the popup

The popup is created by inserting an div element at the end of the body, and positioning it under the visible area of the page using fixed css positioning. By specifying a negative value for bottom, we place the element just beneath the visible area. We use –height, so the top of the div is just below the fold:

Script

   1: var popup = $("<div>" + data + "</div>")
   2:     .attr({ "id": "sliding_popup" })
   3:     .css({"bottom": -1 * height})
   4:     .height(height)
   5:     .hide()
   6:     .appendTo("body");

CSS

   1: #sliding_popup {
   2:     position:fixed;
   3:     left:0px;
   4:     display:block;
   5:     width:100%;
   6:     padding:0px;
   7:     margin:0px;
   8: }

We can then use the animate() method in jQuery to alter the value to 0, which brings the bottom of the div flush with the bottom of the visible area:

   1: popup.show().animate( { bottom: 0 }, duration);

Removing the popup

We want the user to be able to close the popup. To do this, we provide a function which hides the div, and then removes it from the DOM:

   1: $("#sliding_popup").animate({
   2:         bottom: $("#sliding_popup").height() * -1
   3:     },
   4:     duration,
   5:     function () {
   6:         $("#sliding_popup").remove();
   7:     });

We’re calling the DOM removal from the callback to the animate function. This lets us wait until the animation is finished before we actually remove the element.

This function can be called from within the popup itself by accessing the parent object, like so:

   1: DestroyPopup(1000);

IE6? I see no IE6!

As any designer, developer, and their pets will tell you, IE6 is not so much a browser as a royal pain in the wotzits. Sure, it’s an improvement over IE4, but that was way back before the earth cooled down and the dinosaurs died out. Today, we expect a little bit more cooperation from our browsers.

No, I don’t like IE6 very much. In fact, the script does not support it, period. I can live with that because few of the people who read this blog actually use IE6 (precisely 5 people, according to Google Analytics – you know who you are.)

Since uniblue.com is a front facing website, our friend wasn’t so lucky and had to try and hammer the script into compliance – not a pretty sight. Eventually, she settled for a standard popup for IE6, and the nice slidy animated one for real browsers. Given that the percentage of IE6 users is fairly low there, this is a reasonable compromise – it gets the job done, and doesn’t involve drawing magic circles in goat blood and urine all over your nice clean office floor. If you want to pull a similar trick with this script (or make it work with IE6) you can always check for it using the IsUnsupportedBrowser function and handle accordingly.

51 thoughts on “Creating a SitePoint-like sliding popup in jQuery

  1. Yes, it’s the second method in sliding_popup.js:

    function ShowPopup(description, lifetime, popup, duration)
    {
    popup.show().animate( { bottom: 0 }, duration);
    ReceivedPopup(description, lifetime);
    }

    replace the line “popup.show().animate( { bottom: 0 }, duration);” with a call to the lightbox and you should be set.

Leave a Reply

Your email address will not be published. Required fields are marked *