Campagna aggiornamento browser – parte seconda

Passiamo all'aspetto tecnico e vediamo come creare una campagna di aggiornamento browser che mostri un messaggio per tutti coloro che posseggono un browser come IE6 o inferiore e un pulsantino chiudi per nascondere la campagna.
Campagna aggiornamento browser – parte seconda

Jquery per la causa

Il famoso framework jquey farà il grosso del lavoro. Includiamolo tra i tag head nel nostro sito. Le due proprietà che ci interessano da estrapolare dal framework sono $.browser e $.browser.version che, se adoperate insieme possono essere utili per individuare il browser e la relativa versione che un utente sta utilizzando.

Il codice javascript

Con un semlice costrutto ‘if’ in javascript nella pagina di nostro interesse o direttamente tra i tag head, potremmo far comparire un messaggio oppure un qualsiasi altro contenuto solo per gli utilizzatori di un determinato browser. Cominciamo quindi con il creare un semplice div contenitore e associamogli un id=”old” e inseriamo per il momento al suo interno un paragrafo di testo, il tutto ovviamente all’interno del tag body della pagina.

<div id="old">
    Messaggio da Visualizzare
</div>

Implementiamo quindi il costrutto if che controlla il browser in uso e la relativa versione. Se queste informazioni combaciano con i parametri da noi impostati, verrà mostrata la porzione di codice. Salviamo la pagina appena creata e testiamo il tutto con una versione precedente alla 7 di internet explorer e con versioni successive.

$(document).ready(function(){
    $('#old').hide();
    if($.browser.msie &amp;&amp; $.browser.version &lt; 7) $('#old').fadeIn(1000);
});

Abbiamo creato in pochi semplici passi un messaggio visibile solo per alcuni utenti; Potrebbe essere utile implementare un pulsantino “chiudi” che sempre tramite jquery nasconda la campagna appena creata.

Aggiorniamo le precedenti porzioni di codici come segue:

<div id="old">
    <a id="close" href="#">Chiudi</a>
    Messaggio da Visualizzare
</div>
$(document).ready(function(){
    //di default il contenitore è invisibile
    $('#old').hide();
    // controllo il browser e la versione - se corrispondono compare
    // il contenitore in fadein
    if($.browser.msie &amp;&amp; $.browser.version &lt; 7) $('#old').fadeIn(1000);
    //implemento, tramite la sintassi di jquery, il codice che mi
    // consente di chiudere il contenitore in fade out
    $("#close").click(function(){
        $('#old').fadeOut(1000);
    });
});

Il più è fatto

Immagino le facce deluse di alcuni lettori che forse si sarebbero aspettati un maggiore approfondimento sull’aspetto visual della campagna, non temete, nel prossimo ed ultimo articolo ci dedicheremo totalmente alla formattazione visiva del contenitore appena creato. Posizionamento, contenuto, grafica, e strategie di attacco per creare la campagna di aggiornamento browser più adatta al target di utenti del vostro sito web.

Un ringraziamento particolare va all’amico e collega EmaWebDesign per la parte javascript dell’articolo.

  • Utilie come script per invogliare le persone ad aggironare il rpoprio browser 🙂

  • LaboratorioCSS

    speriamo funzioni tra coloro che possono, a breve pubblicheremo la terza parte, che conclude un po il discorso!!

Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github