manicdiggity
asked on
Need help getting Javascript to work in Firefox
Hello, I am trying to update a simple home page slider in JS. I kind of have it working, but am having 2 problems:
1) The left arrow doesn't work when you first refresh the page. If you click on the right arrows, then the left ones start working.
2) The right arrows work fine in IE and Chrome, however for some reason you have to click a few times in Firefox to get it working. How can I fix this?
1) The left arrow doesn't work when you first refresh the page. If you click on the right arrows, then the left ones start working.
2) The right arrows work fine in IE and Chrome, however for some reason you have to click a few times in Firefox to get it working. How can I fix this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title></title>
<script language="javascript">// JavaScript Document
var bodyIntervalId = 0;
var sliderIntervalId = 0;
var slider;
var leftpix = 0;
var maxwidth = 408;
var sliding = false;
var amount = 204;
var count = 0;
function initialize()
{
var bodyIntervalId = setInterval('Slide(1)', 3000);
}
function Slide(inc)
{
if (sliding) { return; }
if (inc == "") { inc = 1; }
count++;
// give up after a while
if (count > 20) clearInterval(bodyIntervalId);
sliding = true;
leftpix -= inc * amount;
var limit = (maxwidth - amount) * -1;
if (leftpix < limit)
{
leftpix = 0;
slider.style.left = leftpix + 'px';
sliding = false;
return;
}
if (leftpix > 0)
{
leftpix = limit;
slider.style.left = leftpix + 'px';
sliding = false;
return;
}
if (inc > 0)
{
sliderIntervalId = setInterval('MoveRight()', 10);
}
else
{
sliderIntervalId = setInterval('MoveLeft()', 10);
}
}
function MoveRight()
{
slider = document.getElementById('testSlider');
var left = slider.style.left.replace('px','');
if (left > leftpix)
{
left = left - 17;
slider.style.left = left + 'px';
}
else
{
sliding = false;
clearInterval(sliderIntervalId);
}
}
function MoveLeft()
{
slider = document.getElementById('testSlider');
var left = slider.style.left.replace('px','');
if (left < leftpix)
{
left = (left * 1) + 17;
slider.style.left = left + 'px';
}
else
{
sliding = false;
clearInterval(sliderIntervalId);
}
}</script>
</head>
<body>
<div style="float:left; width:20px; height:133px; padding-top:20px; text-align:left;"><a href="javascript:Slide(-1);"><<</a></div>
<div style="float:left; width:204px; height:200px; overflow:hidden; position:relative;">
<div id="testSlider" style="width:408px; position:absolute; top:0; left:0;">
<div style="float:left; width:204px; text-align:center; vertical-align:middle;">
<a id="test1" href="/">TEST 1</a><br /><br />
</div>
<div style="float:left; width:204px; text-align:center; vertical-align:middle;">
<a id="test2" href="/">TEST 2</a><br /><br />
</div>
</div>
</div>
<div style="float:left; width:20px; height:133px; padding-top:20px; text-align:right;"><a href="javascript:Slide(1);">>></a></a></div>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
The solution still wasn't working 100% in Firefox, but I got the problem solved in another post.
Open in new window