Centralize HTML DOM element with jQuery Center plugin

A jQuery plugin that centralizes DOM element

Description

This simple plugin helps you centralize your DOM element against their parent element or the window. You can also specify the top of the DOM element by passing customized settings.

Demo

• Click here to see the demo
• The demo page is also included in the source file

Download

• Download source code from Github

Requires

• jQuery 1.2.6+

Browser Compatibility

• Firefox 2.0+
• Internet Explorer 6+
• Safari 3+
• Opera 10.6+
• Chrome 8+

Installation

• First, make sure you are using valid DOCTYPE
• Include nessesary JS files

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="path-to-file/jquery.center.js"></script>

Options

against

• description: the element that the DOM element centralize against to
• data type: string
• default value: ‘window’
• possible value: ‘window’, ‘parent’, or ‘.someTarget’

top

• description: you can specify the top of the target element
• data type: integer
• default value: false
• possible value: 13, 20, 36 … any number you want

topPercentage

• description: or specify the top in percentage of the target element
• data type: float
• default value: 0.5
• possible value: 0.1, 0.4, 0.8 …

Usage

Example code:

Centralize #some-element against the window

  $( '#some-element' ).center();

Centralize .some-element against its parent element

  $( '.some-element' ).center({
    against : 'parent',
    top: 10
  });

Centralize ‘.some-element’ against ‘.some-target-element’
IMPORTANT ‘.some-target-element’ must be “.some-element”‘s parents

  
  $( '.some-element' ).center({
    against : '.some-target-element',
    topPercentage : 0.4
  });

Related posts