SlideBox

For what ?

Here is a quite easy to use practical plugin to hide an element of secondary function on a web site or a forum (chatbox, secondary commands, etc.).
You will just have to target an element thanks to the main function of the plugin to admit it to a sliding side box.

See the demonstration

Usage

This type of tool is very simple to set up because it is a plugin of the jQuery library. It's also very light (0,88 Ko) and can be reduced thanks to the Gzip compression in approximately 0,48 ko.

  1. Load the file of the styles of the plugin. This code for calling the CSS file must be placed before the </head> tag: 
    <link href="css/juizSlideBox.css" rel="stylesheet"
type="text/css" media="screen, projection" />
    These styles are customizable, naturally.
  2. Download the jQuery library, or make a link from the Google API .
    Place this call of the javascript file just before the </body> tag: 
    <script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js">
</script>
  3. Load the file of the plugin in the same way by placing it after the line of call of the library. Here we imagine that your scripts are in the root of your site, in a directory named "scripts". To you to modify this road if need: 
    <script type="text/javascript"
src="/scripts/juizSlideBox.min.js"></script>
  4. Call the function by targeting exactly the element to be placed in the slidebox.
    Place this code following the previous two lines: 
    <script type="text/javascript">
	$(document).ready(function() {
		$("#aside").juizSlideBox();
	});
</script>

It is important to note that this call must be made only one time and on a unique element. If you feel the need to have more sliding boxes, ask you questions on the ergonomics of your site.

Customization

This plugin offers you quite a lot of customizations which will maybe be still widened afterward. For the moment here are those proposed and their default parameters.

Name Description Value / "Default"
boxPositionX The horizontal position of the SlideBox "left" or "right"
Default : "left"
boxOpacity The Opacity of the SlideBox An integer between 0 and 1 (e.g.: 0.75)
Default : "1"
boxSpeed Duration of the animation of the slidebox An integer (milliseconds), the word "fast" or "slow"
Default : "500"
thanks Discreet backlink towards my web site "yes" or "no"
Default : "yes"

If you wish it we speak about it on the blog, so don't hesitate to ask your questions!

When you wish to modify a style, you just have to complete the function like that:

$("#aside").juizSlideBox({
	'boxOpacity'	:	"0.9",
	'boxSpeed'	:	"400"
});

Enjoy!

* jQ.CreativeJuiz.fr *