Acest tutorial contine o functie JavaScript care poate fi folosita pentru a crea aceeasi inaltime la mai multe elemente HTML.
Este util atunci cand aveti mai multe DIV-uri (sau alte tag-uri HTML) cu un continut dinamic (cu inaltimi diferite), si doriti sa le faca pe toate la aceeasi inaltime.
Adaugati urmatorul script JavaScript la sfarsitul documentului HTML, inainte de </body>, sau dupa toate elementele a caror inaltime doriti sa se alinieze.
in instructiunea alignHgs('id1', 'id2', 'id3');, inlocuiti argumentele: 'id1', 'id2', 'id3' cu ID-ul elementelor HTML la care doriti sa faceti aceeasi inaltime. Puteti adauga oricate ID-uri doriti, fiecare intre ghilimele, si separate prin virgula.
Cod script:
<script type="text/javascript"><!--
// - marplo.net
// obtine inaltimea elementeloor HTML cu ID-ul transferat in parametri
// seteaza inaltimea maxima la fiecare tag
function alignHgs() {
// preia argumentele si numarul lor
var args = alignHgs.arguments;
var args_nr = args.length;
// parcurge array-ul cu argumente, preia inaltimea fiecarui tag si-l adauga in "ar_hgs"
var ar_hgs = new Array();
for (var i=0; i<args_nr; i++) {
ar_hgs[i] = document.getElementById(args[i]).clientHeight;
}
// obtine inaltimea maxima din "ar_hgs" array
var max_hg = Math.max.apply(null, ar_hgs);
// seteaza inaltimea maxima la fiecare tag din arguments
for (var i=0; i<args_nr; i++) {
document.getElementById(args[i]).style.height = max_hg+'px';
}
}
// apeleaza functia cu ID-urile elementelor
alignHgs('id1', 'id2', 'id3');
--></script>
- Acest script obtine inaltimea maxima a elementelor HTML al caror ID e adaugat la argumente, apoi seteaza acea valoare la fiecare dintre acele elemente, cand pagina este incarcata.
.
Daca doriti ca inaltimile sa fie aliniate atunci cand un link, sau un buton este apasat, stergeti "alignHgs alignHgs('id1', 'id2', 'id3'); din script si adaugati aceasta instructiune in link (sau buton), cu onclick="alignHgs('id1', 'id2', 'id3');". Vedeti si exemplul urmator.
Acest exemplu are trei DIV-uri cu inaltimi diferite, si un buton care apeleaza functia alignHgs() cand e apasat:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JavaScript aliniere inaltimi</title>
<style type="text/css">
div {
float:left;
width:30%;
margin:2px;
border:2px solid blue;
background-color:#e7fee8;
}
</style>
</head>
<body>
<div id="dv1">marplo.net - Cursuri gratuite</div>
<div id="dv2">
www.coursesweb.net - Cursuri pentru Web development:<br />
- tutoriale video<br />
- lectii gratuite si resurse pentru Domnload
</div>
<div id="dv3">
www.php.net - site-ul echipei PHP<br />
- limbaj pt. server scripting.
</div>
<br style="clear:both;" />
<button onclick="alignHgs('dv1', 'dv2', 'dv3')">Align</button>
<script type="text/javascript"><!--
// - marplo.net
// obtine inaltimea elementeloor HTML cu ID-ul transferat in parametri
// seteaza inaltimea maxima la fiecare tag
function alignHgs() {
// preia argumentele si numarul lor
var args = alignHgs.arguments;
var args_nr = args.length;
// parcurge array-ul cu argumente, preia inaltimea fiecarui tag si-l adauga in "ar_hgs"
var ar_hgs = new Array();
for (var i=0; i<args_nr; i++) {
ar_hgs[i] = document.getElementById(args[i]).clientHeight;
}
// obtine inaltimea maxima din "ar_hgs" array
var max_hg = Math.max.apply(null, ar_hgs);
// seteaza inaltimea maxima la fiecare tag din arguments
for (var i=0; i<args_nr; i++) {
document.getElementById(args[i]).style.height = max_hg+'px';
}
}
--></script>
</body>
</html>
In browser va apare urmatorul rezultat (dati click pe butonul "Align"):
marplo.net - Cursuri gratuite
www.coursesweb.net - Cursuri pentru Web development:
- tutoriale video
- lectii gratuite si resurse pentru Domnload
www.php.net - site-ul echipei PHP
- limbaj pt. server scripting.