jQuery Slide Panel

Fancy and easy sliding panel with jQuery. Useful to add status widgets to a page. jQueryUI ready. You can use its animation functions and appli functions like draggable() easily.

by miecz kwo

HTML

<div>
    <header>
      <h1>jquery.slidePanel demo</h1>
    </header>

      <!-- Left side widget -->
      <div id="widget1" class="slidePanelWidget">
          <a class="slidePanelButton">&nbsp;Widget 1</a>
          <div class="slidePanel panel">

              <!-- Widget contents -->
              These are the contents of the widget!
              <!-- End of widget contents -->

          </div>
      </div>


      <!-- Right side widget -->
      <div id="widget2" class="slidePanelWidget right">
          <a class="slidePanelButton">Widget 2&nbsp;</a>
          <div class="slidePanel panel">

              <!-- Widget contents -->
              These are the contents of the widget!
              <!-- End of widget contents -->

          </div>
      </div>


      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id feugiat justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus vulputate mattis diam, ac ultricies ligula tincidunt id. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris a orci risus, non pharetra nulla. Morbi ac enim sed nunc pulvinar posuere. Quisque quis accumsan magna. Donec pharetra consequat nunc, a pellentesque mauris dignissim ut. Integer vehicula tellus a justo pulvinar id imperdiet orci interdum. Aliquam erat volutpat. Praesent a diam sit amet orci tempus ornare ut nec urna. Maecenas convallis egestas ligula, vitae malesuada massa laoreet at.<br/>
      <br/>

      <div style="margin-left: auto; margin-right: auto; width: 400px; height:200px; border: 1px solid black;">

          <!-- Left side widget -->
          <div id="widget3" class="slidePanelWidget">
              <a class="slidePanelButton">&nbsp;Widget 3</a>
              <div class="slidePanel panel">

                  <!-- Widget contents -->
                  These are the contents of the widget!
                  <!-- End of widget contents -->

          ...

CSS

/*
 * jQuery slidePanel plugin basic styles
 * Version: 0.1.0 (2011/10/25)
 */

/* Widget styles */
.slidePanelWidget { position: fixed; .position: absolute; left: 0; }
.slidePanelWidget.right { left: auto; right: 0; }

  /* Button styles */
  .slidePanelWidget a.slidePanelButton:focus { outline: none; }

  .slidePanelWidget .slidePanelButton {
    white-space: nowrap;
    overflow: hidden;
    position: absolute;
    top: 4px;
    height: 19px;
    background-color: #BAC8DC;

    text-decoration: none;
    color: #fff;
    font-weight: bold;

    z-index: 2;
  }

  /* Left/right button styles */
  .slidePanelWidget .slidePanelButton {
      left: 0;
    padding: 1px 10px 1px 20px;
    background-position: 0 0;

           -moz-border-radius-topright: 10px;
        -khtml-border-top-right-radius: 10px;
       -webkit-border-top-right-radius: 10px;
               border-top-right-radius: 10px;

        -moz-border-radius-bottomright: 10px;
     -khtml-border-bottom-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
            border-bottom-right-radius: 10px;
  }
  .slidePanelWidget.right .slidePanelButton {
      left: auto; right: 0;
    padding: 1px 20px 1px 10px;
    background-position: 100% 0;

                   -moz-border-radius: 0;
                 -khtml-border-radius: 0;
                -webkit-border-radius: 0;
                        border-radius: 0;

           -moz-border-radius-topleft: 10px;
        -khtml-border-top-left-radius: 10px;
       -webkit-border-top-left-radius: 10px;
               border-top-left-radius: 10px;

        -moz-border-radius-bottomleft: 10px;
    -khtml-border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
            border-bottom-left-radius: 10px;
  }

  /* Dynamic change of sprites. Sprites are 19px tall */
  .slidePanelWidget .slidePanelButton         { /* Open sprite */ background: #BAC8DC...

JavaScript

/*! jquery.slidePanel-0.1.js - Slide Panel plugin for jQuery
 * ==========================================================
 * (C) 2011 José Ramón Díaz - [email protected]
 * Version: 0.1.0 (25/10/2010)
 * Requires: jQuery v1.4.3+
 *
 * http://3nibbles.blogspot.com/2011/10/plugin-jquery-sliding-panels.html
 *
 * INSTANTIATION
 * The basic structure is a div indicating on his class if it must be at
 * left (default, no extra class needed) or right (".right" class needed).
 * Inside the div there must be an <a class="slidePanelButton"> and a
 * <div class="slidePanel">. That's all.
 *
 * Manual instantiation
 *     $('.slidePanelWidget').slidePanel( [ options_object ] );
 *
 * Optionally if you use jQueryUI, you can add draggable to it with
 *     $('.slidePanelWidget').slidePanel( [ options_object ] ).draggable( { axis: 'y' } );
 *
 * OPTIONS
 *     - position     : null    null (CSS position) / 'fixed' / 'absolute'
 *     - buttonTop    : null    top position of the button inside slidePanelWidget. Null = CSS specified.
 *     - panelTop     : null    top position of the panel inside slidePanelWidget. Null = CSS specified.
 *     - animFunction : 'swing'    Animation function used to deploy panel
 *     - speed        : 'fast'    Animation speed
 *     - ajax         : null    URL of th AJAX call to perform to load panel contents. It is loaded before deploying the panel.
 *     - clickToClose : true    True = click anywhere to close the panel
 *
 * API
 *     - toggle()  Toggles open/close panel state
 *     - open()    Forces open panel
 *     - close()   Forces close panel
 *     - deployed  Indicates that the control is deployed (opened)
 *
 * CLASSES USED
 *     - Container: .slidePanelWidget, .right
 *     - Button:    .slidePanelButton, .deployed
 *     - Content:   .slidePanel
 *
 * HTML format
 *     <div id="widget1" class="slidePanelWidget">
 *        <a class="slidePanelButton">&nbsp;Name</a>
 *        <div class="slidePanel panel">
 *
 *           ...