CTS Footer

jQuery - CTS Footer

This is another jQuery/JavaScript project I worked on. A jQuery plugin for a page footer to appeara across the page. Still in development format...

<script type="text/javascript" src="js/jquery.ctsfooter.min.js"></script>
<script type="text/javascript">
$(function() {
<link rel="stylesheet" type="text/css"
href="styles/cts1-styles.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css"
href="styles/cts1-ie-styles.css" />
<style type="text/css">
#ctsFooter img { behavior: url(iepngfix.htc) }


Of course, you need some sort of page element to build the CTS Footer from - a list element is what is needed, as shown below:


<ul id="footerbar" style="display: none;">
	<li id="first"><a href="#">>
<img src="images/home2.png" alt="Home" /></a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Cras mattis mauris quis purus ultricies condimentum.
Vivamus urna magna, <a href='http://www.cnn.com'>ultrices vel volutpat</a> sagittis,
lobortis ut mauris.</p></li> <li><a href="#">
<img src="images/mail.png" alt="Mail" />
<p>This is the Contact prose, please limit me to 300 characters.</p></a></li> <li><a href="#">
<img src="images/phone.png" alt="Phone" /></a>
<p>Phone prose, ultrices vel volutpat.</p></li> <li><a href="#">
<img src="images/music2.png" alt="Music" /></a>
<p>Music prose, ultrices vel volutpat sagittis, lobortis ut mauris.</p></li> <li><a href="#">
<img src="images/tools.png" alt="Tools" /></a>
<p>Tools prose, ultrices vel volutpat sagittis.</p></li> <li><a href="#">
<img src="images/gears.png" alt="Widgets" /></a>
<p>Widgets prose, ultrices vel volutpat.</p></li> </ul>