Freccia di scroll up 
Autore: Francesco Della TorreL'argomento in oggetto è stato già trattato in altri post e da altre parti, come ad esempio:
- http://answers.websitex5.com/post/83075
- http://www.unofficialwsx5.com/index.php?topic=834.msg5911#msg5911
Chiedo quindi scusa se torno su questa questione: non sono un webdesigner professionista, di lavoro faccio tutt'altro e, proprio per questo motivo, mi trovo benissimo con Website X5 (ho la versione Evolution 10).
Un anno fa ho creato e pubblicato il mio sito, www.bottegaenergia.com. Pochi giorni fa ne ho fatto una ristrutturazione approfondita ed ora vorrei inserire una freccia che segua i navigatori mentre "scrollano" la pagina verso il basso e permetta loro, cliccandovi sopra, di tornare all'inizio della pagina. Credo si chiami "scroll up", come da titolo del post.
Per intenderci, la vorrei come quella che c'è in questo sito: http://www.guidealpine.it/un-po-di-storia.html
Il mio problema è che, non essendo per nulla esperto, non riesco a capire quanto indicato nei due post che ho elencato sopra e negli altri simili che ho trovato nel web. Immagino mi manchino proprio delle nozioni di base...
Mettiamola così: ho un sito con tre differenti tipi di pagine. La home page (tipo A), le pagine corte, cioè che stanno tutte su una videata (diciamo così, anche se naturalmente, dipende dal PC in uso; tipo B) e le pagine lunghe (tipo C). Io vorrei inserire la freccia di scroll up in tutte le pagine dove serve (quindi solo le C).
Esiste un modo per farlo? Magari inserendo la freccia in un solo punto del sito (evitando cioè di doverla inserire manualmente in tutet le pagine)?
C'è qualcuno di voi che ha la pazienza di rispondermi elencandomi uno ad uno i passi da fare?
Scusate, mi sembra di chiedere uno di quei consigli "for dummies" dei libretti informatici che andavano di moda anni fa...ma senza il vostro aiuto non riuscirò a fare questa importantissima modifica...
Grazie a chiunque avrà la pazienza di rispondermi 
. Se poteste anche indicarmi come cambiare il colore della freccia, sarebbe ottimo (quella del sito che ho portato sopra come esempio è ok come forma, ma non come colore per il mio sito).
guarda questo esempio:
http://lab.mattvarone.com/projects/jquery/totop/
se lo metti al passo 1, automaticamente appare quando le pagine sono lunghe, altrimenti resta nascosto...
qui il codice....
http://mattvarone.com/web-design/uitotop-jquery-plugin/
...senza nulla togliere alla validità dei suggerimenti relativi a codici esterni, tu puoi avere la stessa funzione utilizzando il sistema delle ancore interne;
.in "creazione pagine" assegna un'ancora alla pagina chiamandola come vuoi; (nel menù di dialogo troverai un'ancora, cliccaci sopra ed attivala)
.apri la pagina con il suo contenuto, e, solo per un effetto estetico, inserisci delle miniature che svolgano la funzione di collegamento; (puoi posizionarle dove vuoi con i comandi del menù)
.seleziona l'immagine, poi clicca sul simbolo dei collegamenti ipertestuali;
.nella finestra di dialogo scegli pagina del sito, poi "ancora interna".
ripeti l'operazione di assegnazione del link per ogni immagine o simbolo che vorrai attivare, e questo è tutto.
secondo la lunghezza del contenuto della pagina ne potrai inserire quanti ne vuoi.
ciao, spero di essere stato utile.
Autore
Grazie a Gabriele P. per l'osservazione. Devo però, a mia volta, sottolineare che la soluzione da lui proposta è esattamente quella che ho usato finora (vedere il mio sito, ancora on-line in questa versione). Solo che io vorrei eliminare l'effetto "sito anni '90" dato dall'inserimento di tante freccie in più punti delle pagine, ciascuna che rimanda - mediante ancora interna - ad inizio pagina.
Grazie a Mirko per le indicazioni, i link che hai indicato mi erano sfuggiti. In ogni caso, hai capito perfettamente quello che vorrei fare
Ora, però,...sono punto e a capo e vi spiego perchè.
Allora: dal sito http://lab.mattvarone.com scarico i file necessari, che sono:
Adesso cosa devo fare? Facciamo così. provo a dare io la procedura, così potete gentilmente correggerla:
Fin qui dovrei aver fatto giusto. Il codice che ho inserito è questo, vi chiederei innanzitutto di verificare che sia corretto:
<!-- easing plugin ( optional ) -->
<script src="js/easing.js" type="text/javascript"></script>
<!-- UItoTop plugin -->
<script src="js/jquery.ui.totop.js" type="text/javascript"></script>
<!-- Starting the plugin -->
<script type="text/javascript">
$(document).ready(function() {
/*
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
Ora mi serve sapere: dove e come inserisco i file che ho scaricato (e che ho riassunto più sopra)? Devo aggiungerli manualmente in qualche directory? Sul mio PC? Sul server?
E poi: come faccio a dire ad EVO dove si trovano questi file?
Scusatemi, come vedete forse faccio domande "banali": il motivo è quello che ho anticipato nel mio messaggio iniziale, ossia la mia assoluta inesperienza.
Magari procediamo per gradi: vediamo se la procedura è fin qui giusta, se il codice HTML è corretto e rispondiamo alle mie ultime domande. Poi andiamo avanti.
Avrei come obiettivo il pubblicare la procedura completa allorquando il tutto funzionerà, di modo da chiudere come "risolto" questo post.
Grazie di nuovo a chiunque risponderà (e, in particolare, al bravissimo Mirko!)
Mi riquoto da qui:
http://www.unofficialwsx5.com/index.php?topic=834.msg11695#msg11695
E non saprei trovare altre parole per dire la stessa cosa. Con questa modalità i files vengono allegati al progetto e diventano fruibili sia in anteprima che una volta esportati sul server, perché è il programma stesso che li esporta.
Manca anche il file .css in head. Se rileggi il post trovi il codice opportuno.
Ti sarei anche grata se mi fai sapere che cosa di quello che ho scritto in quel post è poco chiaro.
ciao Francesco,
allora questi file :
li metti nella cartella chiamata "js"
questo file:
nella cartella "pcss"
ed infine quest'altro
nella cartella immagini.
per quanto riguarda come dire a evo dove stanno i files e semplice se leggi il codice che hai postato
<script src="js/easing.js" type="text/javascript"></script>
!-- UItoTop plugin -->
<script src="js/jquery.ui.totop.js" type="text/javascript"></script>
<!-- Starting the plugin -->
<script type="text/javascript">
come vedi lo script indica già lui dove si trovano i files
esempio
se analizziamo la stringa ti accorgi che il comando per segnalare al sito dove si trova il determinato file e già compreso nello script.
<script src="js/jquery.ui.totop.js" type="text/javascript"></script>
ciao
Autore
Grazie a tutti per le risposte
Per stesil: il tuo post è scritto in modo molto chiaro. Per favore, non prendertela: il problema non è la tua chiarezza e correttezza di esposizione, semmai sono le mie difficoltà a capire (probabilmente cose banali e scontate...). Come già scritto, il mio primo obiettivo è inserire il scroll to up nel mio sito, il secondo è chiudere questo post come "risolto", riportando una procedura "per dummies" che, con il vostro aiuto, vorrei mettere a punto.
Per Salvo petrenga: grazie mille per le spiegazioni, ora qualcosa è molto più chiaro.
Allora, provo a riportare una prima bozza della procedura, che vi chiederei gentilmente di verificare punto a punto. Più sotto riporto gli attuali problemi che riscontro.
------------------------------------------------------------------------------------
Scroll to top: procedura per l’inserimento in Website X5
Questa è la procedura per inserire una freccia ("scroll to up") a lato delle pagine, che compare soltanto se si scrolla la pagina oltre ad una videata e permette, cliccandoci sopra, di essere rimandati direttamente all’inizio della pagina. Qui un esempio: http://www.gdrtestdesign.altervista.org/UItoTop/
1) Scaricare i file necessari dal link https://github.com/sksmatt/UItoTop-jQuery-Plugin/zipball/master (è una cartella zippata)
2) Aprire la directory su PC locale dove EVO salva il progetto (nel mio caso, ad esempio, è C:\Documents and Settings\Administrator\Documenti\Incomedia\WebSite X5 v10 - Evolution\La Bottega dell'Energia\Preview)
3) I file scaricati al punto 1) vanno inseriti nelle cartelle indicate qui sotto; se qualcuna delle cartelle non esiste, crearla manualmente:
4) Aprire il progetto in EVO
5) Al passo 1, scegliere "Impostazioni generali" ed andare nella sezione "Esperto"
6) Inserire il seguente codice HTML nella sezione "Prima della chiusura del tag HEAD”:
<link rel="stylesheet" media="screen,projection" href="css/ui.totop.css" />
7) Inserire il seguente codice HTML nella sezione "Prima della chiusura del tag BODY”:
<!-- easing plugin ( optional ) -->
<script src="js/easing.js" type="text/javascript"></script>
<!-- UItoTop plugin -->
<script src="js/jquery.ui.totop.js" type="text/javascript"></script>
<!-- Starting the plugin -->
<script type="text/javascript">
$(document).ready(function() {
/*
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
8) Inserire un oggetto HTML in una pagina qualsiasi
9) Aprire la sezione “Esperto” dell’oggetto HTML inserito
10) Attraverso il comando “Inserisci…” inserire i file scaricati al punto 1). Per ciascuno di essi bisogna indicare:
nel campo “File collegato da pubblicare sul server": il file, scegliendo il corretto percorso, ossia la cartella fra quelle create al passo 3
nel campo “Percorso relativo sul server”: scrivere il nome della cartella stessa (attenzione: solo il nome della directory di cui al punto 3, non il percorso completo)
11) Selezionare OK e salvare
------------------------------------------------------------------------------------
A questo punto dovrebbe funzionare tutto. Purtroppo a me no...ecco cosa mi è successo:
Ho seguito la procedura una prima volta, per filo e per segno. Terminato il punto 11), faccio anteprima: non funziona nulla. Ho anche provato a pubblicare il sito, con lo stesso risultato (se ora andate a vederlo, ho ripristinato la vecchia versione).
Allora ho cancellato tutte le modifiche ed ho riprovato a seguire da capo la procedura (lo so, è infantile...). Peggio ancora: adesso, dopo aver inserito i file nell'oggetto HTNL, mi compare il messaggio “Questo percorso è già utilizzato da un altro file di questo Progetto. È necessario specificare un nome di file o una cartella di destinazione diverso”. Finché non elimino tutti i file (con il comando "Rimuovi") non posso dare OK ed uscire dalla sezione "Esperto" dell'oggetto HTML...
Rimangono aperte due questioni:
ed in più vi chiederei:
Scusate, vedo che le miei risposte si fanno molto lunghe ed articolate...sto solo cercando di essere il più preciso possibile.
Grazie per la vostra infinita pazienza
No!
stesil ha scritto due righe che sono ampiamente sufficienti anche per "dummies", basta leggere con attenzione, conoscere il programma e vedrai che funzionerà pure a te.
Perché li metti nella cartella Preview?
Chi te l'ha detto?
Dove l'hai trovato scritto?
Autore
Ok, come volevasi dimostrare non ho capito nulla. Ho tentato di interpretare quanto letto (ecco da dove arriva il riferimento a preview).
lemonsong, grazie per aver risposto. A questo punto ti chiedo: dove metto i file, dpo che li hio scaricati? In altre parole, quando devo caricarli nell'oggetto html, da dove li carico? Il vero problema, alla fine di tutto, immagino che per me fosse questo.
Il post di stesil è chiaro, questo l'ho capito e l'ho già scritto, ringraziandola. Lei scrive:
"Quattro sono i file da allegare (attraverso la scheda esperto di un qualsiasi oggetto HTML del progetto): easing.js e jquery.ui.totop.js nella cartella js, ui.totop.css nella cartella css, ui.totop.png nella cartella img."
Il punto sul quale sbaglio è certamente questo. L'iserimento dei due codici html è chiaro, immagino di non aver sbagliato.
E' del tutto evidente che delle due cose che hai indicato tu è probaile che io non conosca a sufficienza il programma, che dici? Puoi darmi una mano?
Grazie.
Se posti un link con la tua prova, forse ne veniamo a capo.
L'uso della cartella Preview è sconsigliata, puoi allegarli da qualsiasi posizione presente nel tuo HD.
Sarebbe però preferibile riunire tutte le risorse del sito in una cartella (anche per praticità).
Autore
Grazie, lemonsong, per non aver ancora desistito nell'aiutarmi.
Fra l'altro, grazie al tuo "sprone" amichevole di due post fa, mi sono detto: <<qui mi sa che mi sfugge qualcosa che sta invece davanti agli occhi di tutti...>> e mi sono sentito ancora più "impedito" di quanto pensavo. E, proprio grazie a questo, forse ho almeno capito dove sbagliavo.
Allora: ripartendo dal post di stesil (http://www.unofficialwsx5.com/index.php?topic=834.msg11695#msg11695) ho rifatto tutto. Per non incappare in errori, ho eliminato il progetto e sono ripartito da un backup fatto prima di iniziare queste prove.
Credo che il mio errore stava nel cercare di mettere i file nelle cartelle che mi avete detto, volendo prima creare queste cartelle. Invece (e qui si vede bene la mia inesperienza, anche - purtroppo - con evo) ho capito che bastava caricare i file (ovunque si trovassero) e, nel campo "Percorso relativo sul Server", scrivere il nome della cartella (jss, ecc.). Ed infatti, così facendo, ora non c'è alcun errore ed i file risultano caricati.
Per scrupolo - e questa volta solo per questo! - sono andato nella directory del progetto ed ho potuto verificare che evo ha automaticamente e correttamente messo i file nelle giuste cartelle. Fin qui tutto bene dunque!
Poi ho pubblicato il sito aggiornato. La pagina dove ho inserito il codice HTML è qui: http://www.bottegaenergia.com/credits.html
Come puoi vedere tu stesso...non funziona nulla. Neppure in anteprima (che ho provato prima di pubblicare).
Quindi...tre domande:
Grazie per il suggerimento riguardante l'ordine da mantenere con tutte le risorse per il sito sul mio HD: è una delle prime cose che ho fatto fin dalle prime volte che ho utilizzato evo (circa un anno fa), proprio per non creare confusione
.
Francesco io non me la sono presa affatto. La mia richiesta era una domanda vera.
1. Questi sono gli errori nel tuo progetto:
il file ui.totop.css è da allegare nella cartella css, mentre tu lo hai allegato nella cartella pcss.
l'immagine ui.totop.png è da allegare nella cartella img, non nella cartella images come hai fatto tu.
Oppure cambi i percorsi nei relativi files, ma forse è più complesso. (Nel post sull'unofficial c'è anche uno screenshot).
2. Basta un solo oggetto html per tutto il progetto.
3. No, non è da spuntare. Spuntando quella voce il programma inserisce automaticamente nell'head della pagina il codice relativo al file che stai allegando, ma solo in quella pagina. Tu hai bisogno di averlo in tutte le pagine e lo hai ottenuto scrivendo a mano il codice nella sezione esperto.
Autore
Ciao stesil, sono felice che tu non te la sia presa. Peraltro ho anche letto un altro tuo post dove spieghi come cambiare la velocità di scroll: http://answers.websitex5.com/post/83075...l'ho già applicato e funziona a meraviglia!
Ma procediamo con ordine, così poi chiudiamo il post.
Grazie per la segnalazione degli errori. Posso solo dire che ho sbagliato la cartella "css" perchè ho seguito quanto scritto da Salvo petrenga giusto ieri (immagino sia stato un errore di battitutura da parte sua...ma comunque colpa mia: bastava che leggessi di nuovo e più attentamente il famoso post di stesil). Per la cartella immagini...errore mio, ovviamente.
Grazie per la spiegazione di cui al punto 3, ora ho capito.
Se andate sul mio sito, che ho appena ripubblicato, vedrete che funziona tutto. Al momento sono ancora presenti le bruttissime frecce verdi "top", stile "anni '90"; in giornata le elimino ed aggiorno il sito.
Vorrei ringraziare di cuore tutti, in special modo stesil e lemonsong, per le risposte e per avermi sopportato (avete una pazienza invidiabile...). Proporrei di chiudere il post come "risolto", magari aspettando un paio di giorni nel caso qualcuno volesse aggiungere altro.
Nel frattempo riporto qui sotto la procedura completa, come promesso inizialmente.
Grazie ancora e buona giornata a tutti!
------------------------------------------------------------------------------------
Scroll to up: procedura per l’inserimento in Website X5
Questa è la procedura per inserire una freccia (“scroll to up”) a lato delle pagine, che compare soltanto se si scrolla la pagina oltre ad una videata e permette, cliccandoci sopra, di essere rimandati direttamente all’inizio della pagina. Qui un esempio: http://www.gdrtestdesign.altervista.org/UItoTop/
1) Scaricare i file necessari dal link https://github.com/sksmatt/UItoTop-jQuery-Plugin/zipball/master (è una cartella zippata)
2) Aprire il progetto in EVO
3) Al passo 1, scegliere "Impostazioni generali" ed andare nella sezione "Esperto"
4) Inserire il seguente codice HTML nella sezione "Prima della chiusura del tag HEAD”:
<link rel="stylesheet" media="screen,projection" href="css/ui.totop.css" />
5) Inserire il seguente codice HTML nella sezione "Prima della chiusura del tag BODY”:
<!-- easing plugin ( optional ) -->
<script src="js/easing.js" type="text/javascript"></script>
<!-- UItoTop plugin -->
<script src="js/jquery.ui.totop.js" type="text/javascript"></script>
<!-- Starting the plugin -->
<script type="text/javascript">
$(document).ready(function() {
/*
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
6) Inserire un oggetto HTML in una pagina qualsiasi
7) Aprire la sezione “Esperto” dell’oggetto HTML inserito
8) Attraverso il comando “Inserisci…” inserire i file scaricati al punto 1). Per ciascuno di essi bisogna indicare:
- Nel campo “File collegato da pubblicare sul server": il file, scegliendo fra quelli scaricatial passo 1)
- Nel campo “Percorso relativo sul server”: scrivere il nome della cartella, seguendo questo elenco:
- Lasciare la voce “Collega il file alla Pagina (solo per file .js e.css)” NON spuntata
9) Selezionare OK e salvare
Maggiori dettagli nel post di stesil: http://www.unofficialwsx5.com/index.php?topic=834.msg11695#msg11695
Volendo cambiare la velocità di scroll: http://answers.websitex5.com/post/83075
------------------------------------------------------------------------------------