Javascript's Journal

Javascript issue
Hello I am having what I think is a cross browser Javascript issue. I have a class that moves a page element around. Its not working in IE and I am not sure why. Any input is welcome. I am new to Javascript.

I get no errors in Firefox but I get an error from IE that says "Error: Object does'nt support this property or method".

I tested various things like "getElementById()" and "setInterval" in a test script in IE and they worked. I cant tell what property or method the error is referring to even when debugging with Visual Studio.

JS code

/*
	Slider Object ver 1
	Author :: steven.wright@intentmediaworks.net
	
	Usage
	
	1) Include the library into your HTML file
	
	2) Create a DIV tag as follows:
		<div id="myDiv" style="position:absolute; top:0; left:0;">DIV1</div>
		
	3) Add the following statement in script tags at the end of your HTML page or you can can add it as an init function on page load:
		myDiv = new slider('myDiv', 'closed', 10, 10, 10, 500, 20);
		
		myDiv = new slider(str = element id, str = state ( open | closed ), int = xClosed position, int = xOpen position, int = yClosed position, int = yOpen position, int = velocity);
		
		The name of the object must be the same as the div that you want to move.
		The higher the velocity the SLOWER the div will move.

4) Add the following to the element you want to use as the controller for the animation.
		onmousedown="myDiv.move();"
		
	
	Please update the usage if you change this file. Thanks.
	
*/

function slider(elemID, state, xClosed, xOpen, yClosed, yOpen, vel)
{
	this.elemID	= elemID;
	this.state	= state;
	
	this.xClosed	= xClosed;
	this.xOpen	= xOpen;		
	this.yClosed	= yClosed;
	this.yOpen	= yOpen;	
	
	// Figure out the distance to travel on the x axis and divide the distance by the velocity.
	// This gives us the increment for each axis
	this.xInc = Math.floor((xOpen - xClosed) / vel);
	this.yInc = Math.floor((yOpen - yClosed) / vel);
	
	// Set the start point of the anime depending on whether the init position is open or closed.
	if(this.state == 'open')
	{
		this.x 	= xOpen;
		this.y 	= yOpen;
	}
	else if(this.state == 'closed')
	{
		this.x 	= xClosed;
		this.y 	= yClosed;
	}
	
	this.interval	= null;

// set element to start position
	document.getElementById(elemID).style.left = this.x + 'px';
	document.getElementById(elemID).style.top = this.y + 'px';
	
	
	// This is the function that is called to move the object
	// It will call open or close depening on the current state of the object.
	this.move = function()
	{
		if(this.state == 'closed')
		{
			this.interval = window.setInterval(this.elemID+".open()", 10);
		}
		else if(this.state == 'open')
		{
			this.interval = window.setInterval(this.elemID+".close()", 10);
		}
	}
	
	// This function moves the element to it's open position.
	this.open = function()
	{
		// If the current position is less than or equal to the open position on both axis' 
		// then move the element and update the current position
		if(this.x <= this.xOpen && this.y <= yOpen)
		{
			document.getElementById(elemID).style.left = this.x + 'px';
			document.getElementById(elemID).style.top = this.y + 'px';
			this.x = this.x + this.xInc;
			this.y = this.y + this.yInc;
		}
		else // Set the element in its open position and clear the interval
		{
			document.getElementById(elemID).style.left = this.xOpen + 'px';
			document.getElementById(elemID).style.top = this.yOpen + 'px';
			window.clearInterval(this.interval);
			this.state = 'open';
			this.x = this.xOpen;
		}
	}
	
	// This function moves the element to it's closed position
	// See the open function for a description just reverse it.
	this.close = function()
	{
		if(this.x >= this.xClosed && this.y >= this.yClosed)
		{
			document.getElementById(elemID).style.left = this.x + 'px';
			document.getElementById(elemID).style.top = this.y + 'px';
			this.x = this.x - this.xInc;
			this.y = this.y - this.yInc;
		}
		else
		{
			document.getElementById(elemID).style.left = this.xClosed + 'px';
			document.getElementById(elemID).style.top = this.yClosed + 'px';
			window.clearInterval(this.interval);
			this.state = 'closed';
			this.x = this.xClosed;
		}		
	}
}

HTML Code

<html>
<head>
	<link href="DRM-Antplayer.css" rel="stylesheet" type="text/css" />
	<script content="text/javascript" src="DRMjs/slider.js"></script>
	<script content="text/javascript" src="DRMjs/printVar.js"></script>
</head>
	<script language="javascript" type="text/javascript">
		
	function initSliders()
	{
		Coverart= new slider('Coverart',  'open', 31, 31, -120, 7, 20); 
		Content = new slider('Content', 'open', 163, 163, -448,  41, 20);
	}
	/*		Sliders = new Array();
			
			Sliders['CoverartSlider'] = new slider('Coverart', 31, 7, 31, -110);
			Sliders['NavBarSlider'] = new slider('Controller-Bottom', 163, 17, 163, -1);
			Sliders['ContentSlider'] = new slider('Content', 163, 41, 163, -448);*/
	</script>
<body onload="initSliders();">

</div>
<div id="Button-Bar">
	<img src="DRMImages/BTN-RW.gif" />
	<img src="DRMImages/BTN-Play.gif" />
	<img src="DRMImages/BTN-Pause.gif" />
	<img src="DRMImages/BTN-Stop.gif" />
	<img src="DRMImages/BTN-FF.gif" />
	<img src="DRMImages/BTN-List.gif" />
	<img src="DRMImages/BTN-Buy.gif" />
</div>
<div id="Controller-Bottom">
	<table class="Nav" cellpadding="0" cellspacing="0" border="0">
		<tr><td height="8"> </td></tr>
		<tr>
			<td align="center"> 
				rate:
				<ul class='star-rating'>
				  <li><a href='#' title='Rate this 1 star out of 5' class='one-star'>1</a></li>
				  <li><a href='#' title='Rate this 2 stars out of 5' class='two-stars'>2</a></li>
				  <li><a href='#' title='Rate this 3 stars out of 5' class='three-stars'>3</a></li>
				  <li><a href='#' title='Rate this 4 stars out of 5' class='four-stars'>4</a></li>
				  <li><a href='#' title='Rate this 5 stars out of 5' class='five-stars'>5</a></li>
				</ul> 
				<span class="Nav-Button">New Releases</span>
				<span class="Nav-Button" onclick="moveSlider(ContentSlider);">Previews</span>
				<span class="Nav-Button">Promotions</span>
				<span class="Nav-Button">Publish</span>
			</td>
		</tr>
		<tr>
			<td><img src="DRMImages/Controller-Bottom.gif" /></td>
		</tr>
	</table>
</div>
<div id="Content">
</div>
</body>
</html>