This Javascript Is DRIVING ME CRAZY

Discussion in 'JavaScript' started by LongHaul, Nov 3, 2007.

0
  1. #1
    I want to have several items that scroll vertically in a box.
    I want a user to be able to click a number and the scroll will jump to that #item and continue a-scrolling.

    Here's my code:
    <html>
<head>

<script type="text/javascript" language="JavaScript">

var swidth=150; 
var sheight=200; 
var sspeed=4; 

var items=new Array(); 
items[0]='Item 0<br />Text text text Text text text Text text text .'; 
items[1]='Item 1<br />Text text text Text text text Text text text .'; 
items[2]='Item 2<br />Text text text Text text text Text text text .'; 
items[3]='Item 3<br />Text text text Text text text Text text text .'; 
items[4]='Item 4<br />Text text text Text text text Text text text .'; 

function start(which){
	if(document.getElementById){
		ns6div=document.getElementById('iens6div'); ns6div.style.top=sheight+"px"; ns6div.innerHTML=items[which]; sizeup=ns6div.offsetHeight; 
		ns6scroll(which); 
	}
}

function ns6scroll(which){
if (parseInt(ns6div.style.top) >= sizeup*-1) {
		ns6div.style.top=parseInt(ns6div.style.top)-sspeed+'px';
		setTimeout("ns6scroll(" + which + ")",100); 
	}
	else {
		if (which==items.length-1) which=0;
		else which++;
		ns6div.style.top = sheight+'px';
		ns6div.innerHTML = items[which];
		sizeup = ns6div.offsetHeight;
		ns6scroll(which); 
	}
}

</script>
</head>

<body onload="start(0)">

<a href="#" onclick="start(0)">0</a> 
<a href="#" onclick="start(1)">1</a> 
<a href="#" onclick="start(2)">2</a> 
<a href="#" onclick="start(3)">3</a> 
<a href="#" onclick="start(4)">4</a>

<table width="150px" height="200px" border="0"><tr><td>
<script language="JavaScript">
if(document.layers){
document.write('<ilayer id="ns4div" width="'+swidth+'" height="'+sheight+'"><layer id="ns4div1" width="'+swidth+'" height="'+sheight+'" onMouseOver="sspeed=0" onMouseOut="sspeed=4"></layer></ilayer>')
}
if(document.getElementById||document.all){
document.write('<div style="position:relative; overflow:hidden; width:'+swidth+'px; height:'+sheight+'px; clip:rect(0 '+swidth+'px '+sheight+'px 0); " onMouseOver="sspeed=0" onMouseOut="sspeed=4"><div id="iens6div" style="position:relative; width:'+swidth+'px; "></div></div>'); 
}
</script>
</td></tr></table>

</body></html>
    Code (markup):
    Problems:
    1. Clicking the numbers speeds up the scroll rate.
    However, the variable that controls it, "sspeed", doesn't change.

    2. Clicking the numbers causes the items to be out of order, seemingly at random.
    This one is driving me absolutely insane. There is NO REASON for it. The variable "which" is increased (which++) but rather than 1->2->3->4->0 like it should (this example has 5 items numbered 0-4) it goes 3->2->2->4->0->2->1 etc etc. (See demo below) :mad: :mad: :mad: :mad:


    I've been working hours and DAYS on this and I just can't see what the hell is happening. Please someone help before I destroy.


    A lot of this code I got from a website. Is the guy who wrote it a cretin, or is it my JavaScript newbie self? I mean, I'm not a total idiot, and I expect my browser to understand 2++ = 3!!


    Demo:
    http://music-nerds.com/dammit.php
     
    LongHaul, Nov 3, 2007 IP
  2. LongHaul

    LongHaul Peon

    Messages:
    670
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    0
    #2
    And P.S., is there any downside to using HTML's <marquee>? It scrolls vertically.
     
    LongHaul, Nov 3, 2007 IP
  3. LongHaul

    LongHaul Peon

    Messages:
    670
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Breakthrough!

    For anyone interested, when someone clicks a number, the ns6scroll function is then running twice at the same time, and the items are being stacked! Now to work on cancelling the function before it runs again...
     
    LongHaul, Nov 3, 2007 IP