Please note: This page provides documentation for an old version of Kwicks. If possible, you should check out the latest version instead.

Kwicks 1.5.1 Example: Sticky Mode

Enabling sticky mode with a custom event setting.


Enabling sticky mode with a custom event setting.


<!DOCTYPE html>
        <title>Kwicks 1.5.1 Example: Sticky Mode</title>
        <style type='text/css'>
            .kwicks {
                /* recommended styles for kwicks ul container */
                display: block;
                list-style: none;
                position: relative;
                margin: 0;
                padding: 0;
            .kwicks li {
                /* required, but the values are up to you (must be pixels) */
                width: 125px;
                height: 100px;
                /* margin should be same as spacing option */
                margin-bottom: 3px;

                /* do not change these */
                display: block;
                overflow: hidden;
                padding: 0;
                cursor: pointer;
            #kwick_1 {
                background-color: #008DA3;
            #kwick_2 {
                background-color: #F07000;
            #kwick_3 {
                background-color: #A33100;
            #kwick_4 {
                background-color: #8CAB2B;
                margin-bottom: none;
        <ul class="kwicks">
            <li id="kwick_1"></li>
            <li id="kwick_2"></li>
            <li id="kwick_3"></li>
            <li id="kwick_4"></li>

        <script type='text/javascript' src='../js/jquery-1.2.6.min.js'></script>
        <script type='text/javascript' src='../jquery.kwicks.js'></script>
        <script type='text/javascript'>
            $(function() {
                    min : 30,
                    spacing : 3,
                    isVertical : true,
                    sticky : true,  
                    event : 'click'