This content was already on the page.
Windows can act as hover boxes.

LivePipe has been deprecated and is no longer maintained.
The author now works primarily on Thorax

Control.Window

Windows, Modals, LightBoxes and Tooltips for Prototype.

Introduction

Control.Window is a fully programmable, multi purpose windowing toolkit for Prototype. It covers a wide variety of use cases and allows for a high degree of customization. It can attach to links to open the targets as windows, or can be filled with dynamic content. It includes support for stackable, draggable and resizable windows. Subclasses to handle Modal windows, LightBoxes and Tooltips are included.

NameOptions
Centered Window / Content on PageclassName: 'simple_window', closeOnClick: true
Relative Window / Dynamic Contentposition: 'relative', className: 'simple_window', closeOnClick: true
HoverBoxposition: 'relative', offsetLeft: 75, width: 175, hover: true, className: 'tooltip'
Relative Window / Content from AjaxoffsetLeft: 150, position: 'relative', className: 'simple_window', closeOnClick: 'container'
Draggable / Styled Window Onewindow_factory() options
Draggable / Styled Window Twowindow_factory() options
Modal Windowfade: true, overlayOpacity: 0.75, className: 'modal'
TooltipclassName: 'tooltip'

Modal Windows

The subclass Control.Modal has the same syntax and signature as Control.Window. When the first modal is created, Control.Overlay will load, which attaches div#control_overlay to the document.body. You must style this element to create the intended visual effect. Only one modal can be open at a time. When one is opened, it will close all other modals.

LightBoxes

If the link attached to the window has a file name that has any of the following extensions: jpg, jpeg, gif, png, tif, tiff, Control.Window will automatically try to display the image inside the window once it is open. The Control.LightBox subclass has the same syntax and signature as Control.Window but delay the opening of the window until all of the images inside the window have loaded. This also applies this behavior to the response of any ajax call. You can pass in the modal option to make the LightBox act as a modal.

HoverBox & Tooltips

You can set the hover property to true to make any window behave as a hoverbox. Note that if the window completely overlaps the link that opened it, you won't be able to close the window in some browsers since the onmouseout even will no longer fire. Control.ToolTip is a subclass of Control.Window that has a syntax optimized for tooltips. The first parameter is the element that the tooltip will appear over, and the second parameter is the text of the tooltip. Options can still be passed as the last parameter.

Local, AJAX or iframe Modals

You can open a window with content that is already on the page, so long as it is contained in any element that has an id. You create this kind of link just as you would link to any other element id <a href="#my_container_name">. If you want to link to an AJAX call just specify the full URL in your link's href. To create an iframe, do the same and pass in the parameter {iframe: true}. Dynamic iframe creation is buggy on the browser level and should be avoided.

JavaScript


	//Centered Window / Content on Page
	var centered = new Control.Window($(document.body).down('[href=#centered]'),{
		className: 'simple_window',
		closeOnClick: true
	});
	
	//Relative Window / Dynamic Content
	var relative = new Control.Window($(document.body).down('[href=#relative]'),{
		position: 'relative',
		className: 'simple_window',
		closeOnClick: true
	});
	relative.container.insert('This content was inserted with JavaScript.');
	
	//HoverBox
	var relative = new Control.Window($(document.body).down('[href=#hoverbox]'),{
		position: 'relative',
		hover: true,
		offsetLeft: 75,
		width: 175,
		className: 'tooltip'
	});
	
	//Relative Window / Content from Ajax
	var ajax = new Control.Window($(document.body).down('[href=/ajax_example]'),{
		className: 'simple_window',
		closeOnClick: 'container',
		offsetLeft: 150
	});
	
	//styled examples use the window factory for a shared set of behavior
	var window_factory = function(container,options){
		var window_header = new Element('div',{
			className: 'window_header'
		});
		var window_title = new Element('div',{
			className: 'window_title'
		});
		var window_close = new Element('div',{
			className: 'window_close'
		});
		var window_contents = new Element('div',{
			className: 'window_contents'
		});
		var w = new Control.Window(container,Object.extend({
			className: 'window',
			closeOnClick: window_close,
			draggable: window_header,
			insertRemoteContentAt: window_contents,
			afterOpen: function(){
				window_title.update(container.readAttribute('title'))
			}
		},options || {}));
		w.container.insert(window_header);
		window_header.insert(window_title);
		window_header.insert(window_close);
		w.container.insert(window_contents);
		return w;
	};
	
	var styled_window_one = window_factory($('styled_window_one'));
	
	var styled_window_two = window_factory($('styled_window_two'));
	
	//Modal Window
	var modal = new Control.Modal($('modal'),{
		overlayOpacity: 0.75,
		className: 'modal',
		fade: true
	});
	
	//ToolTip
	var tooltip = new Control.ToolTip($('tooltip'),'Windows can also act as tool tips.',{
		className: 'tooltip'
	});

CSS


	#control_overlay {
		background-color:#000;
	}
	
	.modal {
		background-color:#fff;
		padding:10px;
		border:1px solid #333;
	}

	.tooltip {
		border:1px solid #000;
		background-color:#fff;
		height:25px;
		width:200px;
		font-family:"Lucida Grande",Verdana;
		font-size:10px;
		color:#333;
	}

	.simple_window {
		width:250px;
		height:50px;
		border:1px solid #000;
		background-color:#fff;
		padding:10px;
		text-align:left;
		font-family:"Lucida Grande",Verdana;
		font-size:12px;
		color:#333;
	}
	
	.window {
		background-image:url("/stylesheets/window_background.png");
		background-position:top left;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		padding:10px;
		font-family:"Lucida Grande",Verdana;
		font-size:13px;
		font-weight:bold;
		color:#fff;
		text-align:center;
		min-width:150px;
		min-height:100px;
	}
	
	.window .window_contents {
		margin-top:10px;
		width:100%;
		height:100%;	
	}

	.window .window_header {
		text-align:center;
	}

	.window .window_title {
		margin-top:-7px;
		margin-bottom:7px;
		font-size:11px;
		cursor:move;
	}

	.window .window_close {
		display:block;
		position:absolute;
		top:4px;
		left:5px;
		height:13px;
		width:13px;
		background-image:url("/stylesheets/window_close.gif");
		cursor:pointer;
	    cursor:hand;
	}

Class

ReturnNameDescription
Control.Windowopen([Element container [,Hash options]])Creates a window, opens it then returns it.
numberbaseZIndexDefaults to 9999.
arraywindowsReturns all windows, open or closed, in the order they were created.

Instance

ReturnNameDescription
Control.Windowinitialize([Element container [,Hash options]])See the tutorial for the different behaviors based on the lack of, or type of container passed.
nullbringToFront()
boolclose([Event])
nulldestroy()
nullensureInBounds()Redraws the window inside the viewport bounds if it is currently outside.
boolopen([Event])
nullposition([Event])Repositions the window.

Options

TypeNameDefaultDescription
mixedclassNamefalseClass name to apply to the container.
mixedcloseOnClickfalsefalse, string 'container', string 'overlay' or Element.
boolconstrainToViewportfalseIf draggable, the window will stay in bounds of the viewport. May not work with scrollable windows.
mixeddraggablefalseIf true, div.draggable_handle will be inserted into the container, which will become the draggable handle. If Element is passed, the element will become the handle.
boolfadefalse
numberfadeDuration0.75
mixedheightnullCan be null, number (in pixels), or function returning number.
mixedhoverfalseElement object to hover over, or if "true" only available for windows with sourceContainer (an anchor or any element already on the page with an href attribute).
booliframefalseIf the window has an href, this will display the href as an iframe instead of requesting the url as an an Ajax.Request.
booliframeshimtruePositions an iFrameShim underneath the window.
mixedindicatorfalsefalse or Element to show and hide when ajax requests, images and iframes are loading.
mixedinsertRemoteContentAtthis.containerElement to insert Ajax, IFrame or Lightbox content into. Can be string selector for this.container.down(), or an Element that must be a child of this.container.
mixedmaxHeightfalseFor resizable. Can be false or number in pixels.
mixedmaxWidthfalseFor resizable. Can be false or number in pixels.
mixedminHeightfalseFor resizable. Can be false or number in pixels.
mixedminWidthfalseFor resizable. Can be false or number in pixels.
mixedoffsetLeft0number x or function(){return x}
mixedoffsetTop0number y or function(){return y}
Hashparameters{}Will be passed to Ajax.Request if it is an Ajax window.
mixedposition'center'Can be string 'center', string 'relative' (to related element position), string 'mouse' (will follow the mouse), array [number x, number y] or array [function(){return x},function(){return y}]
mixedresizablefalseIf true, div.resizable_handle will be inserted into the container, which will become the resizable handle. If Element is passed, the element will become the handle.
mixedwidthnullCan be null, number (in pixels), or function returning number.

Events

NameDescription
afterClose()
afterDestroy()
afterInitialize()
afterOpen()
beforeClose()Throwing $break inside a callback will prevent the window from opening.
beforeOpen()Throwing $break inside a callback will prevent the window from opening.
bringToFront()
onComplete(object request)Ajax windows only.
onDrag()Draggable windows only.
onException(object request, object exception)Ajax windows only.
onFailure(object request)Ajax windows only.
onRemoteContentLoaded()Iframe, Ajax and LightBox windows will trigger this event.
onResize()Resizable windows only.
onSuccess(object request)Ajax windows only.

Control.Overlay Class

ReturnNameDescription
nullload()
nullhide()
nullshow()

Control.Overlay Events

NameDescription
afterHide()
afterShow()
beforeHide()Throwing $break will prevent the overlay from being hidden.
beforeShow()Throwing $break will prevent the overlay from being shown.

Control.Window Subclasses

All subclasses below inherit all of the methods, options and events from Control.Window.

Control.ToolTip Instance

ReturnNameDescription
Control.ToolTipinitialize(Element container [,mixed tooltip [,Hash options]])Tooltip can be a string, or an Element that is already on the page.

Control.Modal Class

ReturnNameDescription
nullclose()Closes current Modal if one is open.
Control.Modalopen([Element container [,Hash options]])
mixedcurrentFalse, or Control.Modal.

Control.Modal Instance

ReturnNameDescription
Control.Modalinitialize([Element container [,Hash options]])

Control.Modal Options

TypeNameDefaultDescription
numberoverlayOpacity0.5

Control.LightBox Instance

ReturnNameDescription
Control.LightBoxopen([Element container [,Hash options]])

Control.LightBox Options

TypeNameDefaultDescription
boolmodalfalseWill act as a Control.Modal instead of a Control.Window if true.