The WebApp Wizard Web development made magical

Documentation

Usage

JS

Simple, really... Just call:

$('#example').slidingPanel(options);

HTML

Just any valid HTML element:

<div id="example">A nice looking example...</div>

CSS

A CSS file is included in the downloadable package. But you might want to add some custom CSS to make the integration more seamless. The CSS looks like this:

.slidingpanel_tab {
   background-color: #eee;
   color: #aaa;
   text-align: center;
   font-size: 18px;
   line-height: 22px;
   cursor: pointer;
   padding: 2px;
}

You can edit it the way you want, all the important CSS is set by the plugin itself, so there is no risk that you break something. However, to facilitate the updates, I would highly recommend you to leave this file untouched and create another one which contain all your custom CSS rules, possibly overriding the default ones.

Options

There are a few options to make Sliding Panel more flexible. Here they are, with their default values:

  • position: ['top', 'right', 'bottom', 'left']
    Defines where to put the sliding panel on the webpage.
  • offset: {}
    Allows to finely tune position, relatively to top, right, bottom or left side of the positioned container, or combination of two (top and right for example: {top: '150px', right: '-10px'})
  • speed: 250
    Sets the speed of the sliding effect on opening and closing
  • timeout: 500
    Will wait "timeout" ms before closing the panel after the mouse has left the panel
  • event: ['hover', 'click']
    Allows to control the panel either by hover or by click
  • hideTriggerClass: 'slidingpanel_hide_trigger'
    A class to define which element(s) will close the panel (useful only with openByDefault: true)
  • wrapperClass: 'slidingpanel_wrapper'
    The CSS class applied to the sliding panel wrapper
  • slidingElementClass: 'slidingpanel_element'
    The CSS class applied to the sliding panel
  • tabClass: 'slidingpanel_tab'
    The CSS class applied to the tab allowing mouseover
  • wrapperTemplate: '<div></div>'
    The template used as a wrapper
  • tabTemplate: '<div></div>'
    The template used as a tab
  • tabText: 'E<br/>X<br/>A<br/>M<br/>P<br/>L<br/>E'
    The tab text
  • openByDefault: [true, false]
    Defines whether the panel should be open by default or closed
Comments (6) Trackbacks (0)
  1. How to position, for instance, bottom right? Possible?

  2. Hi Sean, that’s not possible for the moment, because I didn’t feel the need to. But I can work on this, so stay tuned, you’ll probably see a new release in the next few days ;-)

  3. Bonjour,

    Tres bon plugin, merci pour celui-ci.
    Par contre j’ai un formulaire contenant un DatePicker.
    Lorsque l’on choisi une date, le pannel se ferme.
    Serait ils possible de faire en sorte de le garder ouvert et que juste lorsque l on clique dans la zone en dehors de celui-ci, il se ferme.
    Merci d avance

    Chris

  4. Bonjour,

    C’est étrange, normalement, le panel ne se ferme que lorsque la souris sort du panel, et après un timeout. Le datepicker apparaît-il en dehors du panel ?

    Je pensais justement à ajouter la possibilité de faire fonctionner le panel au clic plutôt qu’au survol, je pense que je vais le faire dès que possible. J’ai beaucoup de travail en ce moment, mais je vais essayer de m’y atteler.

  5. J’ai mis à jour le plugin avec la possibilité de le contrôler via click plutôt que via hover. Je pense que cela devrait résoudre en partie vos problèmes ;-) .
    On peut donc maintenant cliquer pour l’ouvrir, et le laisser ouvert jusqu’au prochain clic qui le fermera.

  6. Spot on with this write-up, I actually think this
    amazing site needs far more attention. I’ll probably be back again to read more, thanks for the info!


Leave a comment

(required)

You can use basic HTML to enlighten your comments. If you want to post some code, please use the <pre> tag. You can also use syntax coloring by adding class="syntax [language]". <pre class="syntax js"> will color your code as if it was JS code for instance.

No trackbacks yet.