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.

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag e folosit pentru a adauga liste cu definitii in element <dl>?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Limbaj de cod pentru pagini web</dd>
</dl>
Care proprietate CSS poate sa ascunda un element in pagina, lasand spatiu gol in locul lui?
display position visibility
#id {
  visibility: hidden;
}
Indicati evenimentul declansat cand se apasa clic pe un obiect in pagina.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://www.MarPlo.net/");
}
Indicati variabila PHP ce contine datele din $_GET, $_POST si $_COOKIE.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Care din urmatoarele cuvinte reprezinta un Verb?
lighting believe path
I believe in my path.
- Eu cred in calea mea.
Care din urmatoarele cuvinte reprezinta un Verb?
creer camino iluminaciĆ³n
creer = a crede; camino = cale /drum; iluminaciĆ³n = iluminare
Creare aceeasi inaltime la elemente HTML

Last accessed pages

  1. Prezentul simplu si continuu - Present Tense Simple and Continuous (47118)
  2. Prezentul simplu - Exercitii si teste incepatori (17649)
  3. Verbe - Exercitii si teste engleza incepatori (8804)
  4. Exercitii engleza - English Tests and exercises - Grammar (25753)
  5. Gramatica limbii engleze - Prezentare Generala (101148)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (3160)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (2346)
  3. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1783)
  4. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (1367)
  5. Conditional IF in Limba Engleza - Fraze Conditionale (1307)