Css Snippets » equal heights http://www.csssnippets.be Snippets for you, snippets for me Mon, 17 Oct 2011 08:42:00 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 Jquery – Even hoge kolommen http://www.csssnippets.be/2009/09/jquery-even-hoge-kolommen/ http://www.csssnippets.be/2009/09/jquery-even-hoge-kolommen/#comments Tue, 22 Sep 2009 07:53:56 +0000 Mark http://www.csssnippets.be/?p=355 Gigadesign.]]> Als je 2 of meerdere kolommen langs elkaar hebt en ze moeten even hoog zijn, ongeacht de inhoud, kan je volgend Jquery script gebruiken. Er bestaat ook een pure CSS oplossing en deze vind je op Gigadesign.

HTML

<head>
 <script src="jquery.js" type="text/javascript"></script>
 <script type="text/javascript">
  ...onderstaande javascript code...
 </script>
</head>

<div id="wrap">
<h1>Equal Height Columns with jQuery</h1>
<p>This is an example of equal height columns using a single short jQuery function.</p>
<div id="col1" class="column">
<p>This three-column design features three columns with significantly varying quantities of content.</p>
</div>
<div id="col2" class="column">
<p>However, despite the differing quantity amounts, these columns are exactly the same height. No tricks, no gimmicks, no resorting to repeating background images to fake our way to columnar nirvana. And certainly, no tables have been harmed in the making of these columns. </p>
<p>They're simply divs sharing a common class, all of which have been set to the same height.</p>
</div>
<div id="col3" class="column">
<p>And I think a single class is an addition we can all get behind.</p>
</div>
</div>

CSS

body {
font: small/1.3em Arial, Helvetica, sans-serif;
background-color: white;
}
#wrap {
width: 600px;
margin: 0 auto;
}
.column {
float: left;
padding: 10px;
}
#col1 {
width: 110px;
margin-right: 10px;
background-color: #E2DDC4;
}
#col2 {
width: 200px;
margin-right: 10px;
background-color: #6B99F6;
}
#col3 {
width: 210px;
background-color: #E87C5E;
}

Opmerking

Je moet ook Jquery zelf eerst in je document toevoegen, volgend script moet na de jquery komen

Javascript

<![CDATA[
function equalHeight(group) {
	tallest = 0;
	group.each(function() {
		thisHeight = $(this).height();
		if(thisHeight > tallest) {
			tallest = thisHeight;
		}
	});
group.height(tallest);
}
$(document).ready(function() {
	equalHeight($(".column"));
});
]]>
Google Bookmarks Digg BlinkList Technorati del.icio.us StumbleUpon

]]> http://www.csssnippets.be/2009/09/jquery-even-hoge-kolommen/feed/ 1