Menu
Hi there.
First let me say I’m completely novice in Javascript.
Someone else wrote this and emailed it to me, I have just tried to used it.
I know my way round html pretty well but this one’s got me foxxed.
I’m trying to write a image slide show website that can scroll.
I’v managed it and it appear to work well.
But then when I try it in firefox the images are selectable but the scrollbar locks solid.
Here’s the website
[url]http://freespace.virgin.net/jp.mount…/foliohome.htm
and here’s the java
[url]http://freespace.virgin.net/jp.mountford/test/
or a direct dowload
[url]http://freespace.virgin.net/jp.mountford/test/scroll.js
I’d really appreciate any help in fixing this.
Many thanks
JayPee.
I’m not Sure if it’s the Java or the way Firefox uses the HTML
Here’s the code
[code]
/*
USAGE:
call buildStrip() in the body.onload event handler.
HISTORY:
9/10/04 version 0.9
*/
var secondDimension = 5; //this controls how many entries to expect per row
var scrollDataLength = scrollData.length / secondDimension; //use this to iterate scrollData
//some globals:
var intervalID; //used to hold the intervalID used by the scrolling loop
var loadedID; //used to hold the intervalID for the checkLoaded function …
var minScroll=-200; //used to limit the scrolling
var maxScroll=0; //as above
var scrollEnabled=false; //disables scrolling if there are not enough images to scroll
var targetThumbs; //holds the number of thumbs we are trying to load
var currentThumbs; //counts the loading of the thumbnails
var thumbHeight = 83; //the height of the thumbnails in pixels
var thumbWidth = 630; //the width of the visible portion of the thumbnails
var newImgs = new Array(); //the array of preloads
var borderWidth=1; //the border setting used to create the strip table
var anythingClicked = false; //this holds reflects whether anything has been clicked yet
function getScrollData(index,subIndex) {
//this function introduced to allow the scrollData array to hold pseudo-2d data
return scrollData[index*secondDimension+subIndex];
}
function buildStrip() {
//we mask this function by setting hideGallery…
if(hideGallery) return;
//start by loading the holding images
//not sure if this is necessary yet – buildHoldingImages();
var j=0;
var numberOfImages = scrollData.length/2;
var scrollHolder = findObj(“scrollHolder”);
//create the fixed div which clips the sliding div=
//since size information is included in the array, we can calculate positional stuff now:
var stripWidth = 2;
for(i=0;i<scrollDataLength;i++) {
stripWidth += Number(getScrollData(i,3)) + 2;
}
maxScroll = 0;
minScroll = thumbWidth – stripWidth;
if(minScroll>maxScroll) {
//this indicates there are not enough images to scroll.
//disable scrolling and center the images.
scrollEnabled = false;
stripStartPos = (thumbWidth-stripWidth)/2+98;
}
else {
scrollEnabled = true;
stripStartPos = 0;
//window.status = “Move the mouse on the thumbnail strip to scroll. Click to see a full size image.”
}
//tableHTML='<div id=”holder” style=”position:relative; height:’ + thumbHeight + ‘px; width:’ + thumbWidth + ‘px; overflow:hidden; left: 0px; top: 0px;” onMouseMove=”updateMouseTrack();” onMouseOut=”stopMouseTrack();”>’ ;
tableHTML='<div id=”holder” style=”position:relative; height:’ + thumbHeight + ‘px; width:’ + thumbWidth + ‘px; overflow:hidden;” onMouseMove=”updateMouseTrack();” onMouseOut=”stopMouseTrack();”>’ ;
//this is the sliding div
//tableHTML+='<div style=”position:absolute;left:0px;top:0px” id=”strip” >’;
tableHTML+='<div style=”position:absolute; left: ‘ + stripStartPos + ‘” id=”strip” >’;
//this is the start of the thumbnail table
tableHTML+='<table border=”‘ + borderWidth + ‘” cellpadding=”0″ cellspacing=”0″ bordercolor=”#ffffff” id=”thumbnailTable”>’;
tableHTML+= “<TR>”;
//we need to ensure that all the thumbnails are loaded before we calculate the width of the scroller
targetThumbs=scrollDataLength;
currentThumbs=0;
for(i=0;i<scrollDataLength;i++) {
id = “thumbnail” + i;
newImgs[i] = new Image;
//newImgs[i].id = id;
//newImgs[i].onmousedown = “showPic(” + i + “);”;
//this is not very browser compatible
//newImg.onreadystatechange=”thumbnailStateChange(this);”;
//replace with the .loaded method and a timer…
newImgs[i].width = getScrollData(i,3);
newImgs[i].height = getScrollData(i,4);
newImgs[i].src = getScrollData(i,0);
//.insertAdjacentHTML(“beforeEnd”,tempImg.outerHTML);
//tableHTML += “<TD>” + newImgs[i].outerHTML + “</TD>”;
tableHTML += ‘<TD><IMG id=”‘ + id + ‘” width=”‘ + getScrollData(i,3) + ‘” height=”‘ + getScrollData(i,4) + ‘” onmousedown=”showPic(‘ + i + ‘);” src=”‘ + getScrollData(i,0) + ‘”></td>’
}
tableHTML += “</TR></TABLE></Div></div>”;
obj = findObj(“scrollHolder”);
obj.innerHTML = tableHTML;
// this isn’t needed now that we have size info…
//now wait for the thumbnails to load…
loadedID = window.setInterval(“checkLoaded();”,200);
}
function checkLoaded() {
var loadedCount=0;
for(i=0;i<scrollDataLength;i++) {
if(newImgs[i].complete) loadedCount++;
}
window.status = “Loading thumbnails (” + Math.floor(loadedCount / scrollDataLength * 100) + “%)”;
if(loadedCount==scrollDataLength) {
clearInterval(loadedID);
finishedLoading();
}
}
function finishedLoading() {
window.status = “Move over the thumbnails to scroll and click an image to view it”;
if(!anythingClicked) showPic(0);
}
function calculateScrollDimensions() {
//this function will calculate and display the new array incorporating size info
if(false) {
newArray = “”;
for(i=0;i<scrollDataLength;i++)
{
newArray += ‘”‘ + getScrollData(i,0) + ‘”, ‘;
newArray += ‘”‘ + getScrollData(i,1) + ‘”, ‘;
newArray += ‘”‘ + getScrollData(i,2) + ‘”, ‘;
newArray += ‘”‘ + newImgs[i].width + ‘”, ‘;
newArray += ‘”‘ + newImgs[i].height + ‘”, ‘;
newArray += String.fromCharCode(13);
}
document.write(newArray);
}
}
function showPic(i) {
var obj = findObj(“mainPic”);
var title = findObj(“mainPicTitle”);
anythingClicked = true;
title.innerText = “”;
obj.src = getScrollData(i,1);
title.innerText = getScrollData(i,2);
}
function startScroll(delta) {
//set the scroll speed of the strip.
if(intervalID!=0) stopScroll();
intervalID = setInterval(“moveStrip(” + delta + “);”,20);
}
function stopScroll() {
clearInterval(intervalID);
intervalID = 0;
}
function moveStrip(delta) {
if(!scrollEnabled) return;
S = findObj(“strip”);
var re = /px/;
var oldVal = new String(S.style.left);
oldVal = oldVal.replace(re,””);
newpos = Number(oldVal) + delta;
//window.status = newpos;
if(newpos>maxScroll) newpos = maxScroll;
else if(newpos<minScroll) newpos = minScroll;
S.style.left = newpos;
//window.status = maxScroll + ” ” + minScroll + ” ” + newpos;
}
function traceText(val) {
var obj = findObj(“textSpace”);
obj.insertAdjacentHTML(“BeforeEnd”,val + “<BR>”);
}
function updateMouseTrack() {
//NOTE – this code probably won’t work under NS and may not take window scrolling into account
//window.status = “updateMouseTrack()”;
//relativePos = (thumbWidth/2)-event.x;
relativePos = (document.body.clientWidth/2)-event.clientX;
window.status = relativePos;
startScroll(relativePos/15);
}
function stopMouseTrack() {
stopScroll();
//window.status=”stopMouseTrack()”;
}