Archivio

Articolo taggato ‘js’

Popover e elementi fissi

January 8th, 2010 No comments

Bikini Contest coperto da simpatici popoverNegli ultimi mesi i web designer, o chi ne fa le veci, si stanno sbizzarrendo inserendo nei layout elementi fissi o elementi in sovraimpressione, tecnicamente chiamati popover.

Una vera e propria moda, che sfrutta un particolare attributo di stile, che è sempre esistito ma che improvvisamente è stato ripescato ed oggi si sta inflazionando parecchio. Bando alle chiacchiere e vediamo come creare un elemento fisso o un popover. Leggi tutto…

Categorie: Web Programming Tag: , , ,

IE6: LI height bug

December 9th, 2009 31 comments

IE6: spazzatura, ancora usata però!Appena risolto un altro problema di incompatibilità di quello stron*o di IE6, il peggior browser che il mondo informatico e web abbia mai visto: non per problemi prestazionali, ma per problemi di compatibilità con le direttive del W3C!

Uno di questi problemi l'ho chiamato "LI Height bug" ovvero problema della gestione delle altezze di liste (UL>LI), gestite visivamente via CSS, per creare un menù di navigazione verticale.

 

Leggi tutto…

Banner ingrandibili SOLO css

May 20th, 2009 8 comments

All’articolo precedente abbiamo creato un banner estensibile usando JS e CSS, e associando il tutto ad un DIV.

Però si può fare di meglio, sfruttando la proprietà CSS del tag <A>: hover!

Leggi tutto…

Blog multilingua col “g” traduttore

January 13th, 2009 11 comments
Lingue Diverse Per Esprimere Una Sola Parola di ° Lιттlε вυттεяҒly °

Secondo Enrico Sigurtà avere il blog multilingua è uno dei fattori che permette di guadagnare di più con il proprio blog, sfruttando Adsense. La sua proposta, diciamo economica, è quella di sfruttare gli strumenti di traduzione online gratuiti: infatti propone Babelfish, il tools da sempre usato da Altavista.

Io che sono più filogugolliano propongo invece la soluzione utilizzando Google Translate. Se andate nel sito Google stesso mette a disposizione uno script da inserire nel sito per avere un comodo gadget con menù a tendina e decine di lingue disponibili. Con un click il navigatore ottiene il sito tradotto.

Devo dire che i risultati, specie per chi spinge un po’ su linguaggio e slangy, non sono sempre affidabili. Ammetto però che sempre più spesso i risultati di Google Translate sono decisamente buoni. O almeno permettono di capire il linguo nell’idioma sconosciuto.

Soluzione alternativa

Propongo una soluzione alternativa: sfruttiamo il traduttore di Google ma con un pizzico di javascript creiamoci il nostro link personalizzato da mettere dove vogliamo. Sostanzialmente prendiamo il link che genera il tool-traduttore (menù a tendina) e facciamo in modo di creare il link con l’indirizzo della pagina in cui siamo.

<a href="javascript:location.href='http://translate.google.com/translate?client=tmpg&hl=en&u=' + encodeURIComponent(location.href) + '&langpair=it|en';pageTracker._trackEvent('gTranslate','clickFromPost','en');">English &raquo;</a><br />

Spiegazione del link:

  • javascript:
    genera un link che è in realtà è una chiamata javascript
  • location.href
    proprietà per il cambio pagina
  • hl=en
    parametro URL che setta la lingua dell’ambiente del traduttore di Google
  • encodeURIComponent()
    codifica uan stringa impedendo a caratteri speciali di rompere la stringa URL, esempio convertendo le barre "/" etc.
  • location.href
    l’url della pagina in cui il navigatore è
  • langpair=it|en
    parametro URL che setta il linguaggio sorgente e il linguaggio di destinazione, in cui si vuole fare tradurre il sito

Tutto chiaro? Altrimenti fate un fischio nei commenti!

 

Tracciare gli eventi

November 28th, 2008 1 comment
Prendere le misure di bluandgreenContinuo un po’ alla volta il mio viaggio nel mondo di Google Analytics. Oggi vi parlo del tracciamente degli eventi. E’ un sistema di statistic tracking molto simile al tradizionale, ma permette di individuare per ogni "evento" più attributi. Attenzione: può essere fatto solo con il nuovo script di tracking ga.js.

Qualche giorno fa vi ho proposto lo script per tracciare ogni tipo di link nel vostro sito: link tracking. Uno dei maggiori difetti di tale sistema è che ogni evento tracciato diventa per Analytics una pagina: vi aumentano iperbolicamente le pageview, trasformando il dato in una informazione priva di significato (vi ricordate quando si "vendevano" gli hits???). Leggi tutto…

Stili classi e javascript

September 23rd, 2008 No comments

Molto tempo fa avevo già presentato un menù fatto in javascript e css, sfruttando la possibilità di interagire tramite javascript con il DOM dei CSS e dell’HTML.

Il sistema si basava sul sotto oggetto style di un oggetto HTML, modificando gli attributi dei sotto elementi: colore, bordo, altezza…

Sappiamo tutti però che la potenza dei CSS è proprio quello di staccare la struttura HTML dalla definizione degli stili, e di gestire gli stili in modo centralizzato. Se noi andiamo a ridefinire delle proprietà di visualizzazione nella pagina via JS, andiamo a spu**anare tutto quello per cui abbiamo progettato il sito in CSS.

Avremo bisogno di un metodo per gestire il cambio della classe di un oggetto, tramite Javascript. Questa non è altro che una proprietà degli oggetti HTML, chiamata className.

Usarla è davvero banale:

document.getElementById("mioOggetto").className = "bordazzurrogrosso"

Come avete sicuramente capito abbiamo assegnato all’oggetto mioOggetto al classe bordazzurrogrosso. Se vogliamo spingerci un po’ oltre possiamo anche fare un effetto tipo questo:

<script type="text/javascript">
function divOn(o){
o.className = "classeDelDivOn";
}
function divOff(o){
o.className = "classeDelDivOff";
}
</script>
<div id="mioDiv" onmouseover="divOn(this);" onmouseout="divOff(this);">...</div>

Ora tocca a voi giocare… intanto grazie a techpatterns.

Categorie: Web Mania Tag: , , , ,

Ancora window.onload

September 22nd, 2008 3 comments

Qualche secolo fa ho scritto un semplice post per documentare come utilizzare l’evento "onload" di javascript. L’evento che richiama una funzione, al momento in cui l’intera pagina è caricata.

Purtroppo oggi ho scoperto (tardi???) che con Firefox 3 non funziona. Sono quindi corso ai ripari, trovando la soluzione per risolvere il problema:

// for Mozilla browsers
if (document.addEventListener) {
  document.addEventListener("DOMContentLoaded", init, false);
}

Hola

p.s.: Grazie a Napolux per il supporto morale :)

Categorie: Web Mania Tag: , ,

JS: gestire multi window onload

June 27th, 2008 No comments

Spesso quando creo i siti utilizzo pesantemente gli include server side, dapprima con coldfusion tramite <cfinclude…> poi con la chiamata di IIS <!– #include….–>, ma penso che chiunque sia interessato all’argomento conosco la cosa benissimo. Comunque piccolo esempio:

<!-- #include file="include/connection.asp" -->

Le parti che includono la maggior parte delle volte sono pezzi di layout condiviso in tutto il sito, tipo menù laterali, top, footer, etc. Uso spesso anche i template di Dreamweaver, ma se il materiale è in file esterni si rischia molto meno il cu*o in caso di rottura del template. E’ un attimo fare danni, specie se editiamo qualcosa fuori di DW.

Uno dei problemi nel caso di menù "esternizzati" è il precarimento delle immagini. Se facciamo tutto su DW alla fine più o meno si arrangia lui a sistemare il preload dentro al window.load, se però ce l’abbiamo in file diversi dobbiamo gestirlo a mano.

Partiamo da un concetto, dichiarazioni multiple di window.onload, non sono additive. Quindi l’ultima dichiarazione caricata dal browser è chiaramente quella che lui esegue. Per risolvere questo "conflitto" ho trovato uno script molto utile, niente di particolarmente complesso, ma sicuramente una ottima idea: Window Onload Manager (WOM).

Il funzionamento è molto semplice. Invece di caricare le varie azioni da fare al caricamento direttamente sull’evento onLoad, le carichiamo su un’array che alla fine richiamerà tutto le funzioni all’onload.

//questa funzione dice di caricare la funzione womGo all'onload
function womOn(){
  window.onload = womGo;
}
//wowGo, quando è chiamato, esegue tutte le funzioni inserite nell'array
function womGo(){
  for(var i = 0;i < woms.length;i++)
    eval(woms[i]);
}
//wowAdd aggiunge una funzione all'array
function womAdd(func){
  woms[woms.length] = func;
}
//dichiarazione globale dell'array
var woms = new Array();
//esempio...
womAdd('hideDiv("rightBox")');
womAdd('ajaxInit()');
womAdd('setHandler("tr","mo","onmouseover","rowHightlight")');
womOn();

Penso sia tutto chiarissimo. Vero?