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
- scarica il file e salvalo in una cartella sul tuo server, ad esempio sotto
scripts - decidi come si chiama il
divche 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) - associa nel tuo foglio di stile una forma grafica a questo
div, decidendo in particolare la posizione di partenza:#scrollingmenu{ top: 5px; left: 600px } - aggiungi il codice javascript alla tua pagina:
< script src="/scripts/scrolling_bar.js" >< /script>(al solito, togli gli spazi superflui) - modifica nel file javascript l’identificativo del
div, come indicato dalle istruzioni contenute all’interno - sei vuoi che il
divstia fermo se l’utente non scorre almeno “tot” (ad esempio 175) pixel, assegna questo valore alla variabilemyStickyPixelsall’interno dello script - prova il risultato caricando la pagina con il tuo browser preferito
Ciao, sto provando ad inserire nel mio sito il menù laterale… ottimo!
Dande, 05 dicembre 2007 alle 19:12 » rispondi
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?
Marco, 14 dicembre 2007 alle 12:12 » rispondi
grazie per il tempo speso per perfezionare la tua creazione.
In qualche modo ricambierò il favore!
Marco, 14 dicembre 2007 alle 22:35 » rispondi
Anche io uso wordpress come piattaforma ma sono davvero inesperto! Non potresti fare una guida più dettagliata? :[
Giovanni, 19 maggio 2008 alle 20:35 » rispondi
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!
Artemisia, 19 maggio 2008 alle 20:48 » rispondi
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.
camu, 19 maggio 2008 alle 21:11 » rispondi
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?
Gae, 14 settembre 2008 alle 12:29 » rispondi
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 ???
riccardo, 04 luglio 2009 alle 23:07 » rispondi
@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!
camu, 06 luglio 2009 alle 14:51 » rispondi
ciao io non ci sono riuscito !!!
non è che come Gae avresti uno zip funzionante da farmi studiare?
riccardo, 09 luglio 2009 alle 22:14 » rispondi
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?
simone, 15 dicembre 2009 alle 10:45 » rispondi