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 afiseaza textul oblic?
<strong> <pre> <em>
<p>Cursuri, Jocuri, Anime: <em>www.MarPlo.net</em></p>
Care proprietate CSS defineste spatiul dintre continutul elementului si bordura lui?
margin padding position
h3 {
  padding: 2px 0.2em;
}
Clic pe metoda ce returneaza primul element indicat de selectorii specificati.
getElementsByName() querySelector() querySelectorAll()
// preia primul Div cu class="cls", si afiseaza continutul
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);
Indicati variabila PHP ce contine datele din formular trimise cu method="post".
$_SESSION $_GET $_POST
if(isset($_POST["field"])) {
  echo $_POST["field"];
}
Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) speak english".
I They We
We speak english.
- Noi vorbim engleza.
Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) hablamos español".
Ellos Vosotros Nosotros
Nosotros hablamos español.
- Noi vorbim spaniola.
Creare aceeasi inaltime la elemente HTML

Last accessed pages

  1. Gramatica limbii engleze - Prezentare Generala (92216)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (46914)
  3. Verbe reflexive 1 (2340)
  4. Substantivul din limba engleza - The Noun (22919)
  5. I sau Me (3223)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2261)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (872)
  3. Gramatica limbii spaniole. Indrumator si prezentare generala (718)
  4. Exercitii engleza - English Tests and exercises - Grammar (675)
  5. Alphabet and Pronunciation - Alfabetul si pronuntia in limba engleza (606)