Curs Javascript

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 se foloseste in <table> pentru a crea celula de tip "header"?
<thead> <th> <td>
<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>
Ce proprietate CSS seteaza distanta dintre randuri?
line-height word-spacing margin
.some_class {
  line-height: 150%;
}
Care functie deschide o noua fereastra.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}
Indicati functia PHP care returneaza un array cu numele fisierelor si directoarelor dintr-un director.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
var_export($ar_dir);
Care din urmatoarele forme a verbului "sleep" (a dormi) se foloseste pentru viitor?
sleeping slept will sleep
He will sleep there.
- El va dormi acolo.
Care din urmatoarele forme a verbului "dormir" (a dormi) se foloseste pentru viitor?
dormido dormirá durmiendo
Él dormirá allí.
- El va dormi acolo.
Creare aceeasi inaltime la elemente HTML

Last accessed pages

  1. Curs si Tutoriale JavaScript (69303)
  2. Gradele de comparatie: comparative, superlative (28557)
  3. Glume, Bancuri - Chistes (333)
  4. Curs HTML gratuit Tutoriale HTML5 (102327)
  5. Trecutul simplu - Exercitii si teste incepatori (13429)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (4197)
  2. Curs HTML gratuit Tutoriale HTML5 (3449)
  3. Curs si Tutoriale JavaScript (2985)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (2945)
  5. Curs CSS Online Tutoriale CSS3 (2900)