Bifeaza toate checkbox-urile folosind jQuery

checkbox, functii javascript, invata Javascript, invata jQuery, jQuery, validare formular

Ne vom ocupa de o problema aparent complexa dar foarte simplu de efectuat: bifarea tuturor casutelor de tip checkbox dintr-o pagina HTML.

Sa adaugam intr-o pagina HTML o serie de checkbox-uri.

<div id="casute">
	<input type="checkbox" />
	<input type="checkbox" />
	<input type="checkbox" />
	<input type="checkbox" />
	<input type="checkbox" />
	<input type="checkbox" />
	<input type="checkbox" />
	<input type="checkbox" />
	<input type="checkbox" />
	<input type="checkbox" />
</div>

Acum sa adaugam casuta care le va bifa/debifa pe toate.

citeste restul articolului

Validare formular folosind jQuery

AJAX, efecte jQuery, invata Ajax, invata jQuery, jQuery, validare formular

Probabil ca ati vazut, in cautarile voastre, o multime de metode de validare a unui form folosind jQuery. Am sa va prezint metoda pe care o folosesc cel mai des si care nu ma lasa la greu :)

Sa construim un formular simplu si clasic: nume, e-mail si mesaj.

<form action="" id="contact">
	<input type="text" name="nume" />
	<input type="text" name="mail" />
	<textarea name="mesaj" rows="4" cols="5"></textarea>
	<input type="submit" value="Trimite" />
	<input type="reset" value="Renunta" />
</form> 

Sa vedem in primul rand cum arata functia de validare a adresei de e-mail:
citeste restul articolului

Zi si noapte folosind JavaScript si jQuery

flash, functii javascript, invata Javascript, invata jQuery, javascript, jQuery

Anul trecut facusem in Flash o aplicatie simpla care isi schimba imaginea de fundal in functie de ora utilizatorului ( day and night Flash header ).

Acum am fost nevoit sa gasesc o metoda care sa faca acelasi lucru dar sa poata fi implementata fara Flash, folosind doar JavaScript. Sa vedem ce solutie am gasit…

In primul rand vom include tot codul JS intr-o functie care va returna true (zi) sau false (noapte).

if(verificaOra()) {
	$('body').addClass('zi');
} else {
	$('body').addClass('noapte');
}

Daca functia va returna true, folosind jQuery vom atribui clasa .zi body-ului. Daca va returna false vom atribui clasa .noapte.
citeste restul articolului

Static FBML

css, facebook, layout html, Learn CSS, Learn HTML, pagina facebook, static FBML

Astazi ne vom ocupa de aranjarea unei pagini pe Facebook. Nu am sa incep cu povesti despre cum sa faceti o pagina pe Facebook ci am sa va explic direct cum puteti scoate in evidenta acea pagina.

Aplicatia de care aveti nevoie se numeste Static FBML. Aceasta aplicatie va permite sa inserati cod HTML in pagina voastra.

Este foarte simplu, nu trebuie decat sa urcati pe un server imaginile pe care vreti sa le afisati si fisierul .css.

Sa vedem cateva elemente de baza care vor face pagina mai interactiva.
citeste restul articolului

Schimba fisierul CSS folosind jQuery

css, efecte jQuery, invata jQuery, jQuery, Learn CSS

Folosind jQuery putem face o multime de lucruri dupa cum am vazut si in articolele precedente. Astazi va voi prezenta o metoda foarte simpla de a schimba fisierul CSS cu unul nou, fara a reincarca intreaga pagina.

In primul rand sa scriem 2 stiluri diferite:

1. normal.css

.box {
	padding: 10px;
	background: #f2f4f9;
	border: 2px solid #555;
	z-index: 1;
}

.box h1 {
	font-size: 22px;
	margin: 10px 0 10px 0;
	padding: 0;
	width: 100%;
	text-align: center;
	text-shadow: 1px 1px 1px #555;
}

citeste restul articolului

Casute animate folosind jQuery

animatii jQuery, efecte jQuery, functii javascript, invata Javascript, invata jQuery, jQuery

Va voi prezenta o metoda simpla de a realiza o animatie pentru o serie de casute. Va poate fi utila in momentul in care prezentati mai multe oferte (hosting, prestari servicii etc.).

Aplicatia finala va arata ca in imaginea de mai jos.

Sa pornim la drum. Pentru inceput vom adauga in pagina 3 div-uri care au definita clasa box.
citeste restul articolului

Efecte CSS3

css, css3, efecte CSS3, Learn CSS, noutati CSS3

Va voi prezenta cateva efecte noi aduse de CSS3. Pentru a le putea vedea/folosi va trebui sa aveti un browser care sa stie sa interpreteze CSS3.

1. Umbra text CSS3

Sintaxa este foarte simpla si trebuie atribuita elementului pentru care doriti sa afisati umbra.

text-shadow: pozitiaX pozitiaY razaBlur culoare;

Sa luam un exemplu.

text-shadow: 2px 2px 2px #000;

Rezultatul va fi:

Acest text va avea o umbra.

citeste restul articolului