scroll veeticale di un testo

pe51166

Nuovo Utente
9 Nov 2012
2
0
0
ciao a tutti, premetto l'ignoranza quasi totale di Javascript.
STo cercando per il mio sito www.sentierando.it di creare un effetto di scroll verticale all'interno di una cella di tabella.
Girando in rete ho trovato uno script che riporto qui
Codice:
//Vertical Scroller v1.2- by Brian of www.ScriptAsylum.com
//Updated for bug fixes
//Visit JavaScript Kit (http://javascriptkit.com[/u) for script

//ENTER CONTENT TO SCROLL BELOW.
var content='<p>Visit <a href="http://www.javascriptkit.com">JavaScript Kit</a> for JavaScript tutorials and over 400 <font color="#FF0000">free</font> scripts</p><p><a href="http://freewarejava.com">Freewarejava.com</a>- direct links to Java applets and resources</p><p>Stay up to date on current news and events. Visit <a href="http://www.msnbc.com">MSNBC.com</a></p><p><a href="http://www.dynamicdrive.com">Dynamic Drive</a> is your definitive source for DHTML scripts and components.</p>';

var boxheight=150;        // BACKGROUND BOX HEIGHT IN PIXELS.
var boxwidth=150;         // BACKGROUND BOX WIDTH IN PIXELS.
var boxcolor="#FFF6e9";   // BACKGROUND BOX COLOR.
var speed=50;             // SPEED OF SCROLL IN MILLISECONDS (1 SECOND=1000 MILLISECONDS)..
var pixelstep=2;          // PIXELS "STEPS" PER REPITITION.
var godown=false;         // TOP TO BOTTOM=TRUE , BOTTOM TO TOP=FALSE

// DO NOT EDIT BEYOND THIS POINT

var outer,inner,elementheight,ref,refX,refY;
var w3c=(document.getElementById)?true:false;
var ns4=(document.layers)?true:false;
var ie4=(document.all && !w3c)?true:false;
var ie5=(document.all && w3c)?true:false;
var ns6=(w3c && navigator.appName.indexOf("Netscape")>=0)?true:false;
var txt='';
if(ns4){
txt+='<table cellpadding=0 cellspacing=0 border=0 height='+boxheight+' width='+boxwidth+'><tr><td>';
txt+='<ilayer name="ref" bgcolor="'+boxcolor+'" width='+boxwidth+' height='+boxheight+'></ilayer>';
txt+='</td></tr></table>'
txt+='<layer name="outer" bgcolor="'+boxcolor+'" visibility="hidden" width='+boxwidth+' height='+boxheight+'>';
txt+='<layer  name="inner"  width='+(boxwidth-4)+' height='+(boxheight-4)+' visibility="hidden" left="2" top="2" >'+content+'</layer>';
txt+='</layer>';
}else{
txt+='<div id="ref" style="position:relative; width:'+boxwidth+'; height:'+boxheight+'; background-color:'+boxcolor+';" ></div>';
txt+='<div id="outer" style="position:absolute; width:'+boxwidth+'; height:'+boxheight+'; visibility:hidden; background-color:'+boxcolor+'; overflow:hidden" >';
txt+='<div id="inner"  style="position:absolute; visibility:visible; left:2px; top:2px; width:'+(boxwidth-4)+'; overflow:hidden; cursor:default;">'+content+'</div>';
txt+='</div>';
}
document.write(txt);

function getElHeight(el){
if(ns4)return (el.document.height)? el.document.height : el.clip.bottom-el.clip.top;
else if(ie4||ie5)return (el.style.height)? el.style.height : el.clientHeight;
else return (el.style.height)? parseInt(el.style.height):parseInt(el.offsetHeight);
}

function getPageLeft(el){
var x;
if(ns4)return el.pageX;
if(ie4||w3c){
x = 0;
while(el.offsetParent!=null){
x+=el.offsetLeft;
el=el.offsetParent;
}
x+=el.offsetLeft;
return x;
}}

function getPageTop(el){
var y;
if(ns4)return el.pageY;
if(ie4||w3c){
y=0;
while(el.offsetParent!=null){
y+=el.offsetTop;
el=el.offsetParent;
}
y+=el.offsetTop;
return y;
}}

function scrollbox(){
if(ns4){
inner.top+=(godown)? pixelstep: -pixelstep;
if(godown){
if(inner.top>boxheight)inner.top=-elementheight;
}else{
if(inner.top<2-elementheight)inner.top=boxheight+2;
}}else{
inner.style.top=parseInt(inner.style.top)+((godown)? pixelstep: -pixelstep)+'px';
if(godown){
if(parseInt(inner.style.top)>boxheight)inner.style.top=-elementheight+'px';
}else{
if(parseInt(inner.style.top)<2-elementheight)inner.style.top=boxheight+2+'px';
}}}

window.onresize=function(){
if(ns4)setTimeout('history.go(0)', 400);
else{
outer.style.left=getPageLeft(ref)+'px';
outer.style.top=getPageTop(ref)+'px';
}}

window.onload=function(){
outer=(ns4)?document.layers['outer']:(ie4)?document.all['outer']:document.getElementById('outer');
inner=(ns4)?outer.document.layers['inner']:(ie4)?document.all['inner']:document.getElementById('inner');
ref=(ns4)?document.layers['ref']:(ie4)?document.all['ref']:document.getElementById('ref');
elementheight=getElHeight(inner);
if(ns4){
outer.moveTo(getPageLeft(ref),getPageTop(ref));
outer.clip.width=boxwidth;
outer.clip.height=boxheight;
inner.top=(godown)? -elementheight : boxheight-2;
inner.clip.width=boxwidth-4;
inner.clip.height=elementheight;
outer.visibility="show";
inner.visibility="show";
}else{
outer.style.left=getPageLeft(ref)+'px';
outer.style.top=getPageTop(ref)+'px';
inner.style.top=((godown)? -elementheight : boxheight)+'px';
inner.style.clip='rect(0px, '+(boxwidth-4)+'px, '+(elementheight)+'px, 0px)';
outer.style.visibility="visible";
}
setInterval('scrollbox()',speed);
}
quello che non capisco è perchè non mi funziona se metto la dichiarativa <!DOCTYPE html> mentre se metto solo <html> funziona.

Qualcuno sa/può aiutarmi?

Grazie

Paolo

p.s.
se volete vedere cosa intendo fare guardate http://www.sentierando.it/index_2.php la cella tutta a sinistra
 
Ultima modifica di un moderatore:

criric

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
21 Ago 2010
5.607
54
48
TN
Ciao,
considerando che si ferma a verificare la versione di IE 5 deve essere molto vecchio come script ( non l'ho letto tutto)
Codice:
var ie5=(document.all && w3c)?true:false;
io provereri qualcosa con jquery
HTML:
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                function scorri() {
                    $("#testo").css("top","200px");
                    $("#testo").animate({top:"-" + $("#testo").height()}, 5000, function(){
                        scorri();
                    });
                }
                scorri();
            })
        </script>
        <style type="text/css">
            #contenitore,#contenitore1 {
                width: 220px;
                height: 200px;
                border: 3px outset red;
                overflow: hidden;
            }
            #testo,#testo1 {               
                position:relative;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="contenitore">
            <div id="testo">
                MrWebMaster lol
            </div>
        </div>
    </body>
</html>
non l'ho testato per bene
 
Discussioni simili
Autore Titolo Forum Risposte Data
M Posizionare una tabella con scroll su un elemento specifico PHP 3
E Div che scompare con scroll jquery Javascript 0
tomorc [HTML] Problema con scroll bar (risolto) HTML e CSS 0
L Cambiare classi solo scroll up jQuery 2
A [Javascript] [PHP] Scroll refresh chat Javascript 2
M [Javascript] Visualizza contenuto file XML aggiornato con text scroll Javascript 0
L Aggiungere contenuto con ajax durante lo scroll jQuery 1
T [HTML] Problema pulsante scroll down su ecommerce Content Management System (CMS) 0
O Allo scroll cambiare colore di sfondo jQuery 0
simone gatti [PHP] Problema scroll "content" PHP 2
U div fisso che ad un certo punto dello scroll scompare jQuery 2
F [HTML] Div in scroll insieme alla pagina HTML e CSS 0
A [Javascript] avviare un animazione js allo scroll della pagina Javascript 7
G Modificare navbar in base allo scroll jQuery 6
otto9due Apparizione e scomparsa div in base allo scroll pagina jQuery 4
giuseppe_123 [WordPress] scroll post WordPress 2
K Transazioni durante lo scroll della home page Javascript 2
P infinite scroll: quali i parametri corretti? WordPress 0
Jonn [Javascript] Cambiare colore sfondo div allo scroll del mouse Javascript 3
Marco_88 scroll in un div specifico Javascript 6
M Scroll che mostra e nasconde elementi Javascript 2
N Div metà fisso e metà scroll HTML e CSS 4
voldemort Sfondo parallasse con scroll e ritardo Javascript 1
felino [HTML] DIV menu fisso durante lo scroll HTML e CSS 5
F impedire scroll verticale Javascript 0
F impedire scroll verticale jquery Javascript 0
D Problema con lo scroll della pagina e del div position:fixed HTML e CSS 0
F Animazione jQuery scroll - ancore, si può fare? Javascript 1
L [RISOLTO]Pagina PHP jquery Mobile non funziona scroll nella pagina jQuery 3
I spostare div in base all'altezza dello scroll della pagina Javascript 1
J attivare sezioni sito scroll jQuery 1
J javascript sito scroll Javascript 4
Mauro Guardiani scroll Discussioni Varie 0
L Scroll in Basso Chat Javascript 0
L Infinite Scroll Javascript 1
T Realizzazione "scroll" orizzontale Javascript 4
F scroll thunbnail Joomla 2
B Aiuto per scroll div jQuery 4
P Problema visualizzazione pulsanti dopo scroll jQuery 6
Mauro Guardiani infinite scroll Discussioni Varie 0
Mauro Guardiani auto scroll Discussioni Varie 0
F Scroll e movimento nella pagina personalizzato Javascript 1
M Scroll del Sito Javascript 0
P Lightbox + Smooth Scroll Horizontal Javascript 1
D Scroll NEWS in php PHP 1
W Scroll Images tipo "Dock Menu" Ajax 3
G Parametri scroll Flash 2
R scroll flash cs3 testo e immagini con scrollpane? Webdesign e Grafica 2
R scroll flash cs3 testo e immagini con scrollpane? Flash 2
B Tabelle fisse allo scroll HTML e CSS 12

Discussioni simili