SliderWindow - resizable

The webapplication messaging window that saves screenspace and ensures trouble free, efficient, unobtrusive communication with the user.

It builds upon the marvellous YUI Javascript library. So first you need to dowload the YUI library and get familiar with it. However following the installation instructions below will be enough to have a well functioning sliderwindow.

You can download the SliderWindow from Sourceforge and see the examples below.  Now with dynamic resizing capability!
To read a discussion of why and how and leave a comment pls. go to this blog post.

You might also be interested in a new tool presented on this site: SplitDesktop, the innovative GUI paradigm

Installation instructions

You need to include some files from YUI plus 2 files for the SliderWindow: 1 .js file and 1 .css file.

When the files are included you'll set the window up at onLoad. See the step by step installation instructions below.

Including the YUI js files



Include the SliderWindow js file


Include the css files


Set up the SliderWindow

Include this chunk of javascript  inside your page header.

You need only the id, you might actually omit the configuration object. The settings shown below are the default settings. You can change width and height as you want (max 700px + 500px). You can change the id of the SliderWindow ("slider1" in the example below) and of course the YAHOO namespace.


YAHOO.example.init = function() {        
	YAHOO.example.slider1 = new YAHOO.widget.MessageWindow('slider1', {

			visible:true, /* default, optional */			
			height: "287px", /* default, optional */
			width:"400px", /* default, optional */		
			direction: "right", /* default, optional */
			handlewidth: "5px", /* default optional */
			classname:"eaSliderWindow", /* default, optional */	
			closetitle: "Click on close icon or use shortcuts", /* optional, localize your tooltip */
			zIndex: 5, /* default, optional */
			credit: true, /* default, optional */
			addResizing: true /* default, optional */

//load the SliderWindow when the DOM is ready

Use it

Call it from your application passing the text you want to output to it as the first argument.

In the example below it is shown as a onClick event but of course you can call it in whatever manner you need.

The default messaging mode is to open and close right away. In this way the user knows that the application has given an answer and most of the time it will be enough to know. In case the user needs to have a closer look at the output (s)he can open the window by clicking on the handle (the 5px visible right border of the SliderWindow) or by hitting Ctrl-right arrow.

If you think the output is too important to risk not to be seen by the user, you can pass a second argument to the call: 'open' and the window will stay open until the user explicitly closes it by click, or hitting Ctrl-left arrow.


See it in action



See how well it blends in in a real case scenario


Download it from Sourceforge

Known issues



Copyright 2008, all rights reserved. BSD License