Tooltips

Deoarece mi s-a spus că scripturile scurte sunt utile, dar și pentru că am primit ceva cereri pentru acest subiect, m-am gândit să-ți arăt cum poți face tooltip-uri cu jQuery într-un mod foarte simplu. Îți voi arăta două feluri de tooltips: statice și cu conţinutul preluat prin ajax.

De ce tooltips cu javascript? Primele motive ce-mi vin în cap sunt:

  1. Știi sigur că sunt afișate cum trebuie în toate browserele. Oricât de ciudat pare, atributul responsabil cu tooltips în browsere nu prea își face treaba. Sau cel puțin nu cum trebuie. Ba textul e trunchiat (dacă e prea lung), ba nu este afișat suficient de mult timp pentru a fi citit, ba e fontul prea mic, atributul title (căci despre el e vorba) se dovedește de multe ori insuficient pentru nevoile de zi cu zi.
  2. Le poți stiliza fix cum vrei tu. Le vrei negre, cu fundal semtransparent, și un glow subtil? Crezi că le poți face fără javascript? Mult succes!

Alternative

Înainte de a vedea cum poți face tooltips (într-un mod simplu, așa cum am făcut și până acum), hai să-ți prezit câteva alternative (în cazul în care chiar ți-e extrem de lene sau ești în criză de timp, sunt bune și astea):

Și alte câteva (zeci). Totul e să ai răbdare să le cauți. Oricum, cât timp ai pierde căutând și configurând un script pentru tooltip care habar n-ai cum funcționează și îți mănâncă și inutil de mult bandwidth-ul, ai putea sta cinci minute să încerci acest tutorial (care are o introducere mult prea mare :) )

Poţi stiliza elementul în funcţie de ce ai nevoie. De obicei, am folosit tooltips la mesaje scurte de ajutor (în pagină), prin urmare le stilizam fie cu o imagine cu litera „i” fie cu un semn al întrebării, tot imagine. De ce imagine? Simplu, pentru că arată mai bine :D

Tooltips statice

Varianta cea mai simplă este cea în care afişezi un tooltip în funcţie de atributul title (sau alt, depinde ce preferi). Asta presupune un element cu o clasă şi un titlu:
Read the rest of this entry »

ING Homebank & Greasemonkey

De curând am renunţat la serviciile Băncii Transilvania în favoarea ING. Motivul principal pentru care am făcut această tranzacţie este aplicaţia de homebanking. Care, pe lângă faptul că e cam urâţică (nu atât de oribilă ca bt24!), are o chestie enervantă: nu ţine minte id-ul. Şi cum memorarea secvenţelor de numere nu reprezintă punctul meu forte, am făcut un mic script js (de fapt o linie de js) care îmi completează field-ul respectiv. Automat.

Pentru asta ai nevoie de extensia greasemonkey. După instalare, faci click dreapta pe icon-ul din dreapta jos, după care alegi new user script:

În fereastra apărută, completezi câmpurile după cum urmează:

După ce se deschide editorul de text, scrii următoarele:
Read the rest of this entry »

Edit in place (EiP)

Dacă ai edit in place (EiP) pe site nu înseamnă că ai un site cool. Nu înseamnă că ai un site de succes. Nu înseamnă nici măcar că ai un site 2.0. De fapt, termenul de 2.0 a fost atât de folosit încât a început să fie evitat de majoritatea. Dacă stau bine să mă gândesc, nu ştiu de ce îl folosesc eu :D

Revenind. EiP înseamnă doar că îi oferi utilizatorului opţiunea de a edita un text fără a fi nevoie să părăsească pagina curentă. Desigur, EiP îl oferi doar unui utilizator înregistrat. Păi dacă e înregistrat, de ce să-ţi mai baţi capul? Că de plecat din site nu pleacă, nu? Păi el nu pleacă, dar asta nu înseamnă să-i facem în ciudă, nu? Câteva linii de cod se transferă mai repede faţă de o pagină întreagă. Sau cel puţin după matematica mea.

Markup

Dacă la sistemul de votare spuneam că avem un markup simplu, am cam minţit. Sunt deja două taguri, e stil inline, ce mai? E prea mult de scris! La EiP, markup-ul constă într-un SINGUR tag:
Read the rest of this entry »