37.49.32.84 am 11. Oktober 2017 um 15:59 Uhr

2017-10-11T15:59:17Z

37.49.32.84: Die Seite wurde neu angelegt: „Match Height / Equalize Heights... ohne jQuery, arbeitet auch Responsiv über mehrere Zeilen korrekt. Quelle: http://benhowdle.im/easy-peasy-equal-heights.htm…“

2017-10-11T15:57:26Z

Die Seite wurde neu angelegt: „Match Height / Equalize Heights... ohne jQuery, arbeitet auch Responsiv über mehrere Zeilen korrekt. Quelle: http://benhowdle.im/easy-peasy-equal-heights.htm…“

Neue Seite

Match Height / Equalize Heights... ohne jQuery, arbeitet auch Responsiv über mehrere Zeilen korrekt.

Quelle: http://benhowdle.im/easy-peasy-equal-heights.html (Zugriff 2017-10)

==Making elements the same height==

Sometimes you might have a need to grab a few elements, and then make them the same height. In an ideal world, you’d use CSS, but this isn’t an ideal world, so we must use JavaScript!

So drop this code in and you can achieve equal heights, really easily:
<syntaxhighlight lang="javascript">
<script type="text/javascript">
function sameHeights(selector) {
var selector = selector || '[data-key="sameHeights"]',
query = document.querySelectorAll(selector),
elements = query.length,
max = 0;
if (elements) {
while (elements--) {
var element = query[elements];
if (element.clientHeight > max) {
max = element.clientHeight;
}
}
elements = query.length;
while (elements--) {
var element = query[elements];
element.style.height = max + 'px';
}
}
}
</script>
</syntaxhighlight>
Stick this code anywhere on the page (or in a JavaScript file) to include it. To actually run it you can use the following markup:

<syntaxhighlight lang="javascript">
<div class="sameHeights">
<div data-key="sameHeights"></div>
<div data-key="sameHeights"></div>
<div data-key="sameHeights"></div>
<div data-key="sameHeights"></div>
<div data-key="sameHeights"></div>
</div>
</syntaxhighlight>
(the only important part is actually putting data-key=”sameHeights” on the elements you want the same height)

Then to initialise the code, drop this in below where you included the above JavaScript:
<syntaxhighlight lang="javascript">
<script type="text/javascript">
if ('addEventListener' in window) {
window.addEventListener('resize', function(){
sameHeights();
});
window.addEventListener('load', function(){
sameHeights();
});
}
</script>
</syntaxhighlight>
There we have it, the JavaScript will make all your elements equal heights!

You may have noticed we also initialise the plugin on window resizing as well, which means this’ll slot nicely into your responsive designs…

What if I want multiple sets on a page?

Say you have the following HTML:
<syntaxhighlight lang="html5">
<div class="sameHeights">
<div data-key="sameHeights"></div>
<div data-key="sameHeights"></div>
<div data-key="sameHeights"></div>
<div data-key="sameHeights"></div>
<div data-key="sameHeights"></div>
</div>

<div class="otherSameHeights">
<div data-key="otherSameHeights"></div>
<div data-key="otherSameHeights"></div>
<div data-key="otherSameHeights"></div>
<div data-key="otherSameHeights"></div>
<div data-key="otherSameHeights"></div>
</div>
</syntaxhighlight>
to make the JavaScript work on both these groups independently, simply drop in this JS:
<syntaxhighlight lang="javascript">
<script type="text/javascript">
if ('addEventListener' in window) {
// first group
window.addEventListener('resize', function(){
sameHeights('[data-key="sameHeights"]');
});
window.addEventListener('load', function(){
sameHeights('[data-key="sameHeights"]');
});

// second group
window.addEventListener('resize', function(){
sameHeights('[data-key="otherSameHeights"]');
});
window.addEventListener('load', function(){
sameHeights('[data-key="otherSameHeights"]');
});
}
</script>
</syntaxhighlight>
and there we have it, multiple groups acted on and an equalised.

What about the browsers, will somebody please think of the browsers?

This works in IE9 and above. If it’s below IE9, then the plugin just doesn’t run, it won’t error or anything awful like that.

@@ Zeile 33: / Zeile 33: @@
 </syntaxhighlight>
 Stick this code anywhere on the page (or in a JavaScript file) to include it. To actually run it you can use the following markup:
+=== HTML ===
-<syntaxhighlight lang="javascript">
+<syntaxhighlight lang="html5">
 <div class="sameHeights">
 	<div data-key="sameHeights"></div>
@@ Zeile 62: / Zeile 62: @@
 You may have noticed we also initialise the plugin on window resizing as well, which means this’ll slot nicely into your responsive designs…
 What if I want multiple sets on a page?

Equal Heights - Versionsgeschichte

37.49.32.84 am 11. Oktober 2017 um 15:59 Uhr

37.49.32.84: Die Seite wurde neu angelegt: „Match Height / Equalize Heights... ohne jQuery, arbeitet auch Responsiv über mehrere Zeilen korrekt. Quelle: http://benhowdle.im/easy-peasy-equal-heights.htm…“