RSS Contattami

barra scorrevole laterale

L’analisi delle statistiche di accesso a questo blog è una delle attività che porto avanti regolarmente per migliorare il livello di soddisfazione di chi lo visita. Recentemente ho attivato una nuova funzionalità che mi consente di sapere anche quali parole vengono ricercate internamente, usando il campo presente in alto a destra nella colonna del menù di navigazione: nel rispetto più totale della riservatezza, il sistema mi dice che qualcuno, ad esempio, ha cercato “barra scorrevole laterale”, probabilmente tentando di trovare il modo per replicare sul proprio sito la barretta qui a fianco, che ti segue man mano che scorri la pagina.

Eccoti servito

Premesso che, avendo un po’ di confidenza con queste tecnologie, non è difficile spulciare nel mio codice e copiare la funzione che consente di far muovere la barretta, ho comunque colto l’occasione per pubblicare il codice relativo.

Come si utilizza

  1. scarica il file e salvalo in una cartella sul tuo server, ad esempio sotto scripts
  2. decidi come si chiama il div che intendi far muovere, assegnandogli un identificativo ben preciso, ad esempio < div id="scrollingmenu" > bla bla < /div> (togli gli spazi nei tag, io ho dovuto metterli per non far interpretare qui il relativo codice)
  3. associa nel tuo foglio di stile una forma grafica a questo div, decidendo in particolare la posizione di partenza: #scrollingmenu{ top: 5px; left: 600px }
  4. aggiungi il codice javascript alla tua pagina: < script src="/scripts/scrolling_bar.js" >< /script> (al solito, togli gli spazi superflui)
  5. modifica nel file javascript l’identificativo del div, come indicato dalle istruzioni contenute all’interno
  6. sei vuoi che il div stia fermo se l’utente non scorre almeno “tot” (ad esempio 175) pixel, assegna questo valore alla variabile myStickyPixels all’interno dello script
  7. prova il risultato caricando la pagina con il tuo browser preferito

[RSS] Commenti

  • Avatar di Dande

    Ciao, sto provando ad inserire nel mio sito il menù laterale… ottimo!

  • Avatar di Marco

    Ascolta, questa tua barra scorrevole è fantastica.

    Però posso chiederti di aiutarmi in una piccola modifica?
    O se conosci script che fanno quello che chiedo…
    In pratica vorrei che la barra scorresse, ma che arrivata alla parte alta del browser, si fissasse lì rimanendo sempre in cima, mentre quando poi arriva a destinazione… si fermasse dove io avevo indicato.
    Quindi… è possibile fare toccare al menù scorrevole la cima della pagina nel browser?

  • Avatar di Marco

    grazie per il tempo speso per perfezionare la tua creazione.
    In qualche modo ricambierò il favore!

  • Avatar di Giovanni

    Anche io uso wordpress come piattaforma ma sono davvero inesperto! Non potresti fare una guida più dettagliata? :[

  • Avatar di Artemisia

    Uhm, come al solito sei sempre chiaro nelle tue spiegazioni. Proverò ad applicarlo su Volti Rivolti (Splinder permettendo) e domani su Rapsodia che è in restyling. Grazie!

  • camu

    Artemisia, se hai dubbi sull’uso, chiedi pure. Tra l’altro questa versione dello script ha alcune caratteristiche interessanti, come la possibilità di decidere quando la barretta deve cominciare a scorrere (dopo quanto scrolling dalla cima della pagina) per creare un effetto “calamita” ancora più piacevole.

  • Avatar di Gae

    Mi daresti una mano venendo incontro alle mie limitate capacità mentali?
    Non riesco a farlo funzionare.
    Sò che chiedo troppo…. Avresti uno zip con un esempio che possa studiare?

  • Avatar di riccardo

    Sai che proprio non ho capito come si fa….
    1) dove devo mettere l’ttributo div ???
    2) nel fglio di stile come inserisco quell attributo ???
    3) dove inserisco il link al codice javascript nella mia pagina ???

  • camu

    @riccardo: l’attributo DIV si mette nel sorgente della pagina, non nel foglio di stile ;) Il link al codice javascript va messo in cima alla pagina, prima di chiudere il tag HEAD. Se vuoi contattami in privato e vedrò di aiutarti per il tuo caso specifico!

  • Avatar di riccardo

    ciao io non ci sono riuscito !!! :-(
    non è che come Gae avresti uno zip funzionante da farmi studiare?

  • Avatar di simone

    Ciao come prima cosa complimenti per il sito è strutturato veramente bene,

    Ascolta sto provando ad inserire il menu laterale su piattaforma wordpress, quindi non dovrei aver problemi visto che tu stesso la stai utilizzando.
    Io ho impostato il mio codice nel seguente modo:
    header.php

    function.js -> E’ il codice che hai passato te tramite questo articolo

    poi sempre nell’header.php ho inserito il

    Ma purtroppo la barra laterale non si muove…
    Cosa sbaglio?

  • Avatar di Andrea

    A me non funziona. Da un errore alla riga 204: isFront is not defined…
    Come posso risolvere

Modulo per l'invio di un commento

Lascia un commento

, oppure iscrivimi senza commentare.