Pagina aggiornata... Sabato, 13 gennaio 2024 * Tempo di caricamento 0.91 secondi
Link navigazione : Home telaio ೡ Home ~ Tutorial ~ Script_gadget » Box scroller

..:: Box scroller ::..

Uno degli script più geniali di www.dynamicdrive.com



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 questo tutorial... Grazie ^_^
95%
Voti totali: 4
Rating... 5





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 4017 utenti


 H: 
Buona Primavera e ...buon weekend!





Segui il telaio su Facebook

Privacy Policy Cookie Policy

* 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
nell'hosting free più famoso...

Un sito su Altervista

Materiale grafico

Gif, mini gif, pixel, immagini, png...
Tutto il materiale grafico che ti serve,
raccolto e messo a tua disposizione!

Gif & co...




I vostri messaggi...

Grazia
09/03/2025 18:13:32
Ciao Penny, sono passata a lasciarti un salutino di buona domenica ed anche a ringraziarti per aver inserito il mio bannerino. Un abbraccio forte ed alla prossima :) Ciaooo
ೡ Scritto in... Home
 
Gabriella
07/03/2025 12:04:36
Ciao Penny, visto che usufruisco spesso delle tue lezioni di codici e html ho preso i tuoi banner ;) Grazie e un abbraccio
ೡ Scritto in... Banner link del telaio ^_^
 
Mamyr
06/03/2025 13:34:06
Ciao Penelope, grazie per questo tuo sito meraviglioso e molto utile, ho prelevatoL'almanacco in table -blu- per inserirlo nel mio blog. Inserirò anche il tuo banner, grazie ancora e buona giornata.
ೡ Scritto in... Almanacco in table
 
Pinalie
03/03/2025 01:38:03
Oh sweet Penelope .. im sorry you can make no comment yet on my pageim still working to make it fit to goi hope end summer it will be done, i hope whoo!i instalt a new clock from you.. love your clocks so much thank you so much again for your lovley giftmy derest greetings ♥♥♥
ೡ Scritto in... Orsetti...
 
Grazia
26/02/2025 09:43:32
Ciao carissima Penelope, come stai? E' da tanto che non ci sentiamo. Qui è sempre tutto meraviglioso! Sono passata a prelevare un tuo banner da inserire nel mio nuovo spazio web, alla fine sono riuscita ad inaugurare quel "famoso" sito statico in cui offro piccole utilità grafico/digitali agli utenti e l'ho chiamato Dreamland...mi ci è voluto un po' ma sono partita col progetto...dai che così magari ci sentiamo più spesso. Ancora complimenti, un abbraccio e sereno proseguimento di giornata ♥
ೡ Scritto in... Home
 
ೡPenelope ♥
18/02/2025 20:27:41
Dear Pinalie thank you so much, I couldn't leave a message in your space, a big hug ♥
ೡ Scritto in... Orsetti...
 
ೡPenelope ♥
18/02/2025 20:16:52
Cara Filo d'arianna ti ringrazio tanto, fammi sapere quando avrai un tuo spazio così da poter ricambiare, una abbraccio forte ♥
ೡ Scritto in... Banner link del telaio ^_^
 
Antonella
13/02/2025 01:00:16
ciao Penelope ho prelevato uno dei tuoi almanacchi e l'ho inserito nel mio blog.Complimenti per il tuo sito sempre ricco e interessante.[Link]
ೡ Scritto in... Almanacco soft
 
Vale
02/02/2025 06:15:22
carinissimi!!♥
ೡ Scritto in... Mini cursori
 
Pinalie
19/01/2025 22:47:05
Deer Penelope i love and instal your sweet little bear Date Time on my pageThank you so much for your work
ೡ Scritto in... Orsetti...