javascript+ why dont my links work in firefox [Archive]

cscwebmaster

04-29-2009, 10:45 AM

hello,
I really would appreciate some pointers on this I have a numbered image gallery which also has a back and forward link to go through the images the problem i'm having is that in firefox these links don't work but in IE all is fine...anyway i really would appreciate some advice thanks for your time.
here is the code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>

<head>

<title>photo gallery 1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" type="text/css" href="../css/gallery.css">

<script type="text/javascript">
var currentImage = 1;

function LoadGallery(picNum, captionText)
{
var footer = document.getElementById("footer");
// get the array of all <a> elements in the footer:
var links = footer.getElementsByTagName("a");
// and unclick (change color back to normal) of the current link:
links[currentImage].style.color = "#ffffff";

// then change which is current image
currentImage = picNum; // save current picture number
// and change color of new current link:
links[currentImage].style.color = "#ff9900";

// rest the same
var picture = document.getElementById("illustration2");
if (picture.filters)
{
picture.style.filter="blendTrans(duration=1)";
picture.filters.blendTrans.Apply();
}
picture.src = "../images/illustration2/" + picNum + ".jpg";
if (picture.filters)
{
picture.filters.blendTrans.Play();
}
document.getElementById("topbar").innerHTML = captionText;

return false; // cancel the click
}

function moveBy(what)
{
// where is user asking us to move to??
var moveTo = currentImage + what;
if ( moveTo < 1 || moveTo > 20 ) return; // can't move too far left or right

var footer = document.getElementById("footer");
// get the array of all <a> elements in the footer:
var links = footer.getElementsByTagName("a");
// and then click on that link:
links[moveTo].click( );

return false; // cancel the click
}
</script>

<script type="text/JavaScript">
function activate(link){
if(document.getElementById)
document.getElementById(link).focus();
else if (document.all)
document.all(link).focus();
}
</script>

</head>

<body onload="activate('act');">


<div id="wrapper">


<div id="topbar" class="center"><a href="1.jpg">Hairy (HRY) Clothing - Brand Identity
</a> </div>

<div id="content_holder">

<div id="content_box2"><img src="../images/illustration2/1.jpg" name="illustration2" width="666" height="450" id="illustration2"> </div>

<div id="footer" align="center">
<a href="#" onclick="return moveBy(-1)"><</a>  

<a href="#" id="act" onfocus="this.style.color='ff9900'" onblur="this.style.color=''"
onclick="return LoadGallery(1,'Hairy (HRY) Clothing - Brand Identity')">1</a>
- <a href="#" onclick="return LoadGallery(2,'Hairy - Poster')">2</a>
- <a href="#" onclick="return LoadGallery(3,'Hairy (HRY) Clothing - Brand Identity')">3</a>
- <a href="#" onclick="return LoadGallery(4,'Hairy - Promotional Card')">4</a>
- <a href="#" onclick="return LoadGallery(5,'Hairy - T-shirt Packaging')">5</a>
- <a href="#" onclick="return LoadGallery(6,'T-shirt - Monk')">6</a>
- <a href="#" onclick="return LoadGallery(7,'T-shirt - Monk')">7</a>
- <a href="#" onclick="return LoadGallery(8,'T-shirt - Bobby')">8</a>
- <a href="#" onclick="return LoadGallery(9,'T-shirt - Bobby')">9</a>
- <a href="#" onclick="return LoadGallery(10,'T-shirt - Siamese')">10</a>
- <a href="#" onclick="return LoadGallery(11,'Hairy - Web site')">11</a>
- <a href="#" onclick="return LoadGallery(12,'Pilot - Brown Shipley Bank')">12</a>
- <a href="#" onclick="return LoadGallery(13,'Half an Orange - Brown Shipley Bank')">13</a>
- <a href="#" onclick="return LoadGallery(14,'Bar Promotion - Poster')">14</a>
- <a href="#" onclick="return LoadGallery(15,'Bar Promotion - Poster')">15</a>
- <a href="#" onclick="return LoadGallery(16,'Bar Promotion – Food & Drink Menu')">16</a>
- <a href="#" onclick="return LoadGallery(17,'Rachel – Promotional')">17</a>
- <a href="#" onclick="return LoadGallery(18,'Syringes - Pro-Cycling')">18</a>
- <a href="#" onclick="return LoadGallery(19,'Stav - Promotional')">19</a>
- <a href="#" onclick="return LoadGallery(20,'Rick – Rothesay Pension Management, Pitch')">20</a>

these are the links that are not working
  <a href="#" onclick="return moveBy(+1)">></a> this is the link
  <a href="../../index.html" target="_parent">[ home ]</a> </div>
</div>

</div>


</body>
</html>

jscheuer1

04-29-2009, 05:04 PM

There could be other problems, but the .click() method is not supported in Firefox:

function moveBy(what)
{
// where is user asking us to move to??
var moveTo = currentImage + what;
if ( moveTo < 1 || moveTo > 20 ) return; // can't move too far left or right

var footer = document.getElementById("footer");
// get the array of all <a> elements in the footer:
var links = footer.getElementsByTagName("a");
// and then click on that link:
links[moveTo].click( );

return false; // cancel the click
}

Try:

function moveBy(what)
{
// where is user asking us to move to??
var moveTo = currentImage + what;
if ( moveTo < 1 || moveTo > 20 ) return; // can't move too far left or right

var footer = document.getElementById("footer");
// get the array of all <a> elements in the footer:
var links = footer.getElementsByTagName("a");
// and then click on that link:
links[moveTo].onclick();

return false; // cancel the click
}

This is supported in IE and Firefox, most if not all others. It's more specific than .click(), but is plenty general enough for what you are doing here.