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
Ce tip de <input> creaza un camp de text care trebuie sa contina doar numere?
type="text" type="number" type="date"
<input type="number" name="points" min="5" max="80" />
Ce proprietate CSS permite modificarea transparentei unui element?
font-style opacity color
#id {
  filter:alpha(opacity=40);    /* for IE */
  opacity:0.4;
}
Clic pe functia care formateaza un numar la o anumita lungime de caractere.
toPrecision() exp() toFixed()
var num = 12.84567;
alert( num.toPrecision(3) );       // 12.8
Ce functie aranjeaza aleator elementele dintr-un array?
natsort() shuffle() sort()
$lang =[10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net");
shuffle($lang);
var_export($lang);     // array (0=>"coursesweb.net", 1=>"PHP", 2=>"JavaScript")
Indicati Superlativul cuvantului "good" (bun).
better best goodest
She is the best in our class.
- Ea este cea mai buna din clasa noastra.
Care este Superlativul cuvantului "bueno" (bun)?
el mejor más bueno muy bueno
Él es el mejor en nuestra clase.
- El este cel mai bun din clasa noastra.
Creare aceeasi inaltime la elemente HTML

Last accessed pages

  1. Trecutul simplu - Exercitii si teste incepatori (11668)
  2. Gramatica limbii engleze - Prezentare Generala (140676)
  3. Curs PHP MySQL, Tutoriale si Scripturi PHP (48331)
  4. Prezentul simplu si continuu - Present Tense Simple and Continuous (72925)
  5. Verificare si Validare caractere din formular (445)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (847)
  2. Curs HTML gratuit Tutoriale HTML5 (616)
  3. Curs PHP MySQL, Tutoriale si Scripturi PHP (561)
  4. Curs si Tutoriale Ajax (556)
  5. Curs si Tutoriale JavaScript (554)