Malcovic
10-19-2006, 11:32 PM
Hi All,
I've written a picture viewing application using DOM. It works as expected in IE, but not in Mozilla Firefox. Can anyone tell me why? I'm new to DOM. Here's the code:
<script language='javascript' src='master.js'></script>
<script language='javascript'>
range = 7;
images = photos;
links = new Array();
counter = 0;
function changeImage(direction) {
if (direction == 0)
counter --;
else if (direction == 1)
counter ++;
reset();
var image_url = images[counter];
document.image_1.src='images/' + image_url;
}
function showImage(index) {
var image_url = images[index];
document.image_1.src='images/' + image_url;
counter = index;
link = links[counter];
reset();
}
function reset() {
//alert('reset() counter: ' + counter);
if (counter - 3 >= 0 && counter + 4 <= links.length) {
//alert('counter - 3: ' + (counter - 3) + ' counter + 4: ' + (counter + 4) + '\links.length: ' + links.length);
while (links_cell.hasChildNodes())
links_cell.removeChild(links_cell.lastChild);
setList(counter - 3, counter + 4);
}
if (counter > links.length - 4) {
while (links_cell.hasChildNodes())
links_cell.removeChild(links_cell.lastChild);
setList(links.length - range, links.length);
}
link = links[counter];
link.setActive();
backLink = document.getElementById('back');
forwardLink = document.getElementById('forward');
if (counter == 0)
backLink.removeAttribute('href');
else
backLink.setAttribute('href', 'javascript:changeImage(0)');
if (counter == 11)
forwardLink.removeAttribute('href');
else
forwardLink.setAttribute('href', 'javascript:changeImage(1)');
}
function initList() {
links_cell = document.getElementById('links_list');
while (links_cell.hasChildNodes())
links_cell.removeChild(links_cell.lastChild);
if (images.length < range)
range = images.length;
for (i = 0; i < images.length; i++) {
image_link = document.createElement('a');
image_link.setAttribute('id', i);
image_link.setAttribute('href', 'javascript:showImage(' + i + ')');
image_link.appendChild(document.createTextNode(i + 1));
links[i] = image_link;
if (i < range) {
links_cell.appendChild(image_link);
spacer = document.createElement('b');
spacer.appendChild(document.createTextNode(' '));
links_cell.appendChild(spacer);
}
if (i == 0)
image_link.setActive();
}
showImage(0);
}
function goToFinish() {
while (links_cell.hasChildNodes())
links_cell.removeChild(links_cell.lastChild);
setList(links.length - range, links.length);
link = links[links.length - 1];
link.setActive();
}
function setList(start, finish) {
//alert('setList: ' + start + ', ' + finish);
links_cell = document.getElementById('links_list');
for (i = start; i < finish; i++) {
link = links[i];
links_cell.appendChild(link);
spacer = document.createElement('b');
spacer.appendChild(document.createTextNode(' '));
links_cell.appendChild(spacer);
}
}
</script>
"photos" is an array of file names in "master.js"
The page has a table where the photos are displayed:
<table>
<tr>
<td colspan=5>
<img name=image_1 src='' height=150 width=250>
</td>
<tr>
<td align=left>
<a href='javascript:initList();'>start</a>
</td>
<td align=left>
<a href='javascript:changeImage(0);' id='back'><</a>
</td>
<td id=links_list align=center>
</td>
<td align=right>
<a href='javascript:changeImage(1);' id='forward'>></a>
</td>
<td align=right>
<a href='javascript:goToFinish();' id='back'>finish</a>
</td>
</tr>
</table>
... and in <body> tag:
<body onload=initList();showImage(0)>
The idea is to have a list of the numbers of the photos, where clicking a number displays the photo. The ">" link goes forward through the list, displaying each photo, the "<" is the same, but going backwards. The middle 7 photo numbers only are displayed, and the list adjusts accordingly as the various links are clicked.
Any help is much appreciated!
M.
I've written a picture viewing application using DOM. It works as expected in IE, but not in Mozilla Firefox. Can anyone tell me why? I'm new to DOM. Here's the code:
<script language='javascript' src='master.js'></script>
<script language='javascript'>
range = 7;
images = photos;
links = new Array();
counter = 0;
function changeImage(direction) {
if (direction == 0)
counter --;
else if (direction == 1)
counter ++;
reset();
var image_url = images[counter];
document.image_1.src='images/' + image_url;
}
function showImage(index) {
var image_url = images[index];
document.image_1.src='images/' + image_url;
counter = index;
link = links[counter];
reset();
}
function reset() {
//alert('reset() counter: ' + counter);
if (counter - 3 >= 0 && counter + 4 <= links.length) {
//alert('counter - 3: ' + (counter - 3) + ' counter + 4: ' + (counter + 4) + '\links.length: ' + links.length);
while (links_cell.hasChildNodes())
links_cell.removeChild(links_cell.lastChild);
setList(counter - 3, counter + 4);
}
if (counter > links.length - 4) {
while (links_cell.hasChildNodes())
links_cell.removeChild(links_cell.lastChild);
setList(links.length - range, links.length);
}
link = links[counter];
link.setActive();
backLink = document.getElementById('back');
forwardLink = document.getElementById('forward');
if (counter == 0)
backLink.removeAttribute('href');
else
backLink.setAttribute('href', 'javascript:changeImage(0)');
if (counter == 11)
forwardLink.removeAttribute('href');
else
forwardLink.setAttribute('href', 'javascript:changeImage(1)');
}
function initList() {
links_cell = document.getElementById('links_list');
while (links_cell.hasChildNodes())
links_cell.removeChild(links_cell.lastChild);
if (images.length < range)
range = images.length;
for (i = 0; i < images.length; i++) {
image_link = document.createElement('a');
image_link.setAttribute('id', i);
image_link.setAttribute('href', 'javascript:showImage(' + i + ')');
image_link.appendChild(document.createTextNode(i + 1));
links[i] = image_link;
if (i < range) {
links_cell.appendChild(image_link);
spacer = document.createElement('b');
spacer.appendChild(document.createTextNode(' '));
links_cell.appendChild(spacer);
}
if (i == 0)
image_link.setActive();
}
showImage(0);
}
function goToFinish() {
while (links_cell.hasChildNodes())
links_cell.removeChild(links_cell.lastChild);
setList(links.length - range, links.length);
link = links[links.length - 1];
link.setActive();
}
function setList(start, finish) {
//alert('setList: ' + start + ', ' + finish);
links_cell = document.getElementById('links_list');
for (i = start; i < finish; i++) {
link = links[i];
links_cell.appendChild(link);
spacer = document.createElement('b');
spacer.appendChild(document.createTextNode(' '));
links_cell.appendChild(spacer);
}
}
</script>
"photos" is an array of file names in "master.js"
The page has a table where the photos are displayed:
<table>
<tr>
<td colspan=5>
<img name=image_1 src='' height=150 width=250>
</td>
<tr>
<td align=left>
<a href='javascript:initList();'>start</a>
</td>
<td align=left>
<a href='javascript:changeImage(0);' id='back'><</a>
</td>
<td id=links_list align=center>
</td>
<td align=right>
<a href='javascript:changeImage(1);' id='forward'>></a>
</td>
<td align=right>
<a href='javascript:goToFinish();' id='back'>finish</a>
</td>
</tr>
</table>
... and in <body> tag:
<body onload=initList();showImage(0)>
The idea is to have a list of the numbers of the photos, where clicking a number displays the photo. The ">" link goes forward through the list, displaying each photo, the "<" is the same, but going backwards. The middle 7 photo numbers only are displayed, and the list adjusts accordingly as the various links are clicked.
Any help is much appreciated!
M.