DHTML Vertical Volume Slider Control... [Archive]

Pol NRG

10-18-2005, 05:27 PM

Hello everybody,

I'm trying to make a vertical volume control. As you see works but not at all... Please click with the left mouse button over the slider but move it to left to right <-> I just want a synchronization between the slider and the mouse pointer up and down.... I'm desperate :(

What's wrong!?
Please I need the help of an DHTML expert!

Thanks in advanced,
Pol ;)

<html>
<head>
<title>Untitled</title>
<style>

</style>

<SCRIPT LANGUAGE="JavaScript1.2">
function mutePlayer()
{
if (document.Player.Mute==0) {
document.Player.Mute = 1;
} else if (document.Player.Mute==1) {
document.Player.Mute = 0;
// document.Player.Play();
}
}

function startPlayer() {
document.Player.Play();
}

function stopPlayer() {
document.Player.Stop();
}

function pausePlayer() {
document.Player.Pause();
}

document.onmousedown=dragLayer
document.onmouseup=new Function("dragMe=false")

var Volume = new Array();
Volume[40] = "-10000";
Volume[39] = "-4000";
Volume[38] = "-3800";
Volume[37] = "-3600";
Volume[36] = "-3400";
Volume[35] = "-3200";
Volume[34] = "-3000";
Volume[33] = "-2900";
Volume[32] = "-2500";
Volume[31] = "-2400";
Volume[30] = "-2300";
Volume[29] = "-2000";
Volume[28] = "-1900";
Volume[27] = "-1900";
Volume[26] = "-1500";
Volume[25] = "-1200";
Volume[24] = "-1000";
Volume[23] = "-900";
Volume[22] = "-850";
Volume[21] = "-800";
Volume[20] = "-700";
Volume[19] = "-600";
Volume[18] = "-550";
Volume[17] = "-450";
Volume[16] = "-400";
Volume[15] = "-350";
Volume[14] = "-300";
Volume[13] = "-250";
Volume[12] = "-200";
Volume[11] = "-150";
Volume[10] = "-100";
Volume[9] = "-90";
Volume[8] = "-80";
Volume[7] = "-70";
Volume[6] = "-60";
Volume[5] = "-50";
Volume[4] = "-40";
Volume[3] = "-30";
Volume[2] = "-20";
Volume[1] = "-10";
Volume[0] = "0";

function AdjustVolume() {
ind = Math.round(showPerc/140)
document.Player.Volume = Volume[ind];
}

var dragMe=false, kObj, yPos,direction
function moveLayer() {
if (event.button==1 && dragMe) {
oldY = kObj.style.pixelTop; kObj.style.pixelTop=temp2+event.clientX-yPos;
if (kObj.style.pixelTop > oldY) direction="dn"; else direction="up";
if (kObj.style.pixelTop < 2 && direction=="up") {kObj.style.pixelTop=2; direction="dn";}
if (kObj.style.pixelTop > 102 && direction=="dn") {kObj.style.pixelTop=102; direction="up";}
sPosition=kObj.style.pixelTop; showPerc = (sPosition-2)/2*100;
AdjustVolume();
return false; }
}
function dragLayer() {
if (!document.all) return;
if (event.srcElement.className=="drag") {dragMe=true; kObj=event.srcElement; temp2=kObj.style.pixelTop; yPos=event.clientX; document.onmousemove=moveLayer; }
}
</script>
</head>

<body>
<BR><BR>
<INPUT TYPE="button" VALUE="Play" onclick="startPlayer();"> <INPUT TYPE="button" VALUE="Pause" onclick="pausePlayer();"> <INPUT TYPE="button" VALUE="Stop" onclick="stopPlayer();"> <INPUT TYPE="button" VALUE="Mute" onclick="mutePlayer();">

<div id="outerLyr" style="position:absolute; width:23px; height:120px; z-index:1; left: 355px; top: 111px; background-color: #000000">
<img id="knobImg" src="http://www.dynamicdrive.com/dynamicindex11/knob.jpg" class="drag" style="width: 20px; height: 17px; z-index:3; left: 2px; top: 100px">
<div id="innerLyr" style="position:absolute; width:20px; height:117px; z-index:2; background-color: #777777; left: 2px; top: 2px">
<div id="barLyr" style="position:absolute; width:2px; height:110px; z-index:1; background-color: #000000; left: 9px; top: 5px"></div>
</div>
</div><br>
<div align="center">Volume:</div>
<EMBED NAME="Player" SRC="http://www.infonegocio.com/pol/angie.asf" WIDTH="0" HEIGHT="0" AUTOSTART="true" LOOP="false" TYPE="audio/mp3" showcontrols="0" showdisplay="0" showstatusbar="0" ShowCaptioning="false" ShowPositionControls="false" hidden="true" nosave="true">

</body>
</html>

Thanks in advance,
Pol