[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 183
  • Last Modified:

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?
<!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>

Open in new window

0
manicdiggity
Asked:
manicdiggity
  • 2
1 Solution
 
Gurvinder Pal SinghCommented:
replace your code by 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;
		window.onload = function(){
			slider = document.getElementById('testSlider');
		}
		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()
		{
			
			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()
		{
			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>

Open in new window

0
 
manicdiggityAuthor Commented:
Hi, thanks, it mostly works except for Firefox.

In Firefox, I'm still seeing the same problem where you have to click the right arrow a few times before it starts to slide.
0
 
manicdiggityAuthor Commented:
The solution still wasn't working 100% in Firefox, but I got the problem solved in another post.
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now