cmSlideBlock Demo








   «

Heading

  • List item 1
  • List item 2
  • List item 3







   «

Heading

  • List item 1
  • List item 2
  • List item 3

Welcome to the demonstration of jQuery plugin cmSlideBlock.
This plugin will produce content blocks which can be slided into the site from the right border. In this example there are two blocks in the right which can be slided in.

This plugin is licended under GPL3. You can use it for free but have to report all improvements back to the author.

Integration

You need to link the following resources in your HTML head:
  1. jQuery >= 1.2.3
  2. jQuery plugin 'cookie' (for persistent state of blocks)
  3. jQuery plugin 'cmSlideBlock' (this plugin)
  4. CSS of 'cmSlideBlock' (or your own customized style for cmSlideBlock)

Example

<link rel="stylesheet" href="cmSlideBlock.css"> <link rel="stylesheet" href="example.css"> <script src="http://js.ceusmedia.com/jquery/1.2.3.pack.js"></script> <script src="http://js.ceusmedia.com/jquery/cookie.js"></script> <script src="cmSlideBlock.js"></script>

HTML for blocks

All blocks to be slided need to have a specific structure.

Example

<div id="yourUniqueBlockId"> <div class="toggler"></div> <div class="container"> Here goes your content.<br/> </div> </div> You should capsulate your content in another DIV with 'float: left' if you want to add padding or margin.

Calling the plugin

Now you are ready to apply cmSlideBlock.

Examples

With default settings:

$(document).ready(function(){ $(".blocks").cmSlideBlock(); });

With custom settings:

$(document).ready(function(){ $(".blocks").cmSlideBlock({ size: 275, indent: 25, speed: 250 }); });

Manipulation

All blocks can be opened or shut with function calls.

Open : slideInBlock("#uniqueBlockId");
Shut : slideOutBlock("#uniqueBlockId");
Toggle : toggleSlideBlock("#uniqueBlockId");

Examples

Block 1

Block 2