If you find Layout useful and want to support its development...

UI Layout Support
Visit this group

Updated Oct 29, 2012

UI Layout Plug-in & Related Downloads

UI Layout Download

 Latest Version: 1.4.0 (change-log)

Despite being a 'release candidate', the 1.3.0 RC version is more bug-free and robust than 1.2.0. Plus it has many new options and features.

 Official Version: 1.2.0 (change-log)

Sample Pages

These simple demos are self-contained - right-click to download:

SEE MORE demos & samples on our demos page.

Layout 1.3.x Custom Callbacks

I have compiled some commonly requested custom layout-callback functions into plugin-style add-ons for Layout. So far there are 3 of these. Also below is one layout plugin, which is not a 'callback'.


NOTE: Also see the slideOffscreen plug-in below.

The pseudoClose callback prevents the normal 'close' functionality of a pane and replaces it with a 'resize' command that makes the pane just 1px in size. This can be used when you have an iframe or object that you do not want to 'refresh' when the pane is closed, which all non-IE browsers will do when such an object is made 'hidden'.

// pseudoClose Option Syntax
    west__onclose:  $.layout.callback.pseudoClose
//  optional customization
,   west__pseudoClose:    {
        skipIE:		false // can skip IE for iframes that do not contain media objects
    ,   hideObject:	""    // usually: "", "pane", "iframe" or "object" - element will be made 'invisible' to enhance illusion of pane being 'closed'

The new pseudoClose 1.1 feature requires Layout RC30.4 or higher. This tweak allows the normal hide() and show() methods to work with pseudoClose. Use buttons in the center-pane of the demo page to see how this works.

$.layout.callbacks.slideOffscreen – Animation (replaces pseudoClose)

I created a custom open/close animation that works just like the default 'slide' animation, except that instead of 'hiding' the pane after closing, it is just moved off-screen. This addresses the 'reloading' issue with iframes and video-players, while retaining the normal open/close animations, allowing Layout to function 100% normally.

This is actually not a "callback" - it is a "Layout plug-in". I'm listing it here because it replaces the pseudoClose callback. Use the slideOffscreen effect as you would the normal/default slide effect. You can customize the fxSpeed and fxSettings however you wish...

<-- include plugin library after loading Layout -->
<script src="jquery.layout-latest.js"></script>
<script src="jquery.layout.slideOffscreen-1.1.js"></script>

    // assign the 'slideOffscreen' effect to any pane(s) you wish
    west__fxName:   "slideOffscreen"
,   west__fxSpeed:  1000 // optional


This callback replaces the need for a custom function to resize layouts that are nested inside a UI Tab-panel. It must be bound to BOTH the layout.onresize event of the outer-layout that wraps the tabs widget, and the tabs.show event so that the layout can be resized each time it becomes 'visible'.

// resizeTabLayout Option Syntax
    // outer-pane that contains the tabs-widget
    center__onresize:  $.layout.callbacks.resizeTabLayout
// Create the tabs and assign callback to show event
// This will handle layouts in _any_ of the tab-panels
$("body > .ui-layout-center").tabs({
    activate:  $.layout.callbacks.resizeTabLayout


This callback replaces the need for a custom function to resize accordions that are nested inside a layout-pane.

Accordions have the same problem with resizing when used in combination with the Tabs widget. Although the combination of Accordions and Tabs has nothing to do with Layout, you can use this callback to address that situation as well.

// resizePaneAccordions Option Syntax
    // outer-pane that contains an Accordion
    center__onresize:  $.layout.callbacks.resizePaneAccordions

// can also use callback to handle an Accordion inside a Tabs-panel
    activate:  $.layout.callbacks.resizePaneAccordions


This callback replaces the need for a custom function to resize data-tables created with the DataTables plugin when they are nestedinside a layout-pane.
(NOTE: This callback may be out of date but still illustrates how to handle DataTables inside a layout)

// resizeDataTable Option Syntax
    // outer-pane that contains an data-table
    center__onresize:  $.layout.callbacks.resizeDataTable

// can also use callback to handle an data-table inside a Tabs-panel
    activate:  $.layout.callbacks.resizeDataTable

Latest jQuery & UI Downloads

Only the core jQuery script is 'required', but ui.draggable is needed for resizing and ui.effects for animations.

jQuery/UI Download Pages

jQuery/UI Quick Downloads & CDN Info

These are the latest stable versions:

Individual jQuery UI Components

UI components can be downloaded in a 'development bundle', or you can create a custom download:

UI Layout uses the following jQuery UI components:

  • ui.core.js (only is using pane resizing OR animations
  • ui.draggable.js (only if user-resizable panes is enabled)
  • effects.core.js (only if using pane open/close/resize animations)
  • effects.slide.js (default pane-animation effect)
  • effects.drop.js (only if you specify this effect)
  • effects.scale.js (only if you specify this effect)

Layout Themes

There are no Layout themes available yet. Let us know if you create a theme you'd like to share.

The complex demo uses 'resizer' graphics from the UI Flora theme:

All other graphics in the demos are proprietary, so do not use them in a commercial project.


Released Ver # Changes
Nov 16/08 1.0.0
  • Initial release
Nov 26/08 1.1.0
  • NEW flow-code to prevent simultaneous pane animations
  • NEW options to add text inside toggler-buttons
  • NEW options for hotkeys - standard (cursors) and user-defined
  • NEW auto-resize for ALL layouts on windows.resize
  • NEW CSS utility methods:
    • myLayout.cssWidth( elem )
    • myLayout.cssHeight( elem )
  • UPDATED auto-resizing of panes after a container-resize
  • CHANGED minSize default from 50 to 0 (still auto-limited to 'css size')
  • RENAMED option: raisePaneZindexOnHover ==> showOverflowOnHover
  • FIXED bug in allowOverflow - now works with a 'custom paneClass'
  • REMOVED "overflow: auto" from base-styles. Overflow must now be set by CSS - unless applyDefaultStyles==true. No longer need "!important" to set pane overflow in your stylesheet.
Dec 1/08 1.1.1
  • NEW layout property: state - eg: myLayout.state.west.size
  • CHANGED data returned to callbacks - added pane-state as 3rd param
  • REMOVED layout.containerDimensions property - USE: layout.state.container
  • CHANGED toggler element from a SPAN to a DIV
  • CHANGED default for hideTogglerOnSlide to false
  • CHANGED auto-generated custom-buttons classes for better consistency
    • [buttonClass]-[pane]-[buttonType] ==> [buttonClass]-[buttonType]-[pane]
    • ui-layout-button-west-open ==> ui-layout-button-open-west
    • ui-layout-button-west-pin-up ==> ui-layout-button-pin-west-up
  • UPDATED toggler-text to auto-show correct spans (content-open/closed)
  • FIXED toggler-text - now centers text span correctly
  • FIXED bug affecting IE6 when layout has no north or south pane
Dec 07/08 1.1.2
  • UPDATED paneSelector rules to handle FORMS and pane-nesting
    • automatically looks for panes inside 'first form' in container
    • if using an ID as paneSelector, pane can be 'deeply nested'
  • ADDED auto-CSS for 'containers' other than BODY
    • overflow: hidden – ensures no scrollbars on container
    • position: relative – IF NOT: fixed, absolute or relative
    • height: 100% – IF NOT specified or is 'auto'
  • ADDED noAnimation param to open() & close() (not used internally)
Dec 08/08 1.1.3
  • FIXED typo in cursor-hotkeys code
  • NEW scrollToBookmarkOnLoad option - enables use of URL hash:
    • Example: www.site.com/page.html#myBookmark
    • AFTER layout is created, attempts to scroll to #myBookmark
    • default = true – otherwise bookmarks are non-functional
Dec 27/08 1.2.0
  • NEW maskIframesOnResize option, eg:
    • // mask ALL iframes
      maskIframesOnResize: true // default
    • // mask specific iframe(s)
      maskIframesOnResize: "#iframeOne, #iframeTwo"
  • NEW options for separate open & close effects/settings, eg:
    • fxName // BOTH open & close
    • fxSpeed_close
    • fxSettings_open
  • NEW onshow & onhide callback events
  • NEW start & end options for ALL callbacks, eg:
    • onopen_start / onopen_end
    • onhide_start / onhide_end
  • NEW ability to cancel events using 'start' callbacks, eg:
    • // prevent pane from closing if x greater than 0
      onclose_start: function () { if (x > 0) return false; }
  • CHANGED Layout.config.fxDefaults to Layout.effects (internal)
  • FIXED missing semi-colon so minified version works in IE