Help with Arrays and Loops 1

[mik3847]

I have a script which resizes a div depending on the viewport size, allows the div to scroll using a custom scrollbar with up / down buttons and writes to a cookie to remember it's scrolled position on refresh.

I have grasped the concept of arrays and how they could be used to loop through this code, but with my limited js knowledge cannot get the script to work with more than one div on the same page.

If someone who knows what they're doing a bit more than me could tell me how I can get this to work, I would most appreciate it

The Code:

var divId = ["div_to_scroll", "div2_to_scroll"]; //which div to scroll

//scrolling code
defaultStep=1 
step=defaultStep 

function scrollDown()
	{
	clearTimeout(timerDown) 
	document.getElementById(divId).scrollTop+=step 
	timerDown=setTimeout("scrollDown('"+divId+"')",10)
	} 

function scrollUp()
	{
	clearTimeout(timerUp)
	document.getElementById(divId).scrollTop-=step 
	timerUp=setTimeout("scrollUp('"+divId+"')",10)
	} 

timerDown="" 
timerUp="" 

function stop()
	{
	clearTimeout(timerDown) 
	clearTimeout(timerUp)
	}

document.onmouseout=function()
	{
	stop()
	}
	
//div resizing code
var offSet = 276; // Offset from viewport top/bottom in px
var scrollPad = offSet + 14;

function scale()
	{
	if(useragent="msie")
		{
		document.getElementById(divId).style.height = document.body.clientHeight - offSet + "px";
		document.getElementById("scrollbar-padder").style.height = document.body.clientHeight - scrollPad + "px";
		}
	else
		{
		document.getElementById(divId).style.height = window.innerHeight - offSet + "px";
		document.getElementById("scrollbar-padder").style.height = window.innerHeight - scrollPad + "px";
		}
	}

// Create cookie to store scrolled position
function scrollPos()
	{
	var strCook = document.cookie;
	if(strCook.indexOf("!~")!=0)
		{
		var intS = strCook.indexOf("!~");
		var intE = strCook.indexOf("~!");
		var strPos = strCook.substring(intS+2,intE);
		document.getElementById(divId).scrollTop = strPos;
		}
	}

// Update divs scrolled position
function setDivPosition()
	{
	var intY = document.getElementById(divId).scrollTop;
	document.cookie = "yPos=!~" + intY + "~!";
	}

// Onload do this
function onLoader()
	{
	scale();
	scrollPos();
	document.getElementById(divId).onscroll = setDivPosition;
	}

window.onload = onLoader;
window.onresize = scale;

I think the problem may be that I'm using multiple onLoad events.

 

[mik3847]

also added:

document.cookie = intY + n;

*sorry can't edit post

 

[tsuji]

[10] Setting and Reading cookie
[10.1] You set the names like yPos, yPos2, in complete parallel with the implementation of divIds - but this is a pain.
[10.2] This is how. For each call to the handling, there are two possibilities: (a) divId defined, so setting and reading is for that particular div; (b) divId is not defined (and is null), then setting and reading are for both (two or more) div defined in divIds.
[tt]
// Create cookie to store scrolled position
function scrollPos()
{
/*
var strCook = document.cookie;
if(strCook.indexOf("!~")!=0)
{
var intS = strCook.indexOf("!~");
var intE = strCook.indexOf("~!");
var strPos = strCook.substring(intS+2,intE);
document.getElementById(divId).scrollTop = strPos;
}
*/

//names: yPos and yPos2,...

var strCook=document.cookie;
var acomp=strCook.split("; ");
var n;
if (divId) {
for (var i=0;i<divIds.length;i++) {
if (divId==divIds) {
n=(i==0)?"":i+1;
break;
}
}

for (var i=0;i<acomp.length;i++) {
var crumb=acomp.split("=");
if (crumb[0]=="yPos"+n) {
document.getElementById(divId).scrollTop=unescape(crumb[1]);
break;
}
}
} else {

for (var i=0;i<acomp.length;i++) {
var crumb=acomp.split("=");
if (crumb[0].test(/^yPos\d?$/) {
n=(/\d$/.test(crumb[0]))?crumb[0].substr(crumb[0].length-1):"";
if (n.length!=0) {
document.getElementById(divIds[parseInt(n,10)-1]).scrollTop=unescape(crumb[1]);
} else {
document.getElementById(divIds[0]).scrollTop=unescape(crumb[1]);
}
}
}
}

}

// Update cookie to current position
function setDivPosition()
{
/*
var intY = document.getElementById(divId).scrollTop;
document.cookie = "yPos=!~" + intY + "~!";
*/

//names: yPos and yPos2,...

var n;
if (divId) { //if it is triggered when divId is defined
var n=(/\d$/.test(divId))?divId.substr(divId.length-1):"";
document.cookie=("yPos"+n)+"="+escape(document.getElementById(divId).scrollTop)+";";
} else { //general situation when divId is not defined
for (var i=0;i<divIds.length;i++) {
n=(/\d$/.test(divIds))?parseInt(divIds.substr(divIds.length-1),10):"";
document.cookie=("yPos"+n)+"="+escape(document.getElementById(divIds).scrollTop)+";";
}
}

}
[/tt]
[10.3] The construction though straightforward is not that simple, coupled with the specific design of numbering in divIds which makes life more difficult.
[10.4] Have you read the reference I have shown you? Your setting and reading are completely insufficient.

[11] onscroll event?
[11.1] I am not convinced of the validity of onscroll handling of those div. I would comment it out and call instead the setDivPosition function once onload. Imagine onscroll and then continually setting cookie? that's a nightmare.
[tt]
function onLoader()
{
for ( var i=0; i<divIds.length; i++ ) {
divId = divIds;
scale();
scrollPos();
[red]//[/red]document.getElementById(divId).onscroll = setDivPosition;
}
divId=null;
[red]setDivPosition()[/red];
}
[/tt]
[11.2] Then if window resize, maybe do again the setting exercise?
[tt]
window.onresize = [blue]function() {
scale();
setDivPosition();
}[/blue]
[11.3] During onmousedown at the anchor, those div are not scrolling. I would suggest then add the setting of cookie when mouse up.
[tt]
[tt]<a alt="Scroll Up" onmousedown="divId=divIds[0];scrollUp()" onmouseup="[blue]setDivPosition();[/blue]stop()">Scroll Up</a>
[/tt]
Same for the other three anchors.

[12] Those scripts above are mental scripts with pure logical progression. It might have typos. You have to refine it yourself. And I think I have had it enough and cover sufficient ground in all aspects of relevance. The rest, it's all yours and on your own.

 

[mik3847]

Thanks for all your help jsuji, your a legend!

Mike