DHTML Adjust Bars converted to Vertical Volume Slider control!!!
Hello everybody,
I'm trying to make a vertical volume control from the DHTML Adjust Bars script. 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.
What's wrong!?
Please I need the help of an DHTML expert!
Thanks in advanced,
Pol
<html>
<head>
<title>Untitled</title>
<style>
<!--
.drag {
position: relative;
cursor: hand;
}
-->
</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>
Volume:
<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: 155px; 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>
<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>
CSS Codes
Reply With Quote
Bookmarks