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 tip de <input> creaza un element cu data tip calendar?
type="text" type="date" type="button"
<input type="date" name="set_date" value="2012-10-15" />
Ce proprietate CSS adauga efect de umbre la text?
font-style color text-shadow
h2 {
  text-shadow: 2px 3px 3px #a0a1fe;
}
Clic pe functia care adauga elemente noi la sfarsitul unui array.
pop() shift() push()
var pags = ["lectii", "cursuri"];
pags.push("download", "tutoriale");
alert(pags[2]);            // download
Ce functie aranjeaza un array in ordine crescatoare, dupa chei, mentinand corelatia dintre chei si valori?
asort() ksort() sort()
$lang =[10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net");
ksort($lang);
var_export($lang);     // array ("site"=>"coursesweb.net", 10=>"PHP", 20=>"JavaScript")
La adjectivul "big" (mare), care este forma de Comparativ (mai mare)?
biggest biger bigger
He is bigger than his sister.
- El este mai mare decat sora lui.
Care este Comparativul adjectivului "grande" (mare)?
menos grande más grande el más grande
Él es más grande que su hermana.
- El este mai mare decat sora lui.

S H A R E

Sharing Twitter

Last accessed pages

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (278073)
  2. Obiectul Date - Lucru cu Data si Timp (1120)
  3. Pronumele indirect 3 (1097)
  4. Lucrul cu mai multe cadre (3497)
  5. Verificare, Validare butoane radio si checkbox cu JavaScript (1230)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (188)
  2. Curs HTML gratuit Tutoriale HTML5 (171)
  3. Coduri pt culori (109)
  4. Creare si editare pagini HTML (104)
  5. Gramatica limbii engleze - Prezentare Generala (88)