Kwicks for jQuery (v2.1.0)
Welcome to the Kwicks for jQuery home page. Kwicks for jQuery is a plugin providing sexy sliding panels with an emphasis on navigational interaction. Kwicks was originally a port of a MooTools effect (of the same name), but has since evolved into a highly configurable and versatile UI component. Please check out the examples to see it in action.
New in v2.1.0: Fluid Layout!
If I had a nickel for every time responsive layouts were requested, I could probably afford a fastfood lunch. With Kwicks v2.1.0, I'm happy to announce that fluid layouts are finally here! Previously, the container element needed to have fixed dimensions. As of v2.1.0, containers may be completely fluid. To make this practical, the following additions have been made:
minSizemay now be specified in pixels or as a percentage.
- Panel dimensions are recalculated automatically when the window itself is resized.
autoResizeis set to
- Resize logic can be trigger manually as well, through the
sizeoption has been rendered obsolete, so it has been completely removed.
Kwicks has pretty relaxed markup requirements:
A container element with two classes:
kwicks-horizontal|vertical(depending on the orientation of this instance).
A single level of nested "panel" elements.
Unordered lists are a good semantic fit for most Kwicks use cases:
<ul class='kwicks kwicks-horizontal'> <li></li> <li></li> <li></li> <li></li> </ul>
However, as noted above, Kwicks doesn't require that unordered lists be used. For example, see the Anchor Markup example.
If you want one of the panels to be selected on initialization, simply add a
kwicks-selected class to it.
Kwicks follows the usual jQuery plugin convention:
// instantiate kwicks $(element).kwicks(opts); // invoke a method $(element).kwicks('method-name' [, param]); // handle events $(element).on('event-name.kwicks', handler);
Kwicks is supported in the following browsers:
- Chrome 12+
- FF 3.6+
- Opera 11+
- Safari 5+
Important styling information: Please note that in order to provide the smoothest possible animations, the following style changes are made by the script:
- The Kwicks container is converted to relative positioning.
- All panels are converted to absolute positioning.
- To keep things as "jitter free" as possible, panel styles are set by overriding the whole
styleattribute, which currently causes any previously specified inline styles to be lost. Make sure any styles you want to keep are set externally with a selector, rather than inline.
- Margins on the panels are stripped, but the spacing option is respected through the absolute positioning.
- Even though the panels' margins are stripped, in order for them to look correct in non-JS enabled browsers, they should still be given margins that correspond to the spacing option (if any). I strongly recommend that you look at the CSS in the examples.
Panel classes: Whenever a panel is expanded and/or selected, it is automatically given a
kwicks-selected class. This allows for more flexible styling based on the state of the panel.
Bugs, feature requests, etc:
Anything pertaining to bugs and/or the development of Kwicks can be dicussed on the GitHub issue queue.
Downloads, documentation, and examples for previous versions: