jQuery Catfish Plugin Readme
Introduction
The jQuery Catfish Plugin allows you to display Catfish adverts with one simple function call.
Catfish adverts are adverts that appear in a seperate section to the content on a page. They attract the attention of the eye very easily when they slide in. As well as adverts you can place any other sort of content possible in there. Anything that can go in a DIV can be used. Normally you have to apply many CSS hacks to make it work in all browsers (IE is the problem) but this is only 1 function call and the work is done. Makes life so much easier.
There are also a few options you can set to customise how the Catfish will show up.
As for the name it's something I got off the original inventer, Sitepoint. It means "creature that sucks the bottom"
Demo
For a demo see the demo page.
So... Where's The Script?
You can find the code in the scripts folder in this zip file. Just follow the steps bellow to get it working on your site. Sorry this documentation is such a mess bit I was in a rush to get this done.
Usage
Before you start anything make sure you have both jQuery and the Catfish plugin included on your HTML page using code like this:
<script type="text/javascript" src="scripts/jquery.js"></script> <script type="text/javascript" src="scripts/jquery.catfish.js"></script>
This assumes that the scripts are in a folder called scripts, change to to whereever you copy is located.
You only need one function call to make the catfish work:
$('#catfish').catfish();
There are also three different options you can set, all are optional and just because you have one doesn't mean you need them all:
$('#catfish').catfish({
animation: 'slide' (Default) or 'fade' or 'none',
closeLink: id to the close link,
height: height of catfish
});
For example:
$('#catfish').catfish({
animation: 'fade',
closeLink: '#close-link',
height: 100
});
The HTML element that you will use for this catfish call is:
<div id="catfish"> <!-- Content here --> <a href="#" id="close-link">Close</a> </div>
You also need to add a block of code to the head of your page to make catfish work well in IE6:
<!--[if lt IE 7]>
<style type="text/css">
body {
overflow-x: hidden;
}
div#catfish {
/* IE5.5+/Win - this is more specific than the IE 5.0 version */
display: none;
position: absolute;
right: auto; bottom: auto;
left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( -0 - catfish.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
padding: 0px;
margin: 0px;
overflow: hidden;
}
</style>
<![endif]-->
You then just add normal CSS to style the DIV. All other required CSS is added by the script so all you have to do is style it.
After all these steps have been completed you HTML page should look something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Catfish Plugin</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery.catfish.js"></script>
<!--[if lt IE 7]>
<style type="text/css">
body {
overflow-x: hidden;
}
div#catfish {
/* IE5.5+/Win - this is more specific than the IE 5.0 version */
display: none;
position: absolute;
right: auto; bottom: auto;
left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
top: expression( ( -0 - catfish.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
padding: 0px;
margin: 0px;
overflow: hidden;
}
</style>
<![endif]-->
<style type="text/css">
div#catfish {
display: none; /* Stops catfish appearing before the page is fully loaded */
background-color: #FFFFFF;
text-align: center;
border-top: 1px solid black;
}
div#catfish a#close {
position: absolute;
top: 5px;
right: 15px;
color: black;
}
</style>
</head>
<body>
<!-- PAGE CONTENT HERE -->
<div id="catfish">
<!-- CATFISH CONTENT HERE -->
<script type="text/javascript">
<!--
// Release the cat!!!
$(window).load(function(){
$('#catfish').catfish({
closeLink: '#close',
height: 100
});
});
//-->
</script>
<a href="#" id="close">Close</a>
</div>
</body>
</html>
Enjoy the script and if you use it post a comment.