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

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

Dezactiveaza copy/paste in textarea

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

Probabil ati vazut aceasta functie pe mai multe site-uri, printre care si okazii.ro. Este o metoda foarte buna de a combate multiplicarea comentariilor. Sunt persoane care adauga acelasi text de mai multe ori pe mai multe pagini (lucru destul de nasol pentru Google).

Solutia este simpla:

<textarea oncopy="return false" onpaste="return false" oncut="return false"></textarea>

Dar, daca nu vreti sa modificati structura existenta a site-ului, puteti rezolva problema cu un mic artificiu.

citeste restul articolului

Tastatura virtuala folosind jQuery

animatii jQuery, functii javascript, invata Javascript, invata jQuery, jQuery, tastatura virtuala

Am vazut cum putem face o tastatura virtuala in Flash, acum vom vedea cum o putem face folosind Javascript si jQuery.

Vom construi structura HTML folosindu-ne doar de jQuery si o vom include intr-o functie Javascript.

function afisareTastatura() {
	$('body').append('<div id="afisare"></div>');
	$('body').append('<div id="tastatura"></div>');
}

Avem nevoie de 2 div-uri, unul pentru a afisa textul si unul pentru a afisa butoanele tastaturii.

Ca si in cazul variantei Flash vom alcatui un vector dintr-un string care va contine toate caracterele tastaturii.
citeste restul articolului