centerInClient jQuery Plugin

This simple plug-in centers the content of the selected elements in the viewport or optionally in the specified container element.

jQuery.fn.centerInClient = function(options)


The options parameter can be a map of any of these properties (default values are shown):

var opt = { forceAbsolute: false,
    container: window,    // selector of element to center in
    completed: null,
    centerOnceOnly: false

Forces the selected elements to document absolute level. Use this option if the element doesn't center correctly which can happen if its position is relative already. When set the element is removed from its current hierarchy and moved to a child of body.

The element in which the selected element(s) are centered. Defaults to the window/viewport. Provide as a jQuery selector.

Optional event handler that is fired when centering is completed. The called handler receives the element that is to be centered as a parameter.

When true will center the element only the first time centerInClient() is called on this element. Repeated calls will simply return if the flag was previously set. This is useful for many UIs where you want to center a dialog or UI element once in the center, but from then on allow the user to use the element at it's dragged location. To force an element to center, set this flag to false explicitly.

Simple centering

$("#divMessage").centerInClient();   // centers in window

Center in another element

$("#imgLoading").centerInClient( { container: $("#divCustomerPanel") });

Class Members

See also:

Class modalDialog

© West Wind Technologies, 1996-2018 • Updated: 12/11/15
Comment or report problem with topic