Pagina aggiornata... Sabato, 09 settembre 2023 * Tempo di caricamento 0.40 secondi
Link navigazione : Home telaioHome ~ Tutorial ~ Script_gadget » Box scroller

..:: Box scroller ::..

Uno degli script più geniali di quei geniacci di Dynamic Drive



Il codice di questi scroller è composto da, due div associati che contengono
il testo che viene scritto, una table in cui vanno inseriti le scrittine, testo o immagini
per lo scroll e un piccolo script che fa' funzionare il meccanismo

Si posta tutto insieme, nel punto in cui si vuole visualizzare, quindi sotto il tag <body>

<div style="position:relative; border:0px; width:200px; height:70px; overflow:hidden; margin-left: auto; margin-right:auto">
<div id="container" style="position:absolute; width:200px; left:0; top:0">

Scrivi il tuo testo qui

</div></div>

<table style="margin-left: auto; margin-right: auto" border="0" cellpadding="0" cellspacing="0" width="200px">
<tr>
<td>&nbsp;</td>
<td width="34"><a href="#" onMouseover="move('container',-5)" onMouseout="clearTimeout(move.to)">Up</a></td>
<td width="34"><a href="#" onMouseover="move('container',5)" onMouseout="clearTimeout(move.to)">Down</a></td>
</tr>
</table>

* Questa parte di codice è lo script non si deve modificare

<script type="text/javascript">
// Spiegato da https://www.iltelaiodipenelope.it/tutorial/index.php
/******************************************
* Scrollable content script II- © Dynamic Drive (www.dynamicdrive.com)
* Visit http://www.dynamicdrive.com/ for full source code
* This notice must stay intact for use
******************************************/
// modified 17-October-2011

function move(id,spd){
var obj=document.getElementById(id),max=-obj.offsetHeight+obj.parentNode.offsetHeight,top=parseInt(obj.style.top);
if ((spd>0&&top<=0)||(spd<0&&top>=max)){
obj.style.top=top+spd+"px";
move.to=setTimeout(function(){ move(id,spd); },20);
}
else {
obj.style.top=(spd>0?0:max)+"px";
}
}
</script>



Vediamo come personalizzare lo scroller

In base al tipo di box che vogliamo realizzare le prime personalizzazioni le andremo
ad effettuare nei div che conterranno il testo e che determinano anche le misure dello spazio
in cui scrivere oltre che lo style del font che si vuole utilizzare, tipo, colore e misura

Quindi al codice base del primo div andremo ad aggiungere tutti i parametri che
ci occorrono, sistemiamo le misure width:200px; height:70px;, se ci serve rediamo
il bordo visibile border:0px;, un colore o immagine per lo sfondo e i parametri per il font

<div style="position:relative; border:5px solid #ab5316; background-color: #fbf3df; text-align:center; font-family:Tahoma; font-size:12px; color:#ab5316; width:300px; height:70px; overflow:hidden; margin-left: auto; margin-right:auto">

- Con questi parametri avremo un contenitore così:


Testo


- Nel secondo div dovremmo solo sistemare la misura della larghezza width:200px;

Ora in base alla misura data in larghezza width:***px; al contenitore del testo,
andremo a personalizzare la table per le scrittine, testo o immagini dei tasti scroll, up e down,
quindi alla table daremo la stessa misura in larghezza del div, se preparate delle immagini cercate
di farle con le stesse misure per width e height affinché risultino armoniose

- La table è composta da una riga e tre celle, nelle ultime due sistemeremo i tasti per lo scroll
e in base alla misura in larghezza che occupano daremo la misura alla prima cella che rimarrà vuota



- I tasti dello scroll sono dei link quindi se li inseriamo con il testo avranno
lo style degli altri link scritti nella pagina, altrimenti è possibile personalizzare
lo style in linea per averli abbinati al resto del box

<table style="margin-left: auto; margin-right: auto" border="0" cellpadding="0" cellspacing="0" width="300px">
<tr>
<td>&nbsp;</td>
<td width="34"><a style="text-decoration: none; font-family:Tahoma; font-size:12px; color:#ab5316" href="#" onMouseover="move('container',-5)" onMouseout="clearTimeout(move.to)">Up</a></td>
<td width="34"><a style="text-decoration: none; font-family:Tahoma; font-size:12px; color:#ab5316" href="#" onMouseover="move('container',5)" onMouseout="clearTimeout(move.to)">Down</a></td>
</tr>
</table>

Ed ecco un esempio live con le personalizzazioni che vi ho mostrato



Lasciamo intatto lo script, ultima parte del codice e proviamo l'effetto
Nel box si può scrivere quanto si vuole, inserire dei link e immagini, occorre solo
un po' di pazienza con le misure, se si preferisce inserire in una tag grafica

N.B.: In una pagina si può inserire un solo scroller, qui li visualizzi grazie a degli iframe

# Prelevate qui il codice



Se volete realizzare dei gadget/accessori da far prelevare vi serviranno anche:
-> Iframe -> Textarea -> Pagina anteprima gadget

Spero di essere stata chiara in tutti i passaggi ^_^
Vi auguro buon lavoro ma sopratutto buon divertimento!
Ciao alla prossima^^ Penelope ♥


ೡ Dai un giudizio a questa guida... Grazie ^_^



93%
Voti totali: 3
Rating... 4.67




Commentario...

Scrivi qui per lasciare un saluto, una richiesta di aiuto,
un suggerimento o una critica ^_^

Nickname
Home page
B i U   ^_^ o_O O_O *_* Gif...

  


- Pagina visitata da 3452 utenti


 H: 
Buon Autunno !





* Info sezione...

Mi farebbe molto piacere la condivisione
dei miei tutorial ma vi sarei anche molto grata
se evitaste di fare copia e incolla su altri spazi
del mio lavoro, linkate le pagine, avvisatemi
ricambierò senza problemi. Grazie ♥

..:: Basi ::..



..:: html ::..








..:: Script page ::..




..:: Script gadget ::..




Accessori e gadget del telaio...


..: Spazio web...


Realizzare e gestire un sito web
con l'hosting free più famoso...



Gif  & co... Penelope ♥


Pagina Facebook
del telaio...




 

I vostri messaggi...

Penelope
02/10/2023 17:01:02
Grazie infinite cara Grazia, mi dispiace molto vedere spazi trascurati quando poi basta avere un po' di pazienza per sistemare ti ringrazio anche per aver aggiunto informazioni molto utili
Un abbraccio forte ♥
ೡ ...commentario
 
Grazia
01/10/2023 17:51:03
Ciao Penny, buona domenica! Hai fatto benissimo a scrivere questa guida sull'HTTPS, con Altervista hanno fatto le cose per bene, anche se si installa uno spazio web "classico", come hai scritto tu, e persino se si installa WordPress è tutto automatico, con un click nel pannello di controllo, ma non tutti lo sanno, era giusto farlo presente! Wordpress (che io adoro perchè è veramente versatile) dal canto suo, offre un'infinità di plugin per attivare l'https, il fatto è che bisogna essere molto, molto attenti, altrimenti il sito praticamente si "rompe" *-* Per fortuna quasi tutte le piattaforme si sono adeguate, tranne la bellissima Eklablog, non comprendo il perchè. Ok, perdona lo "sproloquio", un abbraccio ed alla prossima!!
ೡ Scritto in... Il telaio di Penelope...
 
Penelope
27/09/2023 17:12:31
Ciao Calcifer grazie infinite anche io sono felice di essere tornata
ೡ Scritto in... 'https' Hyper Text Transfer Protocol Secure
 
Calcifer
27/09/2023 15:08:42
AAh, che bello vederti di nuovo attiva! :) Aspettavo da anni il tuo ritorno ♥
ೡ Scritto in... 'https' Hyper Text Transfer Protocol Secure
 
Cleo
25/09/2023 17:58:11
ho fatto un giretto e' tutto ancora piu' bello un abbraccio e grazie per il banner inserito un abbraccio
ೡ Scritto in... *Amici del telaio...*
 
Gabriella
25/09/2023 12:21:45
Bentornata Penelope , ho prelevato un tuo bellissimo bottone. Grazie di cuore !
ೡ Scritto in... Bottoni top pagina
 
Grazia
24/09/2023 19:16:50
Ciao Penny cara, nel messaggio precedente ho omesso di scrivere quella che sembra una ovvietà, ma la scrivo lo stesso: il tuo sito è fantastico, come sempre, la maestra dei codici è tornata 😄😄😄😄 Un abbraccio e serena domenica sera di cuore ❤️
ೡ Scritto in... Il telaio di Penelope...
 
Grazia
21/09/2023 10:24:25
Carissima Penelope, è una gioia immensa leggerti di nuovo! Sono felicissima tu sia tornata online, hai fatto benissimo, gli hobby aiutano tantissimo a risollevare l'animo ...brava! Oltre al mio piccolo blogghino per esempio io mi sto dedicando ai disegni fatti a mano e mi rilassano tantissimo! Ti cerco su Fb così ci sentiamo, se ti fa piacere, più spesso...ti abbraccio immensamente cara amica, a presto!
ೡ ...commentario
 
Cleo
20/09/2023 16:39:32
Ciao tesoro i miei banner sono qui [Link]
ೡ Scritto in... Il telaio di Penelope...
 
Cleo
20/09/2023 12:48:48
Bentornata e' bellissimo rivedere il tuo Sito on line
ೡ ...commentario
 

Referer...