Morning all,

I have a nifty little slider hacked and slashed in a frankenstein sort of fashion that does exactly what I want..... BUT..... I need 4 on a page and the scripts just arent playing ball

The problem I have is that on it's own my slider is perfectly happy sliding up and down and firing values off via an AJAX call, but how can I logically duplicate the slider and relevant code so that I can have more than 1?

Here is some code:

Code JavaScript:
/* slider functions - contrast */
var setPct = 100; 
var curPct = null; 
var activeSlide = null; 
var slideLeft = null; 
document.onmousemove = doMove; 
function doMove(e) { 
if (!activeSlide) 
var e = (e)? e : ((event)? event : null); 
if (e.pageX) { 
myX = e.pageX; 
} else if (e.clientX) { 
myX = e.clientX; 
var myLeft = (myX - slideLeft); 
curPct = parseInt(myLeft/2); 
if (curPct > 100) 
return hideStuff(activeSlide); 
var slider = document.getElementById(activeSlide); = myLeft + "px"; 
function showStuff(myID, theID) { 
	activeSlide = theID; 
	var myNode = document.getElementById(myID); 
	slideLeft = findX(myNode); 
var slider = document.getElementById(theID); = "block"; 
function hideStuff(theID) { 
	activeSlide = null; 
	slideLeft = null; 
	var slider = document.getElementById(theID); = "none"; 
function pctShow(theNum) { 
	var label = document.getElementById("pctLabel"); 
	label.innerHTML = theNum + "%"; 
function pctSet(myID, theID) { 
	var theNode = document.getElementById(myID); 
	var myWidth = theNode.offsetWidth; 
	var myLeft = parseInt(myWidth * (curPct/100)); 
	var setNode = document.getElementById(theID); = "block"; = myLeft +"px"; 
	setPct = curPct; 
function findX(obj) { 
	var curleft = 0; 
	while (obj.offsetParent) { 
	curleft += obj.offsetLeft 
	obj = obj.offsetParent; 
	return curleft; 

and here is the slider:
Code HTML4Strict:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
* { 
	color: #333333; 
	font-family: Arial, Verdana, Helvetica, sans-serif; 
	font-size: 12px; 
	font-weight: normal; 
	font-variant: normal; 
	letter-spacing: normal; 
	text-decoration: none; 
	margin: 0px; 
	padding: 0px; 
body { 
	margin: 25px; 
.outerSlide { 
	width: 200px; 
	_width: 202px; 
	height: 10px; 
	_height: 12px; 
	line-height: 10px; 
	font-size: 1px; 
	background: url('slider_bg.png') repeat-x center left; 
	float: left; 
.innerSlide { 
	width: 100%; 
	height: 100%; 
	font-size: 1px; 
	background-color: transparent; 
	position: relative; 
	left: 0px; 
	top: 0px; 
.slideBar { 
	display: none; 
	width: 5px;
	border-left: 1px groove #909090; 
	border-bottom: 1px solid #909090; 
	height: 10px; 
	line-height: 10px; 
	font-size: 1px; 
	background-color: #a4a4a4; 
	position: relative; 
	left: 0px; 
	top: 0px; 
	_margin-left: -2px; 
#slideSet { 
	background:  #ff00ff;
	width: 2px;
	margin-top: -10px; 
#slideSet_g { 
	background:  #ff00ff;
	width: 2px;
	margin-top: -10px; 
<script type="text/javascript" src="js/ajaxFunction.js"></script> 
<div id="slideWrap" class="outerSlide" onmouseout="hideStuff('slider')"> 
<div id="slideMain" class="innerSlide" onmouseover="showStuff(, 'slider')" onmouseout="hideStuff('slider')" onclick="pctSet(, 'slideSet'); getText();"> 
<div class="slideBar" id="slider"></div> 
<div class="slideBar" id="slideSet"></div> 
<div id="pctLabel">100%</div>
<br />GGGGG<br />
<div id="slideWrap_g" class="outerSlide" onmouseout="hideStuff('slider_g')"> 
<div id="slideMain_g" class="innerSlide" onmouseover="showStuff(, 'slider_g')" onmouseout="hideStuff('slider_g')" onclick="pctSet(, 'slideSet_g'); getText_g();"> 
<div class="slideBar" id="slider_g"></div> 
<div class="slideBar" id="slideSet_g"></div> 
<div id="pctLabel_g">100%</div>
<div id="displayImg">img</div>

Sorry for the length of it but if anyone else is looking for something similar they can get it all

Cheers folks