Simple jQuery Plugin For Floating Dock Panels - smarti.dock.js

smarti.dock.js is a simple jQuery plugin to creating floating dock panels that slide in / out to quickly show or hide side content when toggled. Ideal for off-canvas navigation, slide-in contact form or floating social share panel.

Features:

• Dead simple to use.
• Configs can be passed via HTML5 data attributes.
• Allows to store docked state in localStorage or sessionStorage.

How to use it:

1. Add a dock panel together with toggle handles to your webpage like this:

<div data-name="dock" 
     data-smarti="dock" 
     data-dock-position="left"
     data-dock-offset="20">
  <div data-dock="true">
    Dock panel
  </div>
  <div data-handle="true">&laquo;</div>
  <div data-handle="hidden">&raquo;</div>
  <div data-content="true">
    Main content goes here
  </div>
</div>

2. Load the jQuery smarti.dock.js plugin after jQuery library and done.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="src/smarti.dock.js"></script>

3. All HTML5 data attributes.

• data-name: Name of js instance
• data-smarti="dock": Type of js instance
• data-dock-position: top | right | bottom | left
• data-docked: true or false. Defines if dock panel is docked on first load
• data-dock-offset: visible part of dock panel in pixels when hidden
• data-fixed-content: If set true then content will not be resized and dock panel become a slide panel
• data-use-storage=: session or local. Defines where to store docked state: sessionStorage or localStorage

Change log:

2017-11-06

• JS update

2016-09-15

• JS update

---

This awesome jQuery plugin is developed by onitecsoft. For more Advanced Usages, please check the demo page or visit the official website.