Șmecherii de CSS + jQuery

Tabele ascultătoare:

Se poate întâmpla, și se întâmplă ca unele tabele să devină ”obraznice”! Adică iei un tabel de pe o pagină, îl muți pe altă pagină, și deși are aceleași stiluri și dimensiuni, nu le mai respectă și se dimensionează după bunul plac. Dacă ai o imagine în background, sau chenare în jurul celulelor tabelului, rezultatul este un tabel urât. Bine că asta poate fi rezolvată cu o singură linie de CSS:

Reguli de CSS3 cu măsură:

CSS3 devine din ce în ce mai popular. E foarte bine, numai că unii designeri le aplică fără să-și dea seama că au intrat pe teritoriul CSS3 și suportul din partea navigatoarelor este limitat sau chiar lipsește cu desăvârșire. Acum chiar dacă folosiți HTML5 Shiv sau Modernizr și poți aplica css3 în marea majoritate a browserelor s-ar putea să observi că unele stiluri sunt randate diferit. Un exemplu este text-shadow, astfel următorul stil va afișa textul diferit în webkit (Safari + Chrome), Firefox și Internet Explorer 9:

Problema nu ar trebui să fie că am 3 umbre, le-am pus pentru a obține un anumit efect. Și nu e. Problema e că specificațiile CSS3 nu sunt încă definitive, și fiecare grup de dezvoltatori le implementează independent. Asta nu e o surpriză, stați liniștiți, și cu CSS2 au făcut la fel, deși specificațiile erau oficiale – nu am uitat de buclucașul IE, și implementarea box-model în Opera. Dar cu toate astea siturile nu au încetat să fie mai atrăgătoare.
Dar să revin la problemă, cum am spus de regula de mai sus, în Chrome efectul se aplică aproape bine. În IE 9, umbrele abia se văd, dar textul e lizibil. Spre deosebire în Firefox ultima umbră se vede exagerat de mare și face textul aproape ilizibil, oricum prea încețoșat.
Deci am nevoie de un stil special care să se aplice pentru Firefox, pentru IE oricum aveam deja unul aplicat de comentarii condiționale .
Ca să rezolv problema am apelat la jQuery, mai exact la metoda jQuery.browser. Acestă metodă javascript e simplă dar îmi permite să aplic un set de reguli diferit în funcție de navigator. Deci am următorul cod:

Acesta mai adaugă o clasă în plus la elementul body, care indică navigatorul. După încărcarea paginii cu Firefox body-ul va arăta așa:

Și pot aplica un stil specific pentru Firefox, ca să fac textul lizibil și să păstrez efectul, astfel:

Folosind aceeași tehnică pot aplica stiluri specifice și pentru alte navigatoare. De asemenea codul poate fi extins să notifice și versiunea sau localizarea (limba) navigatorului.

WP Image Preloader

Great news: version 1.2 of the plugin has been released! Now you can preload more images with a single piece of shortcode.

WP Image Preloader is a plugin for WordPress, made to help you speed up your blog. It pre-loads images using the Javascript technique.

How to preload your images? You can do this in two ways:

  1. Add the relative or absolute url of each imag into the default stack. This way, the image(s) will be preloaded on every page of the blog. Use this if you have hover images for menus.
  2. By adding the shortcode [preload=image_url] for one image or [preload=image_url1, image_url2, image_url3] for more images, into your posts. Note you have to activate the shortcode from the plugin configuration page first. This way the image will be preloaded only when viewing that specific post or page. You can also use relative or absolute urls.

Screenshots:

Documentation:

WP Image Preloader uses a jQuery script to preload images. The basic functionality of the script uses the same document.createElement('img') traditional DOM method. You can find the code in /js/jquery.imagepreloader.js file.

As per server-side, the plugin  uses a global array (stack) $WPIMGP_Queue = array(), to store absolute urls to the images.  The functions used to add urls to the global stack are:  wpimgpreloader_build_default_stack() and wpimgpreloader_parse_stack_from_content($content="") .  So the default stack is added to the array during wp_head action, while images preloaded using shortcodes will be filtered during the_content.

All the urls, are parsed using wpimgpreloader_parse_url($url) function, which also decides whether it should add the blog url at the beginning or not.

After parsing the all of the urls, what remains to do is to output the javascript code for image preloading. This action takes pace during the wp_footer by the wpimgpreloader_preload_js() function. If you take a look at it you’ll notice it first calls another function, wpimgpreloader_js_string_from_array($array, $derrive=false, $value=false) which returns a Javascript – formatted version of the input array.

How to use this plugin with your theme?

Course you can install the plugin and use it as it is, out-of-the-box. But, if you’d prefer you can also “embed” it’s functionality in your theme, and avoit having users to install it.  To do this, you need to add two more files  to your theme: wp-image-preloader-portable.php and jquery.imagepreloader.js, provided with the plugin. Then:
– enqueue the Javascript file (jquery.imagepreloader.js) to load in the header of your theme.
– include the PHP file (wp-image-preloader-portable.php) in your functions.php.
– call wpimgpreloader_enqueue($images) to add urls to your images into the stack. You can use as param a string (single url) or an array of urls, absolute or relative to the blog url.
– in the footer of your theme call wpimgpreloader_preload_js(TRUE) to print the image preloader Javascript.

Notes:

This plugin only generates the Javascript code to preload images. How fast the images are loaded is entirely the job of the web server serving the image(s).  Use it for images you may need later in the page (like hover) , not for images loaded anyway with the <img>  tag.
As the plugin name says it is for pre-loading images not for optimizing image(s) load.

Download:

You can always download the latest version from wordpress plugin’s page.

Questions?

If you need help,  have a question or suggestions, please add a comment to this article. Comments are held for moderation, but don’t worry I’ll try to get you an answer asap.

Cum să faci un ligthbox să stea la mijloc cu jQuery

Am avut de executat recent un script care să facă un facebox să stea în mijlocul ferestrei chiar dacă aceasta își schimbă dimensiunile, de exemplu atunci când este redimensionată de utilizator. De fapt, thickbox are implicit această funcție, însă sit-ul respectiv utiliza facebox, din motive de …. design.

jQuery și-a dovedit și de această dată utilitatea. În cazul meu, div-ul pricina avea id-ul facebox, așa că este adresat cu ”#facebox”. Iar aici e script-ul:

Asta ține lightbox-ul în mijloc atunci când fereastra navigatorului este redimensionata. Pentru a poziționa un lightbox în centru, la încărcare, avem următorul cod:

Insa cele mai multe lightbox-uri au deja implementată funcția de centare, așa că nu veți mai avea nevoie de acest cod.

jQuery – headcraft scripting!


Primul meu contact cu jQuery l-am avut anul trecut, cand a trebuit sa transform un tabel intreg intr-un drop-down menu fara sa afectez css-ul sau html-ul site-ului si binenteles “asap”.

Si uite asa am dat de magic-ul jQuery – cu doua linii de script am facut meniul, si fara bataie de cap cu compatibilitatea cu alte browsere.

De atunci folosesc jQuery aproape zilnic. Pana acum nu i-am gasit nici un punct slab. Inca de la versiunea 1.2.3, libraria jQuery avea metode pentru AJAX atat prin POST cat si GET, sincron sau asincron cu functie de callback care se poate apela cu rezultatul cererii ca parametru – ce mai ai la dispozitie toata banda sa comunici cu clientul in cel mai elegant mod posibil.
Despre efecte: slideUp, slideDown, fade, hide, animate etc. – trebuie sa le incercati pe toate!

De asemenea dispune de foarte multe pluginuri. De cele mai multe ori nu trebuie sa-ti bati capul sa inventezi ceva – cauti prin lista de plugin-uri!

Site-uri de vazut: www.jquery.com (site-ul oficial), www.visualjquery.com (documentatie), interface.eyecon.ro (plugin-uri si demo), www.leandrovieira.com (lightbox plugin pt jquery).

Spor la scriptat!