SliderWindow for YUI 3

The webapplication messaging window. Now for YUI 3 Javascript library.

Include these 2 files and the simple example, and a thin window border will appear at the left bottom of the webpage.

It is an extra window in page, perfect for log-in forms or extra info when you don't want to send the user to a new page. It provides content richness without adding complexity to your page.

If you can't wait just jump down the page and test it live

It's extremely easy to set up and use

Just copy and paste the code shown below to have a well functioning SliderWindow in a matter of seconds.

The window slides open and close with messages passed from the application depending on events. The users themselves can click it open and close or use Ctrl-arrows (left/right).

Populate it with your content and control when it is open or closed. Configure height and width, and/or let the user drag it bigger or smaller.

Download and example

A functioning example is on the current page and you can download the SliderWindow from SourceForge . The SliderWindow is a gallery module for YUI 3.

A SliderWindow for YUI 2 is also available.

Installation instructions

You need to include the YUI 3 "seed file". It will download automatically all dependencies for you. It is hosted for free on YAHOO! CDN. All dependencies (YUI 3 files) will also be downloaded from there. Of course you can also host the YUI 3 library on your own server, the method is the same, just change the URL for the seed file.

Including the YUI 3 seed file


<script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js" type="text/javascript">

Include the css file

In our example the SliderWindow itself is hosted on our servers, and the path is: /slider-window/assets/slider-window.css. Use your own server until the SliderWindow is published on the YUILibrary CDN


<link rel="stylesheet" type="text/css" href="/gallery_js/slider-window/assets/gallery-slider-window-core.css"/>

Set up the SliderWindow

Include this chunk of javascript just before the closing </body> element.

Configure as you see fit. All configuration settings are shown below.

It is the code for the live example published on this page.

<script>
YUI({
	filter: 'debug',
	modules: {
        'gallery-slider-window': {
			fullpath: '/gallery_js/slider-window/gallery-slider-window-debug.js',
            requires: ['overlay', 'node', 'anim-base','anim-node','anim-easing', 'substitute', 'resize']
			}    
		}
	}).use('gallery-slider-window', function(Y) {

	var sw = new Y.Overlay.SliderWindow(
			{
		/* watch out for commas when removing comments */
		/*		id: "slider_1", as default YUI3 sets an id */			
		/* 		height: "287px", default, optional */
		/*		openWidth: "400px",  default, optional */		
		/*		handleWidth: "5px",  default optional */
		/*		closeTitle: "Click to close/open or ctrl-left/right arrow to close/open",  optional */
		/*		zIndex: 0,  default, optional */
		/*		credit: true,  default, optional */
				resizing: true /* default is false, optional */
		/*		bodyContent: '', default, optional */
				
			}
		)
	sw.render();
	
var content = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation
 ullamco laboris
 nisi ut aliquip
 ex ea commodo consequat
 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Ut enim ad minim veniam, quis nostrud exercitation
 ullamco laboris
 nisi ut aliquip
 ex ea commodo consequat
 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";

var b1 = Y.one("#button1");
b1.on("click", openClose);

var b2 = Y.one("#button2");
b2.on("click", open);

var b3 = Y.one("#sw_pic");
b3.on("click", open);

function openClose () {	
	
	sw.sendMessage(content,'publish');
}

function open(){
	sw.sendMessage(content,'open')
}
});




</script>

See it in action

To try it out: Click on the buttons below, and resize the window by grabbing the handles at the window's upper left corner or on the upper side of it. You can also click it open on the right border of the window.

Download

Download it from SourceForge

or find it on the YUILibrary

Issues

None known.

Open source tools

From The Blog