PDA

View Full Version : [HTML] div a scorrimento

max246
09-01-2007, 08:21
Allora voglio fare uno spazio, preferisco con i div, dove scorre un testo e si può scorrere manualmente, tipo gli iframe!

Avete qualche consiglio? Aiuto? Altro?
andbin
09-01-2007, 08:59
Allora voglio fare uno spazio, preferisco con i div, dove scorre un testo e si può scorrere manualmente, tipo gli iframe!A livello di CSS imposta overflow:auto.

Esempio:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Prova div</title>
<style type="text/css">
<!--
div.scrolling { width:100px; height:50px; overflow:auto; border:1px solid #808080; }
-->
</style>
</head>
<body>

<div class="scrolling">
Prova<br>Prova<br>Prova<br>Prova<br>Prova<br>
Prova<br>Prova<br>Prova<br>Prova<br>Prova<br>
</div>

</body>
</html>
max246
09-01-2007, 09:10
ok, c'è un sistema con JS per fare lo scroll automatico? Perchè mi serve come informazioni da scorrere altrimenti si può scrollare manualmente...
andbin
09-01-2007, 09:52
ok, c'è un sistema con JS per fare lo scroll automatico? Perchè mi serve come informazioni da scorrere altrimenti si può scrollare manualmente...Ah, ok ... dalla tua richiesta iniziale non si capiva che volevi uno scrolling automatico (tipo quello di certi siti di e-commerce o di informazione, giusto?).
Comunque si può fare sicuramente. Appena ho un attimo di tempo faccio qualche prova.
andbin
09-01-2007, 10:09
Prova questo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Prova scrolling automatico</title>
<script type="text/javascript">
<!--
var scroll_enable = true;
var scroll_move = 2;
var scroll_time = 100;

function scroll_update ()
{
var obj = document.getElementById ("testo");

if (scroll_enable)
{
if ((obj.scrollTop + scroll_move) < (obj.scrollHeight - obj.clientHeight))
obj.scrollTop += scroll_move;
else
obj.scrollTop = 0;
}

setTimeout (scroll_update, scroll_time);
}
//-->
</script>
<style type="text/css">
<!--
div.scrolling { width:100px; height:80px; overflow:auto; border:1px solid #808080; }
div.pad { margin-top:80px; margin-bottom:80px; }
-->
</style>
</head>
<body onload="scroll_update()">

<div class="scrolling" id="testo" onmouseover="scroll_enable=false" onmouseout="scroll_enable=true">
<div class="pad">
Riga 1<br>Riga 2<br>Riga 3<br>Riga 4<br>Riga 5<br>Riga 6<br>
Riga 7<br>Riga 8<br>Riga 9<br>Riga 10<br>Riga 11<br>Riga 12<br>
</div>
</div>

</body>
</html>Nota due cose: ho fatto in modo che se ci passi sopra con il mouse, lo scrolling si arresta (su altri siti fanno così, almeno). Se non vuoi far vedere la scrollbar, basta mettere overflow:hidden.
Testato con FF2 e IE6.

Dimmi se ti va bene ... comunque puoi modificarlo come ti pare per quanto riguarda posizioni, velocità, ecc... ;)
max246
10-01-2007, 09:48
thx dopo provo :D