Hello,
I wrote a small script to scroll some images within a div based view/canvas page. The following is the script:
[CODE]var currentPosition = 0;
var canvasHeight = 445; //dynamically set
var viewHeight = 273; //never changes
var timeoutId;
function homeBodySchoolThumbsScrollUp() {
currentPosition = getSchoolThumbsCanvasTopPosition();
if (currentPosition > (-(canvasHeight – viewHeight) – 10)) {
currentPosition–;
setSchoolThumbsCanvasTopPosition(currentPosition);
timeoutId = setTimeout(‘homeBodySchoolThumbsScrollUp()’, 1);
}
}
function homeBodySchoolThumbsScrollDown() {
currentPosition = getSchoolThumbsCanvasTopPosition();
if (currentPosition < 0) {
currentPosition++;
setSchoolThumbsCanvasTopPosition(currentPosition);
timeoutId = setTimeout(‘homeBodySchoolThumbsScrollDown()’, 1);
}
}
function clearScrollTimeout() {
clearTimeout(timeoutId);
}
function getSchoolThumbsCanvasTopPosition() {
var top = document.getElementById(‘home-body-school-thumbs-canvas’).style.top;
return new Number(top.slice(0, top.length – 2));
}
function setSchoolThumbsCanvasTopPosition(num) {
document.getElementById(‘home-body-school-thumbs-canvas’).style.top = num + “px”;
}
In Chrome this worked at an acceptable speed. However, in Firefox and Internet Explorer is really slow. Since the majority of my tests have been slow I’m thinking the script itself is the issue and I’m not doing something correctly.
The ScrollUp and ScrollDown functions are call onmouseover in the respective divs.
Any tips? Thanks!