Ciao ragazzi! Premetto che io so poco o niente di javascript, giusto qualche script elementare.
Tempo fa ho chiesto consiglio qui per creare uno scrolling su un div, e mi è stato suggerito uno script già pronto veramente molto interessante e facile da usare.
Il problema è che ora mi trovo a dover usare lo stesso script per due volte nella stessa pagina, e non funziona!! Sicuramente c'è qualche problema con le variabili che si sovrascrivo, ma non riesco a capire dove!
Vi posto il codice che fa funzionare lo script (c'è anche un altro file .js da includere, ma quello non va mai modificato):
Ho ripetuto io il codice due volte per entrambi gli scroll, ma evidentemente non si fa cosìcodice:// scroller testo news var scrollActive = false, scrollStop = true, scrollIncrement = 10, scrollInterval = 60; function winOnLoad() { var up = xGetElementById('upBtn1'); var dn = xGetElementById('dnBtn1'); var sc = xGetElementById('vScroller1'); up.onmousedown = onScrollUpStart; up.onmouseup = onScrollStop; xMoveTo(up, xPageX(sc) + xWidth(sc), xPageY(sc)); dn.onmousedown = onScrollDnStart; dn.onmouseup = onScrollStop; xMoveTo(dn, xPageX(sc) + xWidth(sc), xPageY(sc) + xHeight(sc) - xHeight(dn)); } function onScrollDnStart() { if (!scrollActive) { scrollStop = false; onScrollDn(); } } function onScrollDn() { if (!scrollStop) { scrollActive = true; setTimeout('onScrollDn()', scrollInterval); var sc = xGetElementById('vScrollee1'); var y = xTop(sc) - scrollIncrement; if (y >= -(xHeight(sc) - xHeight('vScroller1'))) { xTop(sc, y); } else { scrollStop = true; scrollActive = false; } } } function onScrollUpStart() { if (!scrollActive) { scrollStop = false; onScrollUp(); } } function onScrollUp() { if (!scrollStop) { scrollActive = true; setTimeout('onScrollUp()', scrollInterval); var sc = xGetElementById('vScrollee1'); var y = xTop(sc) + scrollIncrement; if (y <= 0) { xTop(sc, y); } else { scrollStop = true; scrollActive = false; } } } function onScrollStop() { scrollStop = true; scrollActive = false; } // scroller titoli news var scrollActive = false, scrollStop = true, scrollIncrement = 10, scrollInterval = 60; function winOnLoad() { var up = xGetElementById('upBtn2'); var dn = xGetElementById('dnBtn2'); var sc = xGetElementById('vScroller2'); up.onmousedown = onScrollUpStart; up.onmouseup = onScrollStop; xMoveTo(up, xPageX(sc) + xWidth(sc), xPageY(sc)); dn.onmousedown = onScrollDnStart; dn.onmouseup = onScrollStop; xMoveTo(dn, xPageX(sc) + xWidth(sc), xPageY(sc) + xHeight(sc) - xHeight(dn)); } function onScrollDnStart() { if (!scrollActive) { scrollStop = false; onScrollDn(); } } function onScrollDn() { if (!scrollStop) { scrollActive = true; setTimeout('onScrollDn()', scrollInterval); var sc = xGetElementById('vScrollee2'); var y = xTop(sc) - scrollIncrement; if (y >= -(xHeight(sc) - xHeight('vScroller2'))) { xTop(sc, y); } else { scrollStop = true; scrollActive = false; } } } function onScrollUpStart() { if (!scrollActive) { scrollStop = false; onScrollUp(); } } function onScrollUp() { if (!scrollStop) { scrollActive = true; setTimeout('onScrollUp()', scrollInterval); var sc = xGetElementById('vScrollee2'); var y = xTop(sc) + scrollIncrement; if (y <= 0) { xTop(sc, y); } else { scrollStop = true; scrollActive = false; } } } function onScrollStop() { scrollStop = true; scrollActive = false; }
Vi posto anche il codice della pagina:
ho accorciato il testo per ragioni di spazio, ovviamente occorre che il testo sia più lungo per vedere effettivamente lo scroll...codice:<div id="newstxt"> <h1 id="itanewsh1">News & Eventi</h1> <div id="vScroller2" class="scroller2"> <div id="vScrollee2" class="scrollee2"> 30/11/2007 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p> </div> <div class="padding2"> <div id="upBtn2" class="btn">[img]img/up.gif[/img]</div> <div id="dnBtn2" class="btn">[img]img/down.gif[/img]</div> </div> </div> </div> <div id="newshi"> <div id="vScroller1" class="scroller1"> <div id="vScrollee1" class="scrollee1"> (begin scrollable text)</p> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p> (end scrollable text)</p> </div> <div class="padding1"> <div id="upBtn1" class="btn">[img]img/up.gif[/img]</div> <div id="dnBtn1" class="btn">[img]img/down.gif[/img]</div> </div> </div> </div> <div class="spacer"></div>
Posto anche i CSS:
Spero tanto che qualcuno mi possa aiutarecodice:#newstxt { width:280px; border-right:1px solid #4d4d4d; float:left; margin:0; padding:0 10px 0 0; } #newshi { position:relative; width:375px; float:right; margin:0; padding:0; } .btn { width:12px; height:10px; cursor:default; } .scroller1 { position:relative; overflow:hidden; width:375px; height:380px; margin:0; padding:0; } .scrollee1 { position:absolute; width:353px; /* to get this number, subtract scrollee's padding from scroller's width */ left:0; top:0; margin:0; padding:0 10px 0 0; } .padding1 { position:absolute; width:12px; left:363px; top:355px; margin:0;padding:0; } .scroller2 { position:relative; overflow:hidden; width:280px; height:305px; margin:0; padding:0; } .scrollee2 { position:absolute; width:268px; /* to get this number, subtract scrollee's padding from scroller's width */ left:0; top:0; margin:0; padding:0 10px 0 0; } .padding2 { position:absolute; width:12px; left:268px; top:280px; margin:0;padding:0; } #upBtn1, #upBtn2 { margin-bottom:5px; }
![]()


Rispondi quotando