OpenFooter jQuery – Responsive Full Screen Footer

OpenFooter jQuery is a small script that is used to create the unique responsive footer with power features. With this plugin you can make a footer with many kinds of content (Text, images/photos, videos/iframes…) and you can add content as much as you want. Additionally, this plugin also allow you expand the footer to fullscreen for easier view.

 

License:

This product is free for both personal and commercial uses. If you like to share or distribute this product please include the link of this article at the place or web page where you are sharing or distributing this one, please DO NOT share our direct download links. If you want to share our articles on your site, you are free to copy excerpts but please DO NOT copy entire articles.

Please note, resources (like: images, videos, audios ...) are used for demonstration purpose only. Some resources may have third party licenses so please respect them in that case.

 

Check Demos:

 

OpenFooter jQuery Features:

  • Support Responsive Design.
  • Unlimited Footer Buttons with Horizontal Scroll/Swipe.
  • Support FullScreen View.
  • Easily customize CSS style.
  • Font Awesome and Image Icons.

 

Change Logs:

April 2014: First Version.

 

Credits:

  • jQuery Library.
  • MouseWheel Plugin.

 

Table of Contents:

  1. Installing OpenFooter jQuery Plugin.
  2. OpenFooter jQuery HTML Structure.
  3. Call OpenFooter jQuery Plugin.
  4. Parameters.

 

 

Section 1: Installing OpenFooter jQuery Plugin.

First of all, to ensure everything works correctly, please use <!DOCTYPE html>. Include the following code into HEAD section of the page.

Includes required CSS files:

<meta name="viewport" content="width=device-width, user-scalable=no" />

<!-- Font Awesome -->
<link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />

<!-- SONHLAB Base -->
<link rel="stylesheet" href="css/sonhlab-base.css" type="text/css" />

<!-- OpenFooter CSS Pack -->
<link rel="stylesheet" href="css/openfooter.css" type="text/css" />

<!-- IE 8 -->
<!--[if lt IE 9]>
<link rel="stylesheet" href="css/fix-ie8.css" type="text/css" />
<![endif]-->

 

Include required Javascript files:

<!-- Start jQuery Library -->
<!--[if !IE]> -->
<script type="text/javascript" src="js/jquery/jquery.min.2.1.0.js"></script>
<!-- <![endif]-->
<!--[if gte IE 9]>
<script type="text/javascript" src="js/jquery/jquery.min.2.1.0.js"></script>
<![endif]-->
<!--[if lt IE 9]>
<script type="text/javascript" src="js/jquery/jquery.min.1.11.js"></script>
<![endif]-->
<!-- End jQuery Library -->

<!-- MouseWheel Plugin -->
<script type="text/javascript" src="js/mousewheel/jquery.mousewheel.min.js"></script> 

<!-- OpenFooter jQuery Plugin-->
<script type="text/javascript" src="js/openfooter.dev.js"></script>

 

Done. OpenFooter jQuery plugin is now ready to use.

 

Section 2: OpenFooter jQuery HTML Structure.

This section should be read along with the example files also contained in the download package.

An HTML structure of OpenFooter has two main parts:

  • OpenFooter Bar: contains buttons to open relevant contents.
  • OpenFooter Content: contains contents that will be displayed when a button in OpenFooter Bar is clicked.

 

Sample structure:

<!-- START OPENFOOTER -->
<div class="openfooter">

	<!-- Start OpenFooter Bar -->
	<div class="of-bar">
		<div class="of-barcontainer">

			<!-- Start OpenFooter Button -->
			<div class="of-button texthover-redlight" data-ofid="content-ID">
				<span class="of-bt-icon"><i class="fa fa-home"></i></span>
				<span class="of-bt-title">Services</span>
			</div>
			<!-- End OpenFooter Button -->

		<div class="clearspace"></div></div>
	</div>
	<!-- End OpenFooter Bar -->

	<!-- Start OpenFooter Content -->
	<div class="of-contentstation">

		<!-- Start Content Block -->
		<div class="of-content" id="content-ID">
			<div class="of-contentbody">
				// Add Content Here
			</div>
		</div>
		<!-- End Content Block -->

	</div>
	<!-- End OpenFooter Content -->

</div>
<!-- END OPENFOOTER -->

 

In the above sample code, when a button in OpenFooter Bar [data-ofid=”content-ID”] is clicked a content in OpenFooter Content zone [data-ofid=”content-ID”] will be shown.

 

Section 3: Call OpenFooter jQuery Plugin.

To call OpenFooter jQuery plugin you just add this sample code below into the Head section:

<!-- Call OpenFooter jQuery Plugin -->
<script type="text/javascript">
$(window).load(function() {
	$('.openfooter').openfooter({
		barBg: 'solid-black'
	});
})
</script>

 

Section 4: Parameters.

HTML Parameters:

Parameters Positions Description
data-ofid of-button
of-content
This param is used to set ID for content and bar buttons

 

Javascript Parameter:

Parameters Properties Description
barBg string This param is used to set background class for OpenFooter Bar. Background classes can be found in the “sonhlab-base.css” file.

 

That’s it. I hope you enjoyed this plugin and find it useful!

 

 

That’s it. If you have any questions that are beyond the scope of this plugin, please feel free to open tickets in OpenFooter jQuery Support Zone. No guarantees, but I’ll do my best to assist you. Thanks so much!