How to Create Javascript Catfish Sliding Promotions

by Ian Purton

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 :-

<a href=”#” onclick=”parent.document.catfish_close();return false;” id=”closeme”>Close this</a>

Permanent close markup :-

<a href=”#” onclick=”parent.document.catfish_lock();parent.document.catfish_close();return
false;” id=”closeme”>Don’t show me this again</a>

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

  • I implemented the script on a couple websites and have run into an issue in IE7. I got the popup to work, it slides up just fine, though it doesn't stay at the bottom of the screen in IE7 when you use the scroll bar on the right. The popup moves out of place when you scroll the page. If you get a chance, take a look at beingproperties.com and see what you think. All other browsers works fine except IE.

    Also, For some reason it doesn't play nice when the page has a background image that's centered and bottom justified. It also doesn't display all the content for some reason. I had this script working on this page before using the script I got off sitepoint, though once I tried using iframes it doesn't display all the content and the bg image is way off as well. you can see this in action here: http://www.campbellcanes.com/indextest.shtml

    A point in the right direction would be awesome.

    chris
  • Chris Campbell
    This is a great script. i actually tried to deconstruct the sitepoint website to figure out how they did it. After a lot of rooting around I googled 'catfish script and low and behold I was back at sitepoint reading their tutorial. I got a laugh out of that. I will have to check out the script that you rewrote incorporating iframes. It makes sense and would be much better implimantation.

    Cheers,
    Chris Campbell
  • Alex
    When viewing http://ianpurton.com/catfish/transparency-test.... on IE7 this what I get, seems like a problem to me.

    http://www.iwaquebec.com/images/catfish.jpg
  • nice tutorial. i guess i will give a try at my blog.
  • I am trying to run it on wordpress. It does not seem to work on IE7. Can you help?
  • This seems like the only way to contact you, I was wondering how you managed to use this theme showing only the excerpts in the home page?

    I have the theme, but on my home page it just shows the whole post for every post. I want to just show the excerpt like you have and with a read more button to open the post up.

    thanks
  • Hi Ian, bless you. I have been looking for the way sitepoint has done this forever! I saw the word 'catfish' and then found your post. Great. Your effort is really appreciated.

    A quick question (and mentioned by others): would you do a favor and implenent a session method so that if someone opts out of catfish, it is not shown on subsequent pages?

    Thanks, steve
  • brend
    You should check out www.instantslideup.com as this guy actually made the catfish deemed so easy
  • Jake
    I'm getting an intermittent issue with IE7 every now and then I get 'IE can't load page' alert.. traced this to a dll / cross domain issue (even though I'm using using a relative path).. something to do with iframes anyway.

    Is there any possibility you could write a cookie version of the original sitepoint div version?
  • BC
    Thank you for this. I just implemented the catfish script, and aside from changing the graphics, put it up more or less verbatim. The only thing I changed was popup.html to bottom.html, but that's it. Anyway, check it out: www.potentiallunchwinner.com. Thanks again.
  • ianpurton
    I've just taken on a new job so I haven't had time to update the script.

    There is a performance problem, in that the catfish will start to display even if the associated images are not ready yet. To fix this you'll need to pre-load the images with javascript. A quick google found this link http://www.pageresource.com/jscript/jpreload.htm
  • Mel
    Great article and coce just what I needed. I was struggling with the sitepoint code as I really needed the cookie ability. I have been messing around with the coding for about 2 days now and I am almost there! However this line: catfish('http://www.birdtrade.co.uk/transparency-test/popup.html', 79px); Keeps crashing IE7 and I get a popup message saying the browser aborted loading of the site. In firefox the loading of the site is sluggish, the site then loads about a third the catfish loads, but it halts the rest of the site from loading. When you close the catfish iframe the site then continue to loads. Can anyone help? Im so so close to getting this to work. :( It runs fine on the test pages so it must be clashing with something in my code.
  • Anthony Norton
    Yes but,
    Have you got into Apollo and Flex yet?
    Its the future you know !!

    Don't get left behind, you might get rail roaded, Ruby is dead .

    Anth.
  • Daniel
    Hello.

    Although only slightly familiar with JavaScript, I tried implementing the Catfish technique as detailed above in a website I am currently working on and achieved what I had planned, but not without shortcomings: the page that featured it was rendered in such a way as to be left without vertical scrollbar in Firefox 2, the content out of the viewport thus being cut off and inaccessible.

    In addition, the Firebug extension for Firefox kept reporting a JavaScript error to the following effect:

    document.getElementsByTagName("body")[0] has no properties
    document.getElementsByTagName('body')[0].innerHTML + '';

    What could be done about this?
  • In Opera 9 for Mac & PC it works smoothly (no jerking as noted by Steve above), but transparency doesn't work. I haven't looked at the code, but I'd imagine you didn't use the regular ol' opacity css property. Also, it doesn't seem to want to stretch to 100% of the width.

    It works perfectly fine in Safari (surprisingly).
  • Fine in SAFARI under OSX
  • very sluggish in Opera!

    jerks and staggers onto the screen...very odd...
    will test on a mac in a little bit..
  • ianpurton
    Mike,

    Could be that either the js is not loading, try using the full path to the js file in the 'script' section i.e. http://www.example.com/catfish/catfish.js assuming you've placed the js in a folder just off your root domain.

    Or,

    Fully qualify the link to the form-test page, i.e. http://www.example.com/form-test/popup.html You can send me a link to your site on ian dot purton at gmail dot com. and I'll take a look.
  • Mike
    Hi,

    When I test this using the form-test.html, I can get catfish to appear fine in both IE and Firefox. However, when I try to use the same exact code in a wordpress page within the same directory that the form-test.html is in, I get the following error: "Error: catfish is not defined" and the error is referencing the catfish iframe call: catfish('form-test/popup.html', 100... Any ideas? Thanks in advance!
  • Nice article!

    I'm sure i'll be using this technique in the future, I'll post again with details when I do!
blog comments powered by Disqus