How to Create Javascript Catfish Sliding Promotions

An effective way to advertise or promote a product is the Catfish pop-up, so called because it lies on the bottom of the browser. Less annoying than fullblown pop-ups and to me much better than adverising embedded within content. I've mocked up two example pages a transparency example and an example form.

Sitepoint

As far as I know catfish pop-ups were first implemented on Sitepoint and detailed in The Catfish—Part 1 and Set Us Up The Catfish—Part 2: SlideMe articles.

My Implementation

I've enhanced (re-written) the implementation to use an iframe so instead of embedding the promotion within your main content (The Sitepoint implementation uses a div at the bottom of the markup), you can place the promotion code in a separate HTML file.

An iframe will also help the page load faster and the javascript is light at <5kb (<3kb for non IE6) not including the size of your iframe content.

The iframe will allow you to use forms within your promotion which will act independently of your main content; your promotion could be on another site altogether.

Usage

The download (zip) contains the examples from above and implementing your own catfish should be fairly straight forward. I've tried to make the amount of markup you need to add to a page as lightweight as possible but the minimum I've been able to get it down to is the code example below. IE6 does not support the CSS style position:fixed, so a workaround had to be introduced.

The Markup

Place the following between your <head> tags.

<!--[if lt IE 7]><script defer type="text/javascript" src="catfish/iehack.js"></script> <link rel="stylesheet" href="catfish/iehack.css" type="text/css"/><![endif]--> <script type="text/javascript" src="catfish/catfish.js"></script> <script type="text/javascript">catfish('form-test/popup.html',100);</script>

There's some conditional code here to get it to work in IE also note the use of the script defer which is a way of getting IE to delay script execution until the DOM has formed.

Calling catfish()

You can call catfish and configure all the options (from the 4th line in the markup above).

catfish(url, height_in_px, start_delay_in_ms, speed_in_ms, increment_in_px);

or, allow the script to default the scrolling speed and delay for you.

catfish(url, height_in_px);
Parameter Description
url The url of the content you wish to display.
height_in_px The height of the content.
start_delay_in_ms The number of milliseconds before the content starts to scroll into view. (default is 2000ms)
speed_in_ms The time in milliseconds before the content is moved increment_in_px pixels. (default is 25ms).
increment_in_px The number of pixels the content is moved every speed_in_ms milliseconds. (default is 5px)

Closing options

You have two options when allowing the user to close the catfish temporary or permanent, temporary will re-open the catfish when the user refreshes the page or goes to another page with a catfish.

Permanent will set a cookie and not re-open the catfish for that user (unless they clean out their cookies).

Temporary close markup for your catfish :-

Close this

Permanent close markup :-

Don't show me this again

And Finally

I've only been able to test the implementation on IE6 and Firefox, if someone could let me know how well it runs on Safari and Opera that would be great.

If you do implement some catfish pop-ups please let me know so I can add a few more examples to this article.

Download catfish.zip

Posted on Tuesday, Feb 13, 2007