JQuery floating dock panel. Native configuration, custom layout and css style
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
src Update smarti.dock.js Nov 6, 2017
README.md Update README.md Jan 20, 2016



JQuery floating dock panel. Can be docked to content or autoslide on mouseover when hidden.

Automatically initializes when page is loaded. If content was loaded within ajax request, call JQuery extension method smarti() on container: $(container).smarti();

Examples: http://www.onitecsoft.com/smarti/dock

JSBin: https://jsbin.com/huwakupezi/edit?html,output


<div ...> - container
  <div data-dock="true"> - dock panel (required)
  <div data-handle="docked"> - default dock handle (optional)
  <div data-handle="hidden"> - alternative dock handle when dock panel is hidden (optional)
  <div data-content="true"> - content panel (required)

Container attributes

Can be applied any css style.

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

Dock panel attributes

Can be applied any css style.

Dock handle attributes

Can be applied any css style. Handle position can be defined by setting css rule of top,right,bottom or left.

NB! Position is relative to content panel

Example: style="top:20px; left:-10px"

Content panel attributes

Can be applied any css style.