Articoli con Tag ‘Javascript’


Simple Accordion con la classe USimpleTabStrip

La classe USimpleTabStrip, presentata in Unobtrusive Simple TabStrip, può essere utilizzata anche per realizzare un semplice menu Accordion.
Utilizzando gli effetti di BlindUp() e BlindDown() offerti da Scriptaculous:

1
2
3
4
5
6
7
8
9
10
function init(){
    uts = new USimpleTabStrip();
    uts.Init();
    uts.onShow = function(e) {
        new Effect.BlindDown(e);
    }            
    uts.onHide = function(e) {
        new Effect.BlindUp(e);
    }            
}

E riposizionando gli elementi HTML (sorgente HTML):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="accordion">
    <a href="#acc1">Accordion 1</a>
    <a name="acc1"></a>
    <div>
        <h1>Content #1</h1>
       <p>Bla bla bla....</p>
    </div>

    <a href="#acc2">Accordion 2</a>
    <a name="acc2"></a>
    <div>
        <h1>Content #2</h1>
       <p>Bla bla bla....</p>
    </div>

    <a href="#acc3">Accordion 3</a>
    <a name="acc3"></a>
    <div>
        <h1>Content #3</h1>
       <p>Bla bla bla....</p>
    </div>

</div>

Si ottiene un semplice menu Accordion che può essere utilizzato in modo estremamente rapido.

Continua...

Unobtrusive Simple TabStrip

USimpleTabStrip è un Unobtrusive Javascript in grado di migliorare i classici link anchor (ancora) all’interno di una pagina HTML. Questo sorgente è un miglioramento della funzione presentata in Unobtrusive Tabstrip. In questa versione oltre ad allineare il codice alle release 1.6 di prototype.js è stata creata una vera e propria classe per gestire i TabStrip. La release qui presentata è molto semplice e lineare. Il suo principale lavoro risiede nell’aggiungere un evento click ai normali link anchor. Non sono inoltre presentati stili CSS, proprio per lasciare la massima libertà d’azione; tuttavia è possibile ottenere un efficace TabStrip con poche righe di codice CSS aggiuntivo; vedi Aggiungere degli stili CSS più sotto.

Codice HTML

La classe USimpleTabStrip lavora su un HTML molto semplice, sftuttando gli anchor (&lt;a name&gt;&lt;/a&gt;):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!-- Semplice lista di link all'interno della pagina -->
<ul>
    <li><a href="#tbs1">Link 1</a></li>
    <li><a href="#tbs2">Link 2</a></li>
    <li><a href="#tbs3">Link 3</a></li>
</ul>

<!-- Blocchi/tabs -->

<a name="tbs1"></a>
    <div>
        <h1>Scheda #1</h1>
        <p>Bla bla bla....</p>
    </div>

<a name="tbs2"></a>
    <div>
        <h1>Scheda #2</h1>
        <p>Bla bla bla....</p>
    </div>

<a name="tbs3"></a>
    <div>
        <h1>Scheda #3</h1>
        <p>Bla bla bla....</p>
    </div>

Il tag div subito sotto l’anchor a funziona da contenitore.

Continua...

Considerazioni sull’evoluzione dei linguaggi di svilluppo: AS2 vs AS3

Leggendo l’articolo di Julius ActionScript 2 o ActionScript 3? Facciamo chiarezza! vorrei fare alcune considerazioni sull’evoluzione "inversa" di alcuni strumenti di sviluppo per chi, come me, viene dalla programmazione C/C++.

Continua...

Shadowbox 2.0: la release candidate 1

shadowbox È stata rilasciata la release candidate 1 (rc1) della versione 2.0 della libreria Javascript Shadowbox, di Michael J. I. Jackson, utilissima per aprire finestre dedicate alla visualizzazioni di vari tipi di media, da Flash a QuickTime a pagine HTML. In questa nuova versione troviamo:

  • Il sito è più ricco di informazioni e include ora un wizard (sullo stile di mootools) per creare "al volo" un pacchetto della libreria personalizzato alle nostre esigenze
  • Possibilità di usare un modulo standalone base, senza includere necessariamente – gli adattatori per le – librerie esterne come prototype.js, jQuery, etc…
  • Miglioramenti alla gestione e realizzazione delle Skin
  • Localizzazione

La libreria è disponibile anche su SVN all’indirizzo:

http://michaeljackson.googlecode.com/svn/trunk/shadowbox

Continua...

Flash e Papervision3D in Javascript

Edward Smith ha sviluppato un wrapper in grado di sfruttare le API Flash e Papervision3D in Javascript! La libreria, AS3Wrapper, è compatibile con FireFox e con IE. Con Safari per Windows funziona mentre ho riscontrato problemi con Opera 9, sempre per Windows. Il meccanismo che sta alla base di questo progetto, e che rende possibile questa “magia”, è quello di includere nella nostra pagina HTML un contenitore Flash (AS3Wrapper.swf) che accetta comandi Javascript (AS3Wrapper.js), permettendo in pratica di costruire oggetti Flash direttamente da Javascript.

Continua...

Ottimizzare il caricamento di un sito Web

Grazie ai suggerimenti e ai consigli di Davide Salerno ho cercato di ottimizzare il caricamento di undolog.com, attività che, per questioni di "tempo", avevo sempre rimandato. In realtà non sono riuscito ad applicare tutte le preziose dritte di Davide, tuttavia sono riuscito a dare una bella "ripulita" e ridurre comunque i tempi di caricamento!

Riduzione dei Widget, Badget e Antipixel

La prima operazione che ho fatto è stata quella di ridurre il più possibile il carico prodotto dai vari Widget inseriti nel blog:

  • ho diminuito le righe visualizzate nel Widget di MyBlogLog: da 10 a 5 righe
  • ho eliminato gli antipixel dal BlogRoll
  • la biblioteca di aNoobi mostra 2 libri invece che 5

Continua...

Google AJAX API Language e Prototype.js

Dopo aver visto il funzionamento delle Google AJAX API mi è venuto in mente un modo alternativo per tradurre realtime le nostre pagine Web. Sfruttando prototype.js è possibile marcare i TAG HTML che desideriamo tradurre, invece di sottoporre l’intero documento alla traduzione. Per marcare i TAG HTML da tradurre ho usato l’attributo rel, impostandolo a translate:

1
<p rel="translate">Questo testo deve essere tradotto</p>

Con una semplice funzione, poi, possiamo sfruttare prototype.js per elaborare tutti i  TAG HTML con rel='translate':

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
 * @name         : translate()
 * @description  : translate  
 */
function translate() {
    $$('[rel="translate"]').each(
        function(e) {
            google.language.translate(e.innerHTML, 'it', 'en',
                function(result) {
                    if (result.translation) {
                        e.innerHTML = result.translation;
                    } else {
                        alert( 'Translate Error!\n\n' + result.error.message );
                    }
                }
            );                                          
        }
    );
}

Potete vedere questa funzione in azione su e-lementi.com

Ovviamente lo script può (e/o deve) essere perfezionato a seconda dei casi. È interessante notare, tuttavia, che è possibile specializzarlo in modo tale da sostituire delle immagini (nel caso di bottoni in grafica che contengono testo) o fargli elaborare TAG particolari come INPUT o TEXTAREA.

Uno dei limiti che ho riscontrato, e che vorrei approfondire, riguarda il numero di caratteri che possono essere tradotti. In caso di testi importanti, infatti, non è difficile ottenere un errore: che infatti ho gestito nello script con un alert().

Continua...

Google AJAX Language API: tutorial sul funzionamento

Rispondo, con questo post, alla richiesta di Andrea su come inserire il traduttore di Google nel proprio web. Esistono vari modi per usufruire dei servizi di traduzione automatica messi a disposizione da Google e non solo. Possiamo usare Plugin scritti da terzi, un semplice script Javascript preconfezionato da Google stessa o imparare ad usare le API, cioè una serie di funzioni richiamabili – come vedremo – in vari modi.

Plugin

Su questa soluzione non mi dilungo, in quanto credo non sia propriamente attinente alla richiesta di Andrea, se ho compreso bene. Inoltre è una soluzione sostanzialemente valida solo per i Blog e non per un uso personalizzato e generico. Posso solo segnalare, per gli utenti WordPress, Global Translator, forse il più semplice, funzionale e diffuso Plugin di questo tipo.

Script preconfezionato da Google

Il modo più semplice per tradurre il proprio sito web o il proprio Blog è quello di inserire un semplice script Javascript fornito da Google stessa. Basta andare sul sito translate.google.com e cliccare sulla scheda ‘Strumenti‘. Da questa pagina è possibile preimpostare le funzioni di traduzione o lasciare quelle di default. Lo script è molto semplice:

1
<script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&amp;up_source_language=it&amp;w=160&amp;h=60&amp;title=&amp;border=&amp;output=js"></script>

e come risultato si ottiene:

Google Translate

Continua...

HTML dinamico con Prototype: stili e script

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:

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

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

Continua...

Argomenti variabili e di default in Javascript, Actionscript e PHP

Chi sviluppa sa bene che una delle caratteristiche delle funzioni (function () ) è quella di avere o meno degli argomenti di input. Può capitare, a volte, di dover scrivere una funzione che, in base ai parametri di input, si comporta in modo differente (in programmazione OO troviamo questo comportamento indicato come poliformismo). I parametri variabili (varargs), introdotti già all’epoca del C e presenti di default nella classica dichiarazione del main:

1
int main(int argc, char *argv[]);

Continua...



Stop SOPA