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

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

Google Font API

css, custom font, Google API, Learn CSS

Pe langa metoda clasica de custom font folosind Cufon, astazi am sa va prezint si metoda prin API-ul de la Google.

Pentru a implementa un font custom prin API-ul de fonturi de la Google trebuie sa respectati 2 chestiuni:

1. Includerea fisierului in pagina

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=NUME FONT" />

2. Atasarea fontului pentru elementele din pagina

body {
  font-family: 'NUME FONT', serif;
}

Lista completa de fonturi gratuite oferite de Google o puteti gasi la adresa aceasta – http://www.google.com/webfonts