Arhiva pentru tagul “jQuery”

O soluţie simplă pentru a detecta timpii morţi ai unei pagini

Scenariul este simplu: ai o pagină web, sau poate chiar o webaplicaţie, în care vrei să fructifici timpii morţi. Poate cât timp pagina nu este folosită vrei să preîncarci nişte informaţii… sau să provoci periodic o reîncărcare… sau, ceea ce m-a interesat pe mine de fapt, să de-loghezi (de-autentifici) utilizatorul din webaplicaţie. Codul de mai jos nu îmi aparţine ci l-am găsit aici – eu doar îl semnalez. Şi am să vă spun după cod limitele lui.

var idleTime = 0;
$(document).ready(function () {
//Creste numaratorul la fiecare minut
var idleInterval = setInterval(timerIncrement, 60000); // 1 minut

//Pune pe zero numaratorul la miscarea mouse-ului.
$(this).mousemove(function (e) {
idleTime = 0;
});

//Pune pe zero numaratorul la apasarea vreunei taste.
$(this).keypress(function (e) {


FooTable pentru WordPress (şi jQuery)

Dacă tot am vorbit despre tabele să vă mai împărtăşesc ceva. Lucrând recent la un sit WordPress am vrut să afişez nişte informaţii într-un tabel şi desigur mi-am pus problema: cum se va comporta tabelul văzut de pe telefonul mobil de exemplu? Am căutat, am instalat şi dezinstalat pluginuri, rămânând la simpaticul FooTable. După cum vedeţi în imagine tabelul arată destul de bine (aici intră partea de CSS în acţiune şi eu am modificat puţin să se potrivească temei sitului), dar nu imaginea mă interesa cel mai mult. Ce face tabelul în spaţii mici? Se adaptează!

imagine

Haideţi să vedem: dacă am redus din lăţime coloana cu Loc a dispărut. În schimb a apărut un PLUS şi dacă dau click pe el văd …


DataTables: plugin jQuery (III)

Ei bine, după vreo 5 ani îmi permit să revin la pluginul DataTables, bucuros să văd că proiectul este încă activ şi… îmi foloseşte intens într-un nou proiect la care lucrez. Nu ştiu voi, dar pe mine tabelele mă cam exasperează: în special integrarea lor în design şi capacitatea de adaptare după rezoluţie, dar şi problema funcţionalităţii. Din fericire pluginul îşi face cu brio datoria. Am mai scris de vreo două ori despre acest plugin în trecut, dar la atâţia ani o iau ca de la zero: pluginul cere includerea unui fişier CSS pentru partea de aspect, a unuia JS pentru funcţionalitate (atenţie: depinde de jQuery deci mai vine fişierul JS pentru jQuery) şi o linie gen $(‘#tabelul-meu’).DataTable(); ca să aveţi un start nemaipomenit.

Am luat de pe Wikipedia tabelul de mai jos ca să am ce să demonstrez şi dacă veţi privi în sursă veţi vedea că …


Identificarea clickurilor cu jQuery

În proiectele Dvs web s-ar putea să vă întâlniţi cu situaţii în care doriţi să „prindeţi” click-ul mouse-ului, fie el click stânga, mijloc sau dreapta. Desigur, jQuery oferă instrumentele necesare şi vom încerca să vedem mai jos cum putem face şi ceea ce jQuery nu oferă nativ. Dacă vrem click normal pe un element (link, div, imagine…) atunci desigur putem folosim $(„#element”).click(), dar ca să trecem toate cele trei scenarii în revistă ne vom folosi de mousedown.

imagine

Astfel, următorul cod ne permite să aflăm ce fel de click am dat. Simplu… normal că este simplu.

$(document).mousedown(function(e) {
    if(e.which == 1) $("#foo").html("Click stânga!");
    if(e.which == 2) $("#foo").html("Click mijloc!");
    if(e.which == 3) $("#foo").html("Click dreapta!");
});

Dacă dorim …


Pluginuri jQuery de reţinut (I)

Un articol recent de pe WebResourceDepot, 10 Useful jQuery plugins from Github, mi-a atras atenţia asupra unor pluginuri. Unele le ştiam deja, ba chiar le folosesc, altele nu. Lista celor zece o veţi găsi în articol, eu mă limitez la patru dintre ele. Şi am să încep cu jQuery Cookie, un plugin simplu de folosit pentru un management mai uşor al cookie-urilor. Merge sub navigatoarele tradiţionale, dar şi sub Android şi iOS. Acum vreo lună am scris despre Amplify.js: un plugin jQuery pentru salvarea datelor. Îl prefer în continuare, dar de reţinut şi jQuery Cookie.

imagine

Notabil şi jQuery Waypoints, care permite să facem ceva (să apelăm o funcţie adică) atunci când un anumit element …


Typehead: pentru Bootstrap 3 şi nu numai

Una dintre deciziile asupra cărora sper să se revină a fost eliminarea din Bootstrap 3 a componentei pentru precompletare de text. Era o treabă simplă, frumos încadrată în Bootstrap… de ce au scos-o? Acum soluţia este un plugin extern, formidabil, nimic de spus, dar oricum ai nevoie de nişte paşi în plus. Mai exact ai nevoie de typehead.js, care ne oferă o demonstraţie din chiar prima pagină şi mai multe demonstraţii aici. Da, puternic! Totuşi, pentru proiecte simple webmasterii mai începători riscă mai mult să îşi cam prindă urechile.

imagine

Şi unde mai pui că după ce ai făcut partea JavaScript să meargă… zero la capitolul CSS. Da, typehead.js nu include nimic pentru partea de aspect. În timp ce exemplele arată …


Midway.js: pentru a centra elementele într-o pagină

Webmasterii ştiu că uneori te alegi cu dureri de cap atunci când încerci se centrezi, în special vertical anumite elemente dintr-o pagină. Dacă vrei să meargă şi responsive, adică pe orice rezoluţie şi/sau la schimbarea dimensiunii ferestrei, atunci o soluţie simplă este Midway.js. Nu am folosit-o încă în proiecte (voi pune la final ce cod folosesc eu) şi recomandarea mea e de aceea cu mici rezerve. În primul rând nu scrie că depinde de jQuery… dar depinde. Apoi nici dacă merge pentru a centra un element în cadrul unui alt element (în testele mele a mers şi nu a mers, după caz).

imagine

Folosirea e în teorie simplă: la div-ul (sau elementul dorit) pui clasele midway-horizontal şi midway-vertical după nevoie.  Dacă vrei să …


Pluginurile jQuery ale lui Ion

De fapt Ion nu e un român. E un rus pe numele lui Denis Ineshin, chiar din Moscova. De ce îşi prefixează munca cu Ion mă depăşeşte (chiar nu am stat să aflu). Important este că are nişte pluginuri jQuery remarcabile şi m-am gândit că poate vreţi să ştiţi de ele. Chiar dacă jQuery UI include unele dintre ofertele lui Denis, vorbim de alt design şi uneori de un control mai bun. Le găsiţi catalogate aici. Eu doar le voi enumera pe scurt. Ion.RangeSlider ne oferă evident un slider cu „skin” configurabil (3 la pachet). Poate fi folosit pentru indicarea unei valori sau a unui interval.

imagine

Ion.Tabs e pentru taburi şi are două skin-uri, arătând – depinde de …


Vex: pentru dialoguri (cică de secol XXI)

„Dialogs for the 21st century” ar duce cu gândul la ceva iniţiativă scriitoricească, dar este vorba de o bibliotecă pentru jQuery ce permite un sistem flexibil de ferestre (pentru dialoguri). Desigur, secolul XXI nu înseamnă alb şi negru, chiar şi cu simplitatea de design a la Windows 8. În fapt aspectul rudimentar cu care eşti întâmpinat în pagina demonstrativă a lui Vex este o invitaţie la a ne imagina noi ce putem face, dat fiind că suntem în control la capitolul design.

imagine

După ce aţi trecut de demo-ul poate nu foarte sugestiv, vă recomand să studiaţi Vex de aici. Veţi vedea că cu Vex se pot implementa cele trei tipuri comune de dialog: tip alertă (un mesaj cu un buton), …


Textarea pe tot ecranul

La un proiect la care am lucrat recent am avut o frustrare legată de un câmp/control textarea pe care l-aş fi vrut şi mare… dar şi mic. Adică cumva imposibil: să nu ocupe prea mult spaţiu, că mai erau şi alte informaţii de cerut, dar totuşi cine lucrează să poată să scrie rezonabil în acel textarea. Desigur, ştiu soluţiile care lungesc textarea pe măsură ce este nevoie, dar nu era ce îmi doream eu. Atunci mi-am amintit că există nişte soluţii de mărit textarea pe tot ecranul. Cât de cool! Ceva cam ca la WordPress (dar eu nu folosesc, că scriu articolele din Windows Live Writer).

imagine

Ei bine, am găsit două soluţii. Una simplă: WideArea. Poate după gustul unora prea simplă, neexistând …