In Part 1, Alex introduced our implementation of Catfish ads and demonstrated how we managed to have them appear at the bottom of the window, in all browsers, without jerky motion while scrolling.
If you missed it, go back and have a look through part 1. We found a handy way of working around Internet Explorer’s lack of support for fixed positioning of elements.
Now, we have a working Catfish ad. It’s attached to the bottom of the screen, and stays there when it is scrolled.
The problem is, it’s always there. The Catfish would be much more eye-catching if it ’slid’ into view, rather than appearing immediately. Catch your Website visitors by surprise!
Sliding The Catfish Into View
With a bit of DHTML jiggery-pokery, we can position the Catfish so that it’s just out of sight, with the top of it just below the bottom of our browser window. This is an ideal point from which to ’slide it in to view’ later.
Hint: it also gives us a chance to start pre-loading the images in the Catfish, so that when it bobs up, the images should be ready to go.
A negative bottom margin nicely tucks it away.
margin-bottom: -79px;
If using a negative margin for this purpose makes you feel a little unclean, don’t worry. When we slide the catfish into view we’ll remove that margin. So that we don’t get confronted with a gaping hole where the Catfish is going to go either, we’ll temporarily remove that blank space we added to the bottom of the body element.
/*
html {
padding:0 0 58px 0;
}
*/
Loading the document now, you’d be forgiven for thinking there is absolutely no Catfish. It’s there, but it’s just out of view. We’ve got to set up some timeouts to bring this out into the open.
I’ve created a new file called catfishdeploy.js which is quite similar to the code we use on sitepoint.com.
// Deploy the Catfish
// The Catfish should be located in an element of id 'catfish' and should be hidden
// out of view
function deploycatfish()
// initializing
{
catfish = document.getElementById('catfish');
catfishheight = 79; // total height of catfish in pixels
catfishoverlap = 21; // height of the 'overlap' portion only (semi-transparent)
catfishtimeout = setTimeout(startcatfish, 2000);
}
The last line of this function sets up a 2 second timeout, which will call startcatfish. The images in this Catfish take up about 10KB. That’s probably a little high, though it’ll suffice for demonstration purposes. Waiting for 2 seconds before showing the Catfish should give the images a bit of time to load, even on a modem connection.
In startcatfish we set up a catfishposition variable to hold the current Catfish position. setInterval can be used to shift the Catfish smoothly.
function startcatfish()
// starts the catfish sliding up
{
catfishposition = 0; // catfishposition is expressed in percentage points (out of 100)
catfishtimeout = setInterval(positioncatfish, 25);
}
Because the Catfish position is changed every 25 milliseconds or so (in the best case scenario), we don’t want to do anything too time-intensive when we change the position. We can sort out additional problems like adding space to the bottom of the html element to reserve space for the Catfish later—once it’s fully visible. For now, we’ll just alter the position of the Catfish by altering its bottom margin.
function positioncatfish()
{
catfishposition += 10;
catfish.style.marginBottom = '-' + (((100 - catfishposition) / 100) * catfishheight) + 'px';
if (catfishposition >= 100)
{
clearTimeout(catfishtimeout);
catfishtimeout = setTimeout(finishcatfish, 1);
}
}
Once the Catfish is in full view, we set a timeout to call finishcatfish. finishcatfish will tack on a bit of padding to the body element, in order to ‘reserve space’ for it. This ensures that visitors will be able to read the footer of your page without it being obscured by the Catfish. See Part 1 for information on how this was achieved.
function finishcatfish()
{
catfish.style.marginBottom = '0';
// jump the bottom of the document to give room for the catfish when scrolled right down
document.body.parentNode.style.paddingBottom = (catfishheight - catfishoverlap) +'px';
// here you could use AJAX (or similar) to log the popup hit for tracking purposes
}
The Result
Check out the result! The Catfish now sits out of sight for a little while, finally surprising us by loading when we least expect it. It looks pretty slick. It’s also very eye-catching, without being overly annoying (it doesn’t steal focus away from the rest of the page).
What Else Could We Do?
At SitePoint, we serve a range of different Catfish ads in rotation. The ads themselves are deployed via JavaScript, rather than appearing statically in our code. Information about how this can be achieved will be the subject of a future blog post!
