Duplicating a CSS/ Javascript Slider

**spikeZ** · Jun 12, 2007, 23:38

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:

Javascript:

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) 
return; 
 
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); 
 
pctShow(curPct); 
 
var slider = document.getElementById(activeSlide); 
	slider.style.left = myLeft + "px"; 
} 
 
function showStuff(myID, theID) { 
	activeSlide = theID; 
 
	var myNode = document.getElementById(myID); 
	slideLeft = findX(myNode); 
 
var slider = document.getElementById(theID); 
	slider.style.display = "block"; 
} 
 
function hideStuff(theID) { 
	activeSlide = null; 
	slideLeft = null; 
	pctShow(setPct); 
 
	var slider = document.getElementById(theID); 
	slider.style.display = "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); 
	setNode.style.display = "block"; 
	setNode.style.left = 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"> 
<html> 
<head> 
<style> 
* { 
	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; 
}
</style> 
<script type="text/javascript" src="js/ajaxFunction.js"></script> 
</head> 
<body> 
<div id="slideWrap" class="outerSlide" onmouseout="hideStuff('slider')"> 
<div id="slideMain" class="innerSlide" onmouseover="showStuff(this.id, 'slider')" onmouseout="hideStuff('slider')" onclick="pctSet(this.id, 'slideSet'); getText();"> 
<div class="slideBar" id="slider"></div> 
</div> 
<div class="slideBar" id="slideSet"></div> 
</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(this.id, 'slider_g')" onmouseout="hideStuff('slider_g')" onclick="pctSet(this.id, 'slideSet_g'); getText_g();"> 
<div class="slideBar" id="slider_g"></div> 
</div> 
<div class="slideBar" id="slideSet_g"></div> 
</div> 
<div id="pctLabel_g">100%</div>
 
 
<div id="displayImg">img</div>
</body>
</html>

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

Cheers folks
Spike

**spikeZ** · Jun 13, 2007, 11:45

I think I just saw Elvis in here

**spikeZ** · Jun 13, 2007, 23:26

Ladies and Gentlemen, Elvis has left the building......

anyone?!

**Kravvitz** · Jun 14, 2007, 17:11

Is FleXcroll, Flexible and Accessible Custom Scroll Bars what you want?

**spikeZ** · Jun 15, 2007, 00:04

Hi Kravvitz and thanks for replying

Unfortunately no, the FleXroll is the scroll bar adaptation for div elements etc. What I have is a slider input control for selecting a value from 1 - 100 on a sliding scale.
similar to http://webfx.eae.net/dhtml/slider/slider.html but not that one as I didnt get on with it

The SitePoint Forums have moved.

User Tag List

Thread: Duplicating a CSS/ Javascript Slider

Thread Tools

Display

Duplicating a CSS/ Javascript Slider

Bookmarks

Bookmarks

Posting Permissions