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() {
			$("ul#footerbar").ctsfooter();
		});
	</script>
	<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) }
			</style>
		<![endif]-->

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>