jQuery Equal Height Divs Plugin

jQuery Equal Height Divs Plugin Preview

Description

Ever had 2 HTML Divs that you wish they would be just of the same height regardless of their content? Well, jQuery Equal Height Divs Plugin is the right solution for you then, as it will calculate both divs’ height and then examines which div is taller. Then it will assign the bigger height value to the shortest one.

The examined Divs don’t have to be next to each other, they can be anywhere in the page.

Please make sure that both Divs have the same top/bottom padding and margin values.

The solution was tested successfully on the following browsers: Internet Explorer, Firefox, and Chrome.

Updates:

[02/08/2010] Fixing the resize window bug: The code will keep running while the browser’s window is being resized or after maximizing the window.

How to use

1- Copy the plugin file called: “jQueryEqualHeight.js” into the Javascript folder on your website.

2- Since the plugin only works if you call it inside the HTML page then you must call it at the head of the page as follows:

<script type=”text/javascript” src=”javascript/jQueryEqualHeight.js”></script>

3- Don’t forget to call the jQuery file before calling the jQueryEqualHeightFix as well:

<script type=”text/javascript” src=”javascript/jquery-1.4.2.min.js”></script>

You will find the latest up to the date of creating this fix jQuery library file under the demo folder attached with this file.

4- Open the plugin file: jQueryEqualHeightFix.js using your favorite Javascript editor (or simply Notepad)

5- Scroll down to line 10 and 11 and change the Div id or class names as per your HTML divs that you wish to be equal as shown in the demo files or as per the example below:

Example:

In your HTML file you have 2 Divs. One that is called <div id=”sideNav”> and the other one is called <div id=”mainContent”>.

In that case, at your jQueryEqualHeight.js file, change line 22 and 23 as follows:

var firstDiv=’#sideNav’;

var firstDiv=’#mainContent’;

That’s all, if you still need any help don’t hesitate to leave a comment.

Continue reading with more related articles:

• Updated: jQuery Equal Height Divs Plugin
• How to write effective copy on the internet for web designers
• The harsh reality about the internet for web designers
• Who is gaining ground and who is losing in web browsers war?
• The power of Child Themes in Wordpress [Part 1]

No related posts.