uriel
03-20-2006, 02:50 AM
I've been working for a few weeks (my javascript wasn't up-to-date) on a gallery page for javascript. I host several websites, but wanted to make sure the gallery worked well on free hosts. I've gotten all but one of the functions I want to work properly.
The webmaster defines an array of the images to be displayed in the gallery. Users can click thumbnails to move along the gallery or use arrows to move left or right. They can also click an "event" link which takes them to a certain point in the image array. Every image is numbered (via the array) and the number is displayed below the thumbnail. All these functions work.
The function I'm struggling with is a simple third function. I want the user to be able to type a value into a textbox and click "go" and then go to the correct image. The event's features uses a function that allows for moving to a predefined place on the array so I should be able to just plug into that function. Right now I was using a large main function "move" to do all the swiching involved with the numbers and thumbnails. That works flawlessly. The second function is the event one "jump" which calls the move function once it's done a few simple things. The third function "GitGoin," is giving me trouble. It pulls the value from the text input area and then calls the jump function which in turn goes through the move function. I don't know if nesting the functions like that is the problem but somewhere along the line the thing is being thrown.
To see the error type in a number (say "5") into the text box at the top right of the page and hit "go." The numbers below the thumbnails will increment bizarrely and the images will break. If you type in a value outside of the bounds of the array (6 element array) the move function will force a usable value in place of what you've entered and the system will work properly.
Here's the file (with fun paint images as placeholders).
Link (http://www.freewebs.com/mmmich/PoC%2DjumperForm.htm)
The images are hosted free on photobucket so they might not load lightning fast; give them 5 seconds.
Entirety of page code below:
<html>
<HEAD>
<script language="Javascript">
//array containing names of images
stringsrc = new Array();
stringsrc[1] = "image01.gif";
stringsrc[2] = "image02.gif";
stringsrc[3] = "image03.gif";
stringsrc[4] = "image04.gif";
stringsrc[5] = "image05.gif";
stringsrc[6] = "image06.gif";
//folder location
fldr = "http://img.photobucket.com/albums/v71/LOMHawkeye/icons/";
//thumbnail prefix
pfx = "th_";
//index variable referring to location on array
index = 3;
//figures out value where we need to circulate back to the bottom of the array
sslength = stringsrc.length;
barely = sslength -2;
almost = sslength -1;
function move (hubris)
{
//checks for non numbers
if (isNaN(hubris))
{
alert("Shiite Muslims!");
}
//increment index
index = index+hubris;
//makes sure we remain in bounds
if (index==sslength)
index=1;
if (index==sslength+1)
index=2;
if (index==0)
index=sslength-1;
if (index==-1)
index=sslength-2;
switch (index)
{
//for second to last image
case barely:
document.images.hole1.src = fldr + pfx + stringsrc[index-2]
document.images.hole2.src = fldr + pfx + stringsrc[index-1]
document.images.hole3.src = fldr + pfx + stringsrc[index]
document.images.hole4.src = fldr + pfx + stringsrc[index+1]
document.images.hole5.src = fldr + pfx + stringsrc[1]
document.images.biggie.src = fldr + stringsrc[index]
document.getElementById('numHole1').innerHTML=index-2
document.getElementById('numHole2').innerHTML=index-1
document.getElementById('numHole3').innerHTML=index
document.getElementById('numHole4').innerHTML=index+1
document.getElementById('numHole5').innerHTML=1
break;
//for last image
case almost:
document.images.hole1.src = fldr + pfx + stringsrc[index-2]
document.images.hole2.src = fldr + pfx + stringsrc[index-1]
document.images.hole3.src = fldr + pfx + stringsrc[index]
document.images.hole4.src = fldr + pfx + stringsrc[1]
document.images.hole5.src = fldr + pfx + stringsrc[2]
document.images.biggie.src = fldr + stringsrc[index]
document.getElementById('numHole1').innerHTML=index-2
document.getElementById('numHole2').innerHTML=index-1
document.getElementById('numHole3').innerHTML=index
document.getElementById('numHole4').innerHTML=1
document.getElementById('numHole5').innerHTML=2
break;
//for second image
case 2:
document.images.hole1.src = fldr + pfx + stringsrc[sslength-1]
document.images.hole2.src = fldr + pfx + stringsrc[1]
document.images.hole3.src = fldr + pfx + stringsrc[2]
document.images.hole4.src = fldr + pfx + stringsrc[3]
document.images.hole5.src = fldr + pfx + stringsrc[4]
document.images.biggie.src = fldr + stringsrc[2]
document.getElementById('numHole1').innerHTML=sslength-1
document.getElementById('numHole2').innerHTML=1
document.getElementById('numHole3').innerHTML=2
document.getElementById('numHole4').innerHTML=3
document.getElementById('numHole5').innerHTML=4
break;
//for first image
case 1:
document.images.hole1.src = fldr + pfx + stringsrc[sslength-2]
document.images.hole2.src = fldr + pfx + stringsrc[sslength-1]
document.images.hole3.src = fldr + pfx + stringsrc[1]
document.images.hole4.src = fldr + pfx + stringsrc[2]
document.images.hole5.src = fldr + pfx + stringsrc[3]
document.images.biggie.src = fldr + stringsrc[1]
document.getElementById('numHole1').innerHTML=sslength-2
document.getElementById('numHole2').innerHTML=sslength-1
document.getElementById('numHole3').innerHTML=1
document.getElementById('numHole4').innerHTML=2
document.getElementById('numHole5').innerHTML=3
break;
//all other cases
default:
document.images.hole1.src = fldr + pfx + stringsrc[index-2]
document.images.hole2.src = fldr + pfx + stringsrc[index-1]
document.images.hole3.src = fldr + pfx + stringsrc[index]
document.images.hole4.src = fldr + pfx + stringsrc[index+1]
document.images.hole5.src = fldr + pfx + stringsrc[index+2]
document.images.biggie.src = fldr + stringsrc[index]
//for giving the image numbers
document.getElementById('numHole1').innerHTML=index-2
document.getElementById('numHole2').innerHTML=index-1
document.getElementById('numHole3').innerHTML=index
document.getElementById('numHole4').innerHTML=index+1
document.getElementById('numHole5').innerHTML=index+2
break;
}
}
function jump (kablooie)
{
if (kablooie>almost)
kablooie=almost;
if (kablooie<1)
kablooie=1;
index=kablooie;
move(0);
}
function GitGoin()
{
run = document.GoImgGo.GoToVal.value;
jump(run);
}
</script>
</HEAD>
<Body onload="move(0);">
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" align="left" valign="bottom">
<form name="GoImgGo" style="margin-bottom: 0;">
<img onclick="move(-1);" src="http://img.photobucket.com/albums/v71/LOMHawkeye/icons/navigationLarrow.jpg"> | Jump to (#):
<input name="GoToVal" size="1" type="text">
<input value="go" type="button" onclick="GitGoin()">
| <img onclick="move(1);" src="http://img.photobucket.com/albums/v71/LOMHawkeye/icons/navigationRarrow.jpg">
</form>
</td>
<td colspan="3" align="right">
<table border="0">
<tr>
<td onclick="jump(1);"><u>Event1</u></td><td>|</td>
<td onclick="jump(5);">Event2</td><td>|</td>
<td onclick="jump(51);">Event3</td><td>|</td>
<td onclick="jump(-12);">Event4</td>
</tr>
</table>
</td>
</tr><tr height="6"></tr>
<tr height="175">
<td align="center" width="160">
<img onclick="move(-2);" name="hole1">
<div align="center" ID="numHole1">1</div>
</td>
<td align="center" width="160"><img onclick="move(-1);" name="hole2"><div align="center" ID="numHole2">2</div></td>
<td align="center" bgcolor="#d3d3d3" width="160"><img name="hole3" border="2"><div align="center" ID="numHole3">3</div></td>
<td align="center" width="160"><img onclick="move(1);" name="hole4"><div align="center" ID="numHole4">4</div></td>
<td align="center" width="160"><img onclick="move(2);" name="hole5"><div align="center" ID="numHole5">5</div></td>
</tr>
<tr height="75">
<td colspan="5" bgcolor="#d3d3d3" id="commentSection"><p align="center">This is where the quick brown fox jumping over the lazy brown dog is made into an analogy involving mathematical theories describing the velocity function of a black hole relative to a sun who's movement relative to the earth is described in polar coordinates.</p>
</td>
</tr>
<tr>
<td colspan="5" bgcolor="#d3d3d3" align="center">
<img align="center" name="biggie" border="0">
</td>
</tr>
</table>
<!-- --><script type="text/javascript" src="/i.js"></script></body>
</html>
The webmaster defines an array of the images to be displayed in the gallery. Users can click thumbnails to move along the gallery or use arrows to move left or right. They can also click an "event" link which takes them to a certain point in the image array. Every image is numbered (via the array) and the number is displayed below the thumbnail. All these functions work.
The function I'm struggling with is a simple third function. I want the user to be able to type a value into a textbox and click "go" and then go to the correct image. The event's features uses a function that allows for moving to a predefined place on the array so I should be able to just plug into that function. Right now I was using a large main function "move" to do all the swiching involved with the numbers and thumbnails. That works flawlessly. The second function is the event one "jump" which calls the move function once it's done a few simple things. The third function "GitGoin," is giving me trouble. It pulls the value from the text input area and then calls the jump function which in turn goes through the move function. I don't know if nesting the functions like that is the problem but somewhere along the line the thing is being thrown.
To see the error type in a number (say "5") into the text box at the top right of the page and hit "go." The numbers below the thumbnails will increment bizarrely and the images will break. If you type in a value outside of the bounds of the array (6 element array) the move function will force a usable value in place of what you've entered and the system will work properly.
Here's the file (with fun paint images as placeholders).
Link (http://www.freewebs.com/mmmich/PoC%2DjumperForm.htm)
The images are hosted free on photobucket so they might not load lightning fast; give them 5 seconds.
Entirety of page code below:
<html>
<HEAD>
<script language="Javascript">
//array containing names of images
stringsrc = new Array();
stringsrc[1] = "image01.gif";
stringsrc[2] = "image02.gif";
stringsrc[3] = "image03.gif";
stringsrc[4] = "image04.gif";
stringsrc[5] = "image05.gif";
stringsrc[6] = "image06.gif";
//folder location
fldr = "http://img.photobucket.com/albums/v71/LOMHawkeye/icons/";
//thumbnail prefix
pfx = "th_";
//index variable referring to location on array
index = 3;
//figures out value where we need to circulate back to the bottom of the array
sslength = stringsrc.length;
barely = sslength -2;
almost = sslength -1;
function move (hubris)
{
//checks for non numbers
if (isNaN(hubris))
{
alert("Shiite Muslims!");
}
//increment index
index = index+hubris;
//makes sure we remain in bounds
if (index==sslength)
index=1;
if (index==sslength+1)
index=2;
if (index==0)
index=sslength-1;
if (index==-1)
index=sslength-2;
switch (index)
{
//for second to last image
case barely:
document.images.hole1.src = fldr + pfx + stringsrc[index-2]
document.images.hole2.src = fldr + pfx + stringsrc[index-1]
document.images.hole3.src = fldr + pfx + stringsrc[index]
document.images.hole4.src = fldr + pfx + stringsrc[index+1]
document.images.hole5.src = fldr + pfx + stringsrc[1]
document.images.biggie.src = fldr + stringsrc[index]
document.getElementById('numHole1').innerHTML=index-2
document.getElementById('numHole2').innerHTML=index-1
document.getElementById('numHole3').innerHTML=index
document.getElementById('numHole4').innerHTML=index+1
document.getElementById('numHole5').innerHTML=1
break;
//for last image
case almost:
document.images.hole1.src = fldr + pfx + stringsrc[index-2]
document.images.hole2.src = fldr + pfx + stringsrc[index-1]
document.images.hole3.src = fldr + pfx + stringsrc[index]
document.images.hole4.src = fldr + pfx + stringsrc[1]
document.images.hole5.src = fldr + pfx + stringsrc[2]
document.images.biggie.src = fldr + stringsrc[index]
document.getElementById('numHole1').innerHTML=index-2
document.getElementById('numHole2').innerHTML=index-1
document.getElementById('numHole3').innerHTML=index
document.getElementById('numHole4').innerHTML=1
document.getElementById('numHole5').innerHTML=2
break;
//for second image
case 2:
document.images.hole1.src = fldr + pfx + stringsrc[sslength-1]
document.images.hole2.src = fldr + pfx + stringsrc[1]
document.images.hole3.src = fldr + pfx + stringsrc[2]
document.images.hole4.src = fldr + pfx + stringsrc[3]
document.images.hole5.src = fldr + pfx + stringsrc[4]
document.images.biggie.src = fldr + stringsrc[2]
document.getElementById('numHole1').innerHTML=sslength-1
document.getElementById('numHole2').innerHTML=1
document.getElementById('numHole3').innerHTML=2
document.getElementById('numHole4').innerHTML=3
document.getElementById('numHole5').innerHTML=4
break;
//for first image
case 1:
document.images.hole1.src = fldr + pfx + stringsrc[sslength-2]
document.images.hole2.src = fldr + pfx + stringsrc[sslength-1]
document.images.hole3.src = fldr + pfx + stringsrc[1]
document.images.hole4.src = fldr + pfx + stringsrc[2]
document.images.hole5.src = fldr + pfx + stringsrc[3]
document.images.biggie.src = fldr + stringsrc[1]
document.getElementById('numHole1').innerHTML=sslength-2
document.getElementById('numHole2').innerHTML=sslength-1
document.getElementById('numHole3').innerHTML=1
document.getElementById('numHole4').innerHTML=2
document.getElementById('numHole5').innerHTML=3
break;
//all other cases
default:
document.images.hole1.src = fldr + pfx + stringsrc[index-2]
document.images.hole2.src = fldr + pfx + stringsrc[index-1]
document.images.hole3.src = fldr + pfx + stringsrc[index]
document.images.hole4.src = fldr + pfx + stringsrc[index+1]
document.images.hole5.src = fldr + pfx + stringsrc[index+2]
document.images.biggie.src = fldr + stringsrc[index]
//for giving the image numbers
document.getElementById('numHole1').innerHTML=index-2
document.getElementById('numHole2').innerHTML=index-1
document.getElementById('numHole3').innerHTML=index
document.getElementById('numHole4').innerHTML=index+1
document.getElementById('numHole5').innerHTML=index+2
break;
}
}
function jump (kablooie)
{
if (kablooie>almost)
kablooie=almost;
if (kablooie<1)
kablooie=1;
index=kablooie;
move(0);
}
function GitGoin()
{
run = document.GoImgGo.GoToVal.value;
jump(run);
}
</script>
</HEAD>
<Body onload="move(0);">
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" align="left" valign="bottom">
<form name="GoImgGo" style="margin-bottom: 0;">
<img onclick="move(-1);" src="http://img.photobucket.com/albums/v71/LOMHawkeye/icons/navigationLarrow.jpg"> | Jump to (#):
<input name="GoToVal" size="1" type="text">
<input value="go" type="button" onclick="GitGoin()">
| <img onclick="move(1);" src="http://img.photobucket.com/albums/v71/LOMHawkeye/icons/navigationRarrow.jpg">
</form>
</td>
<td colspan="3" align="right">
<table border="0">
<tr>
<td onclick="jump(1);"><u>Event1</u></td><td>|</td>
<td onclick="jump(5);">Event2</td><td>|</td>
<td onclick="jump(51);">Event3</td><td>|</td>
<td onclick="jump(-12);">Event4</td>
</tr>
</table>
</td>
</tr><tr height="6"></tr>
<tr height="175">
<td align="center" width="160">
<img onclick="move(-2);" name="hole1">
<div align="center" ID="numHole1">1</div>
</td>
<td align="center" width="160"><img onclick="move(-1);" name="hole2"><div align="center" ID="numHole2">2</div></td>
<td align="center" bgcolor="#d3d3d3" width="160"><img name="hole3" border="2"><div align="center" ID="numHole3">3</div></td>
<td align="center" width="160"><img onclick="move(1);" name="hole4"><div align="center" ID="numHole4">4</div></td>
<td align="center" width="160"><img onclick="move(2);" name="hole5"><div align="center" ID="numHole5">5</div></td>
</tr>
<tr height="75">
<td colspan="5" bgcolor="#d3d3d3" id="commentSection"><p align="center">This is where the quick brown fox jumping over the lazy brown dog is made into an analogy involving mathematical theories describing the velocity function of a black hole relative to a sun who's movement relative to the earth is described in polar coordinates.</p>
</td>
</tr>
<tr>
<td colspan="5" bgcolor="#d3d3d3" align="center">
<img align="center" name="biggie" border="0">
</td>
</tr>
</table>
<!-- --><script type="text/javascript" src="/i.js"></script></body>
</html>