Publishing System Settings Logout Login Register
Making the divs to have the same height with jquery.
TutorialCommentsThe AuthorReport Tutorial
Tutorial Avatar
Rating
Add to Favorites
Posted on August 3rd, 2009
2514 views
JavaScript
First the code then i'll explain

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style media="screen" type="text/css">
html, body {margin:0px; padding:0px;}
div#menu {width:298px; float:left; border:1px solid #999;}
div#content {width:598px; float:left; text-align:justify; border:1px solid #999;}
</style>
</head>

<body>

    <div id="menu">
        <ul>
            <li>a</li>
            <li>b</li>
            <li>c</li>
            <li>d</li>
            <li>e</li>
        </ul>
    </div>
    <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nulla enim, semper vel lobortis non, condimentum adipiscing erat. Integer urna diam, vulputate quis facilisis id, malesuada quis risus. Donec convallis lacus ut nulla facilisis convallis. Nam ut nunc non justo egestas pharetra sed eget urna. Curabitur id laoreet dolor. In volutpat vulputate volutpat. Suspendisse a eros massa, id lobortis purus. Etiam diam orci, laoreet et vestibulum non, ultrices vel metus. Cras rutrum tempor nibh ac molestie. Vivamus malesuada semper sem eget facilisis. Donec justo enim, tempus ac vestibulum in, elementum ut magna. Aliquam et nunc at lectus placerat sagittis sed quis nulla. Maecenas vel facilisis magna. Etiam sapien mi, sollicitudin eget dapibus quis, porta vel tortor. Nam quis tellus purus. Etiam placerat nibh sed nisi facilisis in ornare velit feugiat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam sodales felis et magna elementum vestibulum eget luctus eros. Vivamus volutpat vulputate consectetur. In sem enim, ornare lobortis porttitor egestas, facilisis sit amet tellus.</p>

        <p>Cras facilisis vehicula urna, ac euismod lectus hendrerit vitae. Cras eget mi diam, in auctor nibh. Duis tellus urna, congue nec scelerisque dapibus, cursus quis lorem. Fusce augue enim, vestibulum sit amet vestibulum in, pretium vitae mi. Etiam condimentum faucibus nibh, nec convallis est ultrices eu. Nulla felis ipsum, mattis a consectetur vitae, pretium vitae lorem. Etiam sagittis lobortis hendrerit. Praesent in tempor nunc. Nunc dictum mauris at sapien posuere sed ultrices ipsum cursus. In hendrerit ligula sit amet nisl consequat vel tempus tortor blandit.</p>

        <p>Nulla vitae est id risus interdum feugiat. Sed at dolor vel augue porttitor varius lobortis sed elit. Integer nec lacinia tortor. Vivamus nec nulla at purus placerat posuere bibendum et ante. Duis et nunc ac justo pulvinar sagittis. Curabitur a ornare tellus. Pellentesque sagittis egestas tempus. Nulla et neque turpis, id adipiscing mi. Sed posuere lacus in eros faucibus nec placerat velit pulvinar. Nam laoreet, justo non viverra auctor, enim lorem placerat velit, id condimentum tellus nibh eu orci. Proin bibendum, purus eget mollis suscipit, urna arcu condimentum magna, eget egestas velit lectus a risus. Integer eget erat eget est rhoncus consequat. Proin quis arcu lorem. Ut rhoncus facilisis sapien quis congue. Vestibulum id sagittis magna. Suspendisse tincidunt molestie elit sed facilisis. Aliquam erat volutpat. Integer viverra, nulla id egestas dignissim, massa quam euismod velit, tempus malesuada sapien lectus volutpat ipsum. Duis eu metus eros, in pellentesque purus.</p>

        <p>Donec eget nunc nec diam tempor ultricies non et nisi. Nulla tristique placerat sagittis. Morbi neque ligula, varius id pretium eget, tempus nec elit. Aliquam eu metus in tortor posuere sagittis. Morbi feugiat enim odio. Sed et arcu eros, et aliquet libero. Donec cursus neque a felis malesuada eu posuere quam viverra. Maecenas et velit felis, eget ullamcorper orci. Vivamus vitae neque sapien. Nunc at elit quis tortor gravida viverra. Aenean aliquet nisl eu felis vehicula vel viverra elit vulputate. Aliquam tortor dui, pulvinar sit amet feugiat eget, accumsan vitae nisl.</p>

        <p>In enim est, tristique nec porta in, hendrerit eu sapien. Nullam vehicula facilisis erat venenatis bibendum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla commodo tristique rhoncus. Nullam faucibus neque sed dui ornare rhoncus. Mauris lacinia quam nec libero lacinia in aliquet lacus sollicitudin. Proin semper congue ligula, sit amet aliquet nisl elementum eget. Phasellus nisl velit, commodo quis accumsan id, aliquam a ante. Ut nunc erat, pretium et fringilla congue, porttitor sed purus. Vestibulum fermentum nulla quis mi dictum sed imperdiet nisi aliquam. Phasellus at augue augue.</p>
    </div>
   
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            size = $('div#content').css('height');
            $('div#menu').css('height', size);
        });
    </script>
</body>
</html>


The most important is the bottom from the script tags
$(documetn).ready(function()

If the document is fully loaded then it will execute the script
size = $('div#content').css('height');

With this function we extract the height of the div that is the biggest
$('div#menu').css('height', size)

With this function we set the height of the small div with the one from the big div

That's it. :)
Dig this tutorial?
Thank the author by sending him a few P2L credits!

Send
cigraphics

This author is too busy writing tutorials instead of writing a personal profile!
View Full Profile Add as Friend Send PM
Pixel2Life Home Advanced Search Search Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Tutorial Index Publish Tutorials Community Forums Web Hosting P2L On Facebook P2L On Twitter P2L Feeds Pixel2life Homepage Submit a Tutorial Publish a Tutorial Join our Forums P2L Marketplace Advertise on P2L P2L Website Hosting Help and FAQ Topsites Link Exchange P2L RSS Feeds P2L Sitemap Contact Us Privacy Statement Legal P2L Facebook Fanpage Follow us on Twitter P2L Studios Portal P2L Website Hosting Back to Top