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.
<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).
or, allow the script to default the scrolling speed and delay for you.
| 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 :-
Permanent close markup :-
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.
Andrew Sidders
Nice article!
I’m sure i’ll be using this technique in the future, I’ll post again with details when I do!
Link | March 6th, 2007 at 9:07 am
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!
Link | March 14th, 2007 at 9:25 am
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.
Link | March 14th, 2007 at 9:46 am
steve
very sluggish in Opera!
jerks and staggers onto the screen…very odd…
will test on a mac in a little bit..
Link | May 9th, 2007 at 7:18 pm
steve
Fine in SAFARI under OSX
Link | May 10th, 2007 at 6:23 pm
Corey
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).
Link | May 23rd, 2007 at 1:46 am
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?
Link | July 4th, 2007 at 7:24 am
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.
Link | July 8th, 2007 at 10:52 am
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.
Link | July 12th, 2007 at 3:11 pm
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
Link | July 13th, 2007 at 2:46 am
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: http://www.potentiallunchwinner.com. Thanks again.
Link | October 7th, 2007 at 7:33 pm
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?
Link | January 18th, 2008 at 4:27 am
brend
You should check out http://www.instantslideup.com as this guy actually made the catfish deemed so easy
Link | February 10th, 2008 at 5:38 am
steve
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
Link | June 1st, 2008 at 12:17 am
Gavin
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
Link | August 24th, 2008 at 1:57 pm
Rice Blogger
I am trying to run it on wordpress. It does not seem to work on IE7. Can you help?
Link | October 18th, 2008 at 10:51 pm
Bottom Sliding Advertisements | Internet Marketing | Rice Blogger
[...] free to check out the tutorial on how to make a bottom sliding advertisements. It is very easy to implement. Just need to run the javascript and have your bottom sliding [...]
Link | October 19th, 2008 at 8:38 pm
titan
nice tutorial. i guess i will give a try at my blog.
Link | October 23rd, 2008 at 12:08 am
Alex
When viewing http://ianpurton.com/catfish/transparency-test.html on IE7 this what I get, seems like a problem to me.
http://www.iwaquebec.com/images/catfish.jpg
Link | November 11th, 2008 at 4:25 pm