jQuery Plugin For Slide Out Tab Contact - tabSlideOut

tabSlideOut is a lightweight jQuery plugin that slides out a sliding panel when clicking the tab on the web page. Good for creating a feedback widget on your web page that slides out a contact form as clicking it.

See also:

• Slide Out Contact Form Plugin with jQuery - Contactable

How to use it:

1. Include jQuery library and jQuery tabSlideOut on the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.tabSlideOut.v1.3.js"></script>

2. Markup html structure.

<div class="demo">
<a class="handle" href="http://link-for-non-js-users">Content</a>
...
</div>

3. The CSS.

.demo {
  padding: 20px;
  width: 250px;
  background: #f2f2f2;
  border: #29216d 2px solid;
}

4. Call the plugin with options and callbacks.

$('.slide-out-div').tabSlideOut({

  // left, right, top or bottom
  tabLocation: 'left', 

  // JQuery selector for the tab, can use any JQuery selector
  tabHandle: '.handle', 

  // action which will open the panel, e.g. 'hover'
  action: 'click',  

  // ms to keep tab open after no longer hovered - only if action = 'hover'
  hoverTimeout: 5000, 

  // panel dist from top or left (bottom or right if offsetReverse is true)
  offset: '200px', 

  // if true, panel is offset from  right or bottom of window instead of left or top
  offsetReverse: false, 

  // if set, panel size is also set to maintain this dist from bottom or right of view port (top or left if offsetReverse)
  otherOffset: null, 

  // e.g. '10px'. If null, detects panel border to align handle nicely on edge
  handleOffset: null, 

  // if true, handle is offset from right or bottom of panel instead of left or top
  handleOffsetReverse: false, 

  // how far bounce event will move everything
  bounceDistance: '50px', 

  // how many bounces when 'bounce' is called
  bounceTimes: 4, 

  // time to animate bounces
  bounceSpeed: 300, 

  // optional image to show in the tab
  tabImage: null, 

  // optional IE8 and lower only, else autodetected size
  tabImageHeight: null, 

  // optional IE8 and lower only, else autodetected size
  tabImageWidth: null, 

  // slide out after DOM load
  onLoadSlideOut: false, 

  // close tab when somewhere outside the tab is clicked
  clickScreenToClose: true, 

  // if click target or parents match any of these, click won't close this tab
  clickScreenToCloseFilters: ['.ui-slideouttab-panel'], 

  // handler called after opening
  onOpen: function(){}, 

  // handler called after closing
  onClose: function(){},

  // handler called after opening or closing
  onSlide: function(){}, 

  // handler called before opening, return false to cancel
  onBeforeOpen: function(){return true;}, 

  // handler called before closing, return false to cancel
  onBeforeClose: function(){return true;}, 

  // handler called before opening or closing, return false to cancel
  onBeforeSlide: function(){return true;} 

});

Changelog:

2018-02-08

• cleanup

2018-02-07

• Add clickScreenToCloseFilters

2018-01-02

• JS & CSS update

---

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