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:
I think the problem may be that I'm using multiple onLoad events.
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:
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.
and further split the "crumb". This is a reference of the ordinary way.