Freebies jQuery Plugins 

OpenFooter jQuery – Responsive Full Screen Footer

SONHLAB , , , , ,

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

 

Download

 

 

[free_license]

 

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!

 

[endedwords product=”OpenFooter jQuery”]http://talk.sonhlab.com/room/openfooter-jquery-plugin[/endedwords]