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

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

Sistem multi-language folosind jQuery

functii javascript, invata Javascript, invata jQuery, javascript, jQuery, multi-language

Va explicam acum cateva luni de zile cum se poate face un site multi-language in Flash. Acum va voi prezenta aceeasi metoda dar folosindu-ne de Javascript si jQuery.

Sa definim in primul rand vectorul care va contine limbile noastre. Pentru acest exemplu am ales romana, engleza si franceza.

var langs = new Array("ro", "en", "fr");

Acum sa adaugam cateva cuvinte simple.

langs[0] = new Array('salut', 'noapte buna', 'pofta buna');
langs[1] = new Array('hello', 'good night', 'good appetite');
langs[2] = new Array('bonjour', 'bonne nuit', 'bon appétit');

Dupa cum vedeti, ne folosim tot de o matrice, ca si in Flash. Fiecare limba (element din vector) a devenit la randul sau un alt vector care contine cuvintele traduse.

Avem nevoie si de o variabila care sa tina minte limba curenta. Vom seta romana ca limba de baza (pozitia 0 in vector).
citeste restul articolului

jQuery – Notiuni de baza

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

Sa vedem cateva chestiuni simple referitoare la jQuery.

Prima data vom vedea cum se face selectia unui element.

$('element').actiune();

Element poate fi un id (#element), o clasa (.element) sau chiar o componenta a DOM-ului. Puteti inlocui $ cu jQuery iar rezultatul va fi acelasi. Se foloseste si aceasta notatie pentru a evita diferite conflicte ce pot aparea intre script-uri.

Acum, dupa ce am selectat elementul de care suntem interesati, sa vedem ce ii putem face. Sa consideram ca am facut selectia pentru:

<p id="test"></p>

Sa adaugam putin continut in cadrul acestui paragraf.

$(‘#test’).html(‘Vom adauga acest text in paragraf.’);

Dupa cum observati, folosind functia .html() putem adauga orice tip de text, chiar si sectiuni de cod HTML.
citeste restul articolului

Animatii jQuery pentru text

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

Sa vedem cateva efecte simple pe care le putem atribui unui text folosind jQuery.

1. Modificarea transparentei textului

Sa consideram paragraful urmator.

<p id="animatie1">Acesta este un text de proba.</p>

Vrem ca atunci cand cineva da click pe text, acesta sa devina transparent.

$('#animatie1').click(function() {
	$(this).animate({ opacity: '0.1' }, 500);
});

citeste restul articolului