Hi there.
First let me say I'm completely novice in Javascript.
This is my second time posting this, as I put it in the wrong forum initially (sorry).
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 I've hit a brick wall with this...
I'm trying to write a image slide show website that can scroll.
I've 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.
I've tried download ing debugging software, but don't understand anything it's teling me.
Here's the website
http://freespace.virgin.net/jp.mountford/test/foliohome.htm
and here's the java
http://freespace.virgin.net/jp.mountford/test/
or a direct dowload
http://freespace.virgin.net/jp.mountford/test/scroll.js
I'd really, really appreciate any help in fixing this.
As I'd like to publish the site cross browser compatible.
Many thanks
JayPee.
I'm not Sure if it's the Java or the way Firefox uses the HTML
Here's the code
/*
REQUIREMENTS:
1) The MM findObj function
2) An array called scrollData with triples of thumbnail, mainpic and title. THIS ARRAY MUST PRECEDE THIS FILE.
3) A page item called scrollHolder to insert the thumbnails into.
4) An undimensioned picture called mainPic to hold the large image
5) A page item called mainPicTitle to hold the title of the document
6) An item called textSpace for debugging.
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()";
}Thats the JavaScript.
Here's the HTML.
<HTML><!-- InstanceBegin template="/Templates/artist gallery page.dwt" codeOutsideHTMLIsLocked="false" -->
<HEAD>
<!-- InstanceBeginEditable name="doctitle" -->
<TITLE>JPM - Gallery 1</TITLE>
<!-- InstanceEndEditable --> <!-- InstanceParam name="menuSelect" type="number" value="3" -->
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<STYLE TYPE="TEXT/CSS">
BODY,TD { font-family:arial,helvetica; font-size: 12px }
A:link { text-decoration:none }
A:active { text-decoration:none }
A:visited { text-decoration:none }
A:hover { text-decoration:none; color:#000000 }
</STYLE>
<!-- InstanceBeginEditable name="galleryData" -->
<script language="JavaScript" type="text/JavaScript">
<!--
scrollData = new Array(
"pictures/thumbs/folio001.gif", "pictures/jpm001.jpg", "", "83", "58",
"pictures/thumbs/folio002.gif", "pictures/jpm002.jpg", "", "83", "58",
"pictures/thumbs/folio003.gif", "pictures/jpm003.jpg", "", "83", "58",
"pictures/thumbs/folio004.gif", "pictures/jpm004.jpg", "", "83", "58",
"pictures/thumbs/folio005.gif", "pictures/jpm005.jpg", "", "83", "58",
"pictures/thumbs/folio006.gif", "pictures/jpm006.jpg", "", "83", "58",
"pictures/thumbs/folio007.gif", "pictures/jpm007.jpg", "", "83", "58",
"pictures/thumbs/folio008.gif", "pictures/jpm008.jpg", "", "83", "58",
"pictures/thumbs/folio009.gif", "pictures/jpm009.jpg", "", "83", "58",
"pictures/thumbs/folio010.gif", "pictures/jpm010.jpg", "", "83", "58",
"pictures/thumbs/folio011.gif", "pictures/jpm011.jpg", "", "83", "58",
"pictures/thumbs/folio012.gif", "pictures/jpm012.jpg", "", "83", "58",
"pictures/thumbs/folio013.gif", "pictures/jpm013.jpg", "", "83", "58",
"pictures/thumbs/folio014.gif", "pictures/jpm014.jpg", "", "83", "58",
"pictures/thumbs/folio015.gif", "pictures/jpm015.jpg", "", "83", "58",
"pictures/thumbs/folio016.gif", "pictures/jpm016.jpg", "", "83", "58",
"pictures/thumbs/folio017.gif", "pictures/jpm017.jpg", "", "83", "58",
"pictures/thumbs/folio018.gif", "pictures/jpm018.jpg", "", "83", "58",
"pictures/thumbs/folio019.gif", "pictures/jpm019.jpg", "", "83", "58",
"pictures/thumbs/folio020.gif", "pictures/jpm020.jpg", "", "83", "58"
);
//-->
</script>
<!-- InstanceEndEditable -->
<script language="JavaScript" type="text/JavaScript">
<!--
// Example: obj = findObj("image1");
function findObj(theObj, theDoc)
{
var p, i, foundObj;
if(!theDoc) theDoc = document;
if( (p = theObj.indexOf("?")) > 0 && parent.frames.length)
{
theDoc = parent.frames[theObj.substring(p+1)].document;
theObj = theObj.substring(0,p);
}
if(!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj];
for (i=0; !foundObj && i < theDoc.forms.length; i++)
foundObj = theDoc.forms[i][theObj];
for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++)
foundObj = findObj(theObj,theDoc.layers[i].document);
if(!foundObj && document.getElementById) foundObj = document.getElementById(theObj);
return foundObj;
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<script language="JavaScript" src="scroll.js" type="text/JavaScript"></script>
<script language="JavaScript">
<!--
var hideGallery=false;
//-->
</script>
<!-- InstanceBeginEditable name="head" --><!-- InstanceEndEditable -->
</HEAD>
<BODY BGCOLOR=#C0C0C0 LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 onLoad="buildStrip();MM_preloadImages('')">
<div align="center">
<table border="0" width="100" height="25">
<tr>
<td align="center"> </td>
</tr>
</table>
</div>
<!-- ImageReady Slices (new layout 1c.psd) -->
<div align="center">
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 bgcolor="#FFFFFF" width="960">
<TR>
<TD COLSPAN=4>
<div align="center">
<table border="0" width="100" height="5" cellspacing="0" cellpadding="0">
<tr>
<td height="5"></td>
</tr>
</table>
</div>
</TD>
</TR>
<TR>
<TD COLSPAN=4>
<div align="center">
<table border="0" width="900" cellspacing="0" cellpadding="0">
<tr>
<td width="229">
<IMG SRC="gfx/logo.gif"></td>
<td width="124"><a href="foliohome.htm">
<img border="0" src="gfx/folio.gif" width="81" height="34"></a></td>
<td><a href="placehome.htm">
<img border="0" src="gfx/places.gif" width="81" height="34" align="right"></a></td>
<td width="91"><a href="peophome.htm">
<img border="0" src="gfx/peoples.gif" width="81" height="34" align="right"></a></td>
<td width="92"><a href="contact.htm">
<img border="0" src="gfx/contacts.gif" width="81" height="34" align="right"></a></td>
</tr>
</table>
</div>
</TD>
</TR>
<TR>
<TD> <IMG SRC="gfx/left.gif"></TD>
<TD> </TD>
<TD width="900" height="615"> <img style="border-style: solid; border-width: 0px; border-color: white" src="gfx/loading.gif" width=900 height=615 alt="" id="mainPic"></TD>
<TD > <font size="1" face="Verdana, Arial, Helvetica, sans-serif" color="#c0c0c0"><span id="mainPicTitle"></span></font>
<img border="0" src="gfx/right.gif" width="28" height="615"></TD>
</TR>
<TR>
<TD COLSPAN=4 align="center"> <span id="scrollHolder"></span></TD>
</TR>
<TR>
<TD COLSPAN=4>
<p align="center">
<IMG SRC="gfx/white.gif" WIDTH=731 HEIGHT=1 ALT=""></TD>
</TR>
</TABLE>
</div>
<!-- End ImageReady Slices -->
<!-- InstanceBeginEditable name="post body" --><!-- InstanceEndEditable -->
</BODY>
<!-- InstanceEnd -->
<!-- -->
</HTML>