Home
Plugins
Submit
Blog
Download
View DemoPlugin Compatibility
Browsers
IE 6
IE 7
Firefox 1.x- Firefox 2.x
Opera 8- Opera 9
Safari
jQuery Versions
jQuery 0.9.x- jQuery 1.0.x
- jQuery 1.1.x
Key
- Supported
Not Supported- Untested
How To Use This Plugin
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!