Scrolling automatico

d3v1l

Scrolling automatico

Ciao a tutti
Raga sapreste indiscarmi coem fare dentro un div uno scrolling automatico verticale con queste funzioni:
1-parte quando clicco il pulsante ex. giu
2-si ferma con pulsante stop
3-un pulsante che torna a capo
4-qualcosa che quando lo fermo con una barra scrolling vado su e giu per il testo come se volessi leggere da un determminato punto

non mi serve in flash magare in javascript o qualcosaltro dato che devo cambiare il testo oppure usare gli stili css

alesandro

[HTML]<html>
<head>
<title>scroll</title>
<style type="text/css">
.container {
position: relative;
left: 0px;
width: 230px;
height: 280px;
border: px #ccc solid;
}
#scrolldiv {
position: relative;
left: 10px;
margin: px;
overflow: auto;
width: 230px;
height: 280px;
border: px #567 solid;
}
#scrolldiv__controls {
position: absolute;

                display:;
            }
            #imgup {
                position: relative;
                top: -199px; left: 219px; 
                z-index:1;
            }
            #imgdown {
                position: relative;
                top: -190px; left: 219px;    
            }
            p {
                margin-top: 0;
            }
    </style>
    <script type="text/javascript" >
    // <![CDATA[

var scrollDiv;
var hDiv;
var tClip;
var bClip;
var wClip;
var interval;
var topPos = 0;

function initScroller(id) {
scrollDiv = document.getElementById(id);
var margin = parseInt(scrollDiv.offsetTop);

var scrollDiv__controls = document.getElementById(id + '__controls');

/* Style per il div interno (testo) */
scrollDiv.style.width    = (scrollDiv.parentNode.offsetWidth - (margin * 2)) - 24 + 'px';
scrollDiv.style.height   = 'auto';
scrollDiv.style.overflow = 'hidden';

/* Style per il div esterno (contenitore) */
scrollDiv.parentNode.style.overflow = 'hidden';

/* Style per il div con i controlli (testo) */
scrollDiv__controls.style.display = 'block';  


/* Impostazioni per visualizzare la parte di testo superiore */
hDiv  = scrollDiv.offsetHeight;

tClip = 0;   
wClip = scrollDiv.parentNode.offsetWidth - (margin * 2);
bClip = scrollDiv.parentNode.offsetHeight - (margin * 2);

scrollDiv.style.clip = 'rect('+ tClip +'px,'+ wClip +'px,'+ bClip +'px,0)';   
// alert("tClip:"+tClip+"\nwClip:"+wClip+"\nbClip:"+bClip+"\n");

}

function scroll(scrollBy, time) {
tClip += scrollBy;
bClip += scrollBy;
topPos -= scrollBy;

if (tClip < 0 || bClip > hDiv) {
    tClip -= scrollBy;
    bClip -= scrollBy;
    topPos += scrollBy;    
}


scrollDiv.style.clip = 'rect('+ tClip +'px, '+ wClip +'px, '+ bClip +'px, 0)';   
scrollDiv.style.top = topPos + 'px';    
interval = setTimeout('scroll('+ scrollBy +', '+ time +')', time);

}

function stopScroll() {
if (interval) clearTimeout(interval);
}

// ]]>
</script>
</head>
<body onload="initScroller('scrolldiv')">
<table align="center">
<tr>
<td colspan="2" style="border:2px solid #00538f">
<table style="width:80px;height:295px;">
<tr>
<td align="center">
News
</td>
</tr>
<tr>
<td style="text-align:justify">
<div class="container">
<div id="scrolldiv">[/HTML]
Questo è uno scroll_div verticale completo di javascript e css che ho trovato free in internet,
ho inserito il codice in un unica pagina html, funziona con mouseover sui bottoni.
Si possono cambiare i bottoni con immagini.
Questo è uno scroll_div verticale completo di javascript e css che ho trovato free in internet,
ho inserito il codice in un unica pagina html, funziona con mouseover sui bottoni.
Si possono cambiare i bottoni con immagini.
Questo è uno scroll_div verticale completo di javascript e css che ho trovato free in internet,
ho inserito il codice in un unica pagina html, funziona con mouseover sui bottoni.
Si possono cambiare i bottoni con immagini.
[HTML]</div>
</div>
<div id="scrolldiv__controls">
<div id="imgup"><input type="button" value=" su " onmouseover="scroll(-8, 100);" onmouseout="stopScroll();" alt="Scroll Up" ></div>
<div id="imgdown"><input type="button" value=" giù" onmouseover="scroll(8, 100);" onmouseout="stopScroll();" alt="Scroll Down"></div>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>[/HTML]

d3v1l

Ciao alessandro sei grande
mi mancano 2 cose pero
1-un stato per tornare subito all inizio
2-un modo che l utente puo spostare il testo su e giu con una barra scrolling di lato
io ho cambiato da hidden a scroll ma il testo resta bloccato nella posizione dove e arrivato con i comandi

alesandro

1 - Ho provato con gli ipertesti interni <a href="#1">Vai all'inizio</a>
e <a name="#"></a> da mettere nel punto da dove ripartire, ho inserito un codice Javascript dal sito html e funziona solo in IE e no su Mozilla e Opera e da pure il problema 2. Per farli funzionare entrambi ci vuole una function o più in Javascript, ci studio.

d3v1l

Ciao Alex ho provato con un punto di ancoraggio ma ninete non funziona!!
Cmq aspetto tue notizie ciaoo

alesandro

La soluzione più semplice :
[HTML]<html>
<head>
<title>scroll</title>
<style type="text/css">
body{
text-align:center;
scrollbar-track-color:#357;
scrollbar-face-color:#bcf;
scrollbar-base-color:#789;
scrollbar-arrow-color:#19a;
}
div{
text-align:center;
}
.divest{
width:280px;
height:380px;
border: 3px solid #567;
}
.divint{
width:260px;
height:210px;
margin-top:20px;
margin-left:10px;
border: 1px solid #89a;
overflow:scroll;
text-align:justify;
}
</style>
</head>
<body>
<table align="center">
<tr>
<td>
<div class="divest">
Scroll verticale con link
<div class="divint">
<a name="top"></a>Con questo div scroll si pò leggere il testo in scroll verticale, cliccando sulle frecce della barra in giù scrorre in automatico il testo verso il basso,
cliccando sulla freccia in alto della barra si va in automatico verso l'alto, con la rotella del mouse il testo scorre su e giù.
Con gli ipertesti interni si possono richiamare i punti desiderati del testo dai link creati a piacimento.
<a name="corsivo" ></a>
<p style="font-style:italic;">Con questo div scroll si pò leggere il testo in scroll verticale, cliccando sulle frecce della barra in giù scrorre in automatico il testo verso il basso,
cliccando sulla freccia in alto della barra si va in automatico verso l'alto, con la rotella del mouse il testo scorre su e giù.
Con gli ipertesti interni si possono richiamare i punti desiderati del testo dai link creati a piacimento.</p>
<a name="colorato" ></a>
<p style="color:#c1be44;">
Con questo div scroll si pò leggere il testo in scroll verticale, cliccando sulle frecce della barra in giù scrorre in automatico il testo verso il basso,
cliccando sulla freccia in alto della barra si va in automatico verso l'alto, con la rotella del mouse il testo scorre su e giù.
Con gli ipertesti interni si possono richiamare i punti desiderati del testo dai link creati a piacimento.</p>
</div>
<a href="#top">Vai all'inizio</a><br />
<a href="#corsivo">Vai al testo corsivo</a><br />
<a href="#colorato">Vai al testo colorato</a><br />
</div>
</td>
</tr>
</table>
</body>
</html>[/HTML]

d3v1l

ciao alex
grazie dell aiuto ma quello lo sapevo fare anchio a me serviva lo script che mi hai postato prima pero con l aggiunta della barra di scolling piu i punti di ancoraggio per tornare a capo o alla fine

d3v1l

usero la barra di scrolling e basta non divento pazzo
ho una cosa o l altra