Themeforest

jQuery Floater Plugin

Getting Started

The plugin is also available as WordPress plugins:

Overview

The jQuery Floater Plugin is ideal for adding sticky navigation, forms or impoortant text to any website and works by wrapping any HTML blocks to creating floating slide out tabs.

The plugin has several options, which allow the features to be fully customised. Options include:

  • Activate the slide out content using either “click” or “hover” events
  • Set the exact location of the floating content using “location” and “alignment” along with offset in pixels from the edge of the browser window.
  • Floating content set using a location at the bottom of the browser will slide upwards.
  • Customise the animation for both the floating and the slide out action
  • Option to keep the floating tab content open
  • Multiple floating tabs per page
  • Set the text for the floating tabs

The floating tab can also be opened/closed via external links using CSS classes.

Also Check Out Our Premium jQuery Plugins:

Quick Start

1. The HTML

Take any HTML content and wrap it in a div tag with an ID:

<div id="floater">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Products/Services</a></li>
    <li><a href="#">Terms &amp; Conditions</a></li>
    <li><a href="#">Contacts</a></li>
  </ul>
</div>

All HTML wrapped by the div tag with ID “floater-1″ will be inserted into the floating tab.

2. Include the jQuery Floater Plugins

The plugin requires the hoverIntent plugin for handling “hover” to activate the menu as well as the jQuery easing plugin for the floating animation.

<script type='text/javascript' src='js/jquery.hoverIntent.minified.js'></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript" src="js/jquery.floater.2.0.min.js"></script>

3. The CSS

There are no specific CSS requirements in order to make the floater plugin work as any critical CSS is applied by the plugin itself. Several additional CSS classes are added by the plugin, which can be used to fully customise the layout:

  • Class “active” is added to the floating element when the content is open
  • Class “bottom” is added to the floating element when location is set to “bottom”

The following shows an example of the CSS used to style the demos on the floater plugin examples page:

.dc-floater .dc-floater-content {
overflow: hidden;
}
.dc-floater .tab {
background: url(../images/tab_black.png) no-repeat 0 -40px;
font: bold 12px Arial, sans-serif;
color: #fff;
height: 40px;
padding: 0 0 0 10px;
cursor: pointer;
}
.dc-floater .tab span {
display: block;
background: url(../images/tab_black.png) no-repeat 100% 0;
padding: 14px 14px 14px 5px;
height: 12px;
line-height: 1em;
}
/* Plugin adds class "active" to open tab */
.dc-floater.active .tab {
background-position: 0 -120px;
}
.dc-floater.active .tab span {
background-position: 100% -80px;
}

.dc-floater .dc-corner {
background: url(../images/tab_black.png) no-repeat 0 -190px;
height: 10px;
padding: 0 0 0 10px;
}
.dc-floater .dc-corner span {
display: block;
background: url(../images/tab_black.png) no-repeat 100% -230px;
padding: 0;
height: 10px;
}
/* Plugin adds class "bottom" to floating tabs with location "bottom" */
.dc-floater.bottom.active .tab {
background-position: 0 -160px;
}
.dc-floater.bottom.active .tab span {
background-position: 100% -200px;
}

.dc-floater.bottom .dc-corner {
background-position: 0 -120px;
}
.dc-floater.bottom .dc-corner span {
background-position: 100% -80px;
}

.dc-floater .dc-floater-content .nav-main, .dc-floater .dc-floater-content ul, .dc-floater .dc-floater-content li {
margin: 0;
padding: 0;
list-style: none;
}
.dc-floater .dc-floater-content .nav-main {
background: #000;
padding: 0 10px;
line-height: 1.5em;
font-size: 12px;
}

4. Initialise The Floater Plugin

To initialise the plugin using the default options simply add the following code to the head of your document. Change #floater to the ID used to wrap your HTML:

jQuery(document).ready(function($) {
    $('#floater').dcFloater();
});

4 Comments

  • [...] jQuery Floater Plugin — View Demo [...]

  • i was wondering do u have any tutorial on how to create that slide out tab for the contact us?? I have been looking for it the whole day.
    thxs.

  • sry to add, i saw the plugin in wordpress, but do u have any tutorial on how to create it on a webpage using jquery??

    • Hi,,

      We dont have any tutorials that cover how to create the slide out tab unfortunately. Just the wordpress plugin version

Leave a comment

To add code to your comments wrap the code text in [text][/text] tags

Social Network Tabs
WordPress Social Stream Plugin
Top Social Share Posts Plugin
jQuery Social Share Buttons Plugin
Theme Forest