due scroll per due diversi div nella stessa pagina

[elysaweb]

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):

// 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;
}

Ho ripetuto io il codice due volte per entrambi gli scroll, ma evidentemente non si fa così

Vi posto anche il codice della pagina:

<div id="newstxt">
  <h1 id="itanewsh1">News &amp; 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>

ho accorciato il testo per ragioni di spazio, ovviamente occorre che il testo sia più lungo per vedere effettivamente lo scroll...

Posto anche i CSS:

#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;
}

Spero tanto che qualcuno mi possa aiutare

[neoneo]

ciao perchè non usi nel codice css

il comando overflow?

io metterei overflow:auto questo inserisce la barra di scorrimento sia verticale che orizzontale solo sei il contenuto supera l'area da te impostata width e height
ciao