Gallery

Modules

Documentation

Context Navigation

YUI Library is not responsible for bugs or support with this module. It is available as a free service. For support please contact the module owner with the provided links.

SliderWindow (gallery-slider-window) on cdn

Last Updated: 10/29/11

+ 0 -

paolo nesti poggi

YUI Contributor

See 2 more by this user.

Created: 08/1/11
Last CDN Push: 11/10/11
Build Tag: gallery-2011.11.10-16-24
Project: YUI 3
License: YUI BSD
YUI Version: 3.4.1
Free for use.

A window slides open and close at the bottom left of the screen with messages from the application or extra screens/pages for specific work flows. It provides the developer with some extra screen space that is always at one's disposal without cluttering the GUI. For instance ideal for log-in forms.

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

It is also available for YUI 2 at: http://www.eaktion.com/sliderwindow/
YUI 3 version at http://www.eaktion.com/sliderwindow3/

Write your html page without any regard to the SliderWindow.

To run the code example below, just add 2 buttons:

Configuration options and default values are shown in comment below.

Code Sample

<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>

YUI({
    filter: 'debug',
    modules: {
        'gallery-slider-window': {
            fullpath: '/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 = "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud exercitation<ul><li> ullamco laboris</li><li> nisi ut aliquip</li><li> ex ea commodo consequat</li></ul> 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.</p><p>Ut enim ad minim veniam, quis nostrud exercitation<ul><li> ullamco laboris</li><li> nisi ut aliquip</li><li> ex ea commodo consequat</li></ul> 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.</p>";
 
 
var b1 = Y.one("#button1");
b1.on("click", Y.bind('sendMessage',sw,content,'publish'));
 
var b2 = Y.one("#button2");
b2.on("click", Y.bind('sendMessage',sw,content,'open'));
 
});

YUI({
    filter: 'debug',
    modules: {
        'gallery-slider-window': {
            fullpath: '/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 = "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p><p>Ut enim ad minim veniam, quis nostrud exercitation<ul><li> ullamco laboris</li><li> nisi ut aliquip</li><li> ex ea commodo consequat</li></ul> 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.</p><p>Ut enim ad minim veniam, quis nostrud exercitation<ul><li> ullamco laboris</li><li> nisi ut aliquip</li><li> ex ea commodo consequat</li></ul> 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.</p>";

var b1 = Y.one("#button1");
b1.on("click", Y.bind('sendMessage',sw,content,'publish'));

var b2 = Y.one("#button2");
b2.on("click", Y.bind('sendMessage',sw,content,'open'));

});

Forum Posts

No forum posts for this module.