jQuery: bordi rotondi sulle immagini per sovrapposizione

Giovedì 30 Ottobre, 2008

A causa dei diversi rendering tra i vari browser, che vedono sicuramente Microsoft Internet Explorer in testa, bisogna sempre ricorrere ad artifizi particolari per applicare effetti che, ormai, dovrebbero rappresentare uno standard. I pluri-discussi bordi arrotondati sono un classico esempio del “disastro” prodotto dalla completa incapacità di realizzare uno standard serio sul rendering delle pagine HTML/CSS. Esistono in rete numerosissime soluzioni che permettono di ottenere “effetti” (effetti che esonerano dall’HTML attuale come bordi arrotondati, effetti ombra, riflessioni, etc…) con patch sui fogli di stili, particolari trucchi con l’uso di div innestati, librerie Javascript, uso delle canvas, etc…
A titolo puramente didattico vorrei illustrare un’ulteriore tecnica (cross-browser) per applicare dei bordi arrotondati a delle immagini:

Demo e sorgenti

Continua a leggere… »

Post correlati

Tags: , , , , , , , , , , , , , , , , , , , , , , , , ,
Pubblicato in CSS, Grafica & Design, Internet, Javascript, Sviluppo, Tutorials, jQuery | Nessun commento »

Camelize, CamelCase

Lunedì 20 Ottobre, 2008

Come già visto nel post Varietà di coding e di coding gli approcci che uno sviluppatore può avere alla risoluzione di un problema sono diversi e molteplici a parità del linguaggio di programmazione usato. Ecco come alcuni dei più noti framework Javascript hanno risolto una semplice funzione di CamelCase:

Prototype.js

Prototype.js, nella versione 1.6.0.3, propone esplicitamente un metodo camelize() per effettuare il camelcase su una stringa. L'approccio dell'autore è abbastanza semplice e il codice risulta auto-esplicativo. In questo caso non è stato fatto nessun uso delle Regular Expression!

PLAIN TEXT
JavaScript:
  1. camelize: function() {
  2.     var parts = this.split('-'), len = parts.length;
  3.     if (len == 1) return parts[0];
  4.  
  5.     var camelized = this.charAt(0) == '-'
  6.       ? parts[0].charAt(0).toUpperCase() + parts[0].substring(1)
  7.       : parts[0];
  8.  
  9.     for (var i = 1; i <len; i++)
  10.       camelized += parts[i].charAt(0).toUpperCase() + parts[i].substring(1);
  11.  
  12.     return camelized;
  13.   }

Continua a leggere... »

Post correlati

Tags: , , , , , , , , , ,
Pubblicato in Internet, Javascript, Sviluppo | Nessun commento »

Wordpress: come scrivere un reply to comment usando jQuery

Venerdì 3 Ottobre, 2008

Recentemente Cristiano Fino ha rilasciato un utile Plugin per Wordpress in grado di aggiugere due link ad ogni commento di un post (forse ne avete uno simile installato, visto che nella directory di Wordpress.org ne ho travati un paio, tuttavia essendo un software italiano sarebbe il caso di onorare l'ottimo lavoro fatto da Cristiano). Questi Link (reply & quote) permettono di rispondere e/o quotare l'autore di un commento, eseguendo quella noiosa operazione di inserire il carattere at (@) per indicare a chi ci si rivolge. In questo tutorial voglio illustrare - per gli utenti medio-esperti - il modo di aggiugere queste due funzionalità "a mano", senza ricorrere all'istallazione di nessun Plugin. Inoltre sfrutterò le capacità di jQuery per la parte in Javascript. La tecnica che espongo è la medesima che ho usato per introdurre questa funzionalità in questo blog.

Nota: l'uso di un plugin è la miglior soluzione per chi tende a modificare spesso il proprio template Wordpress o, al limite, ha in previsione di farlo. Questo tutorial vuole solo mostrare come eseguire interventi mirati all'interno del codice Wordpress ed è dedicato ai più curiosi.

Modifica del file comments.php

La prima modifica che apportiamo è quella di inserire i link "reply" e "quote" all'interno di ogni commento. Per fare questo editiamo il file comments.php situato nella cartella del nostro tema. Questo file contiene tutte le istruzioni che consentono di visualizzare i commenti alla fine di un post. La sezione che ci interessa (che può variare leggermente da tema a tema) è il loop di creazione dei vari commenti, riconoscibile da:

Continua a leggere... »

Post correlati

Tags: , , , , , , , , , , , , ,
Pubblicato in CSS, Javascript, PHP, Sviluppo, Tutorials, WordPress, jQuery | 13 commenti »

HTML dinamico con Prototype: stili e script

Venerdì 9 Maggio, 2008

Oltre un anno fa avevo scritto un post ( HTML dinamico con Javascript) che illustrava alcune tecniche per aggiungere dinamicamente fogli di stile e script ad una pagina HTML già caricata. Chi usa Prototype.js si può semplificare notevolmente la vita usando ad esempio:

PLAIN TEXT
JavaScript:
  1. document.observe("dom:loaded",
  2.     function() {
  3.         var script = new Element("script", { type: "text/javascript", src: "/js/altro.js" });
  4.         $$("head")[0].insert(script);
  5.     }
  6. );

Dopo che la pagina è stata caricata (document.observe) viene aggiunto un nuovo script Javascript! Per gli stili vale esattamente la stessa cosa!

Post correlati

Tags: , , , ,
Pubblicato in CSS, Internet, Javascript, Sviluppo | Nessun commento »