PDA

View Full Version : Please Help me! slide bar with images...



Linda123
02-25-2006, 12:05 PM
Hello everybody,

I need help, how to change this slide bar with images? :confused:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<script type="text/javascript" src="slidebar.js"></script>
<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>
<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();">
<br><br>
<table align="left"><tr><td>
<div style="position:relative;width:16px;height:200px;overflow:hidden;background:buttonhface;border:outset 1px #dedede;">
<div style="position:absolute;right:0;top:-17px;width:22px;height:233px;overflow:auto;background:buttonhface;" onscroll="document.Player.Volume = Volume[ Math.ceil(this.scrollTop/this.scrollHeight*40) ];">
<div style="width:1px;height:10000px;overflow:hidden;background:buttonhface;"></div>
</div>
</div>
</td></tr></table><br><br><br><br>
Volume
<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 advanced,
Linda

jscheuer1
02-25-2006, 02:46 PM
How do you want to change it?

Linda123
02-25-2006, 10:22 PM
Hi John,

I want to change the SLIDE BAR and the SLIDER to images ;) ...or the appearance to the look of a sound volum slider :)

Do you can help me?

All the best!
Linda

jscheuer1
02-26-2006, 04:56 AM
Well, the slider used by this script and markup is the default scroll bar of the browser. To use an image, one needs to use drag and drop scripting. There are several of these around. Here (http://www.walterzorn.com/dragdrop/dragdrop_e.htm#addons) is a good example of a horizontal slider made using images and one such script. There are also a couple of examples using DD's drag and drop DOM (http://www.dynamicdrive.com/dynamicindex11/domdrag/index.htm). One is on the demo page itself (scroll down to 'Limiting the range of the drag'), the other is linked to the demo page from that same section. These last two use custom tailored dragable divisions to act as the scroller but, an image could also be used.

Added Later, I see there is linked to your code a script:

<script type="text/javascript" src="slidebar.js"></script>

Perhaps something in there would be of use as well.

Linda123
02-26-2006, 10:06 AM
Hi John,

Thanks for your good intentions but it's too much complex to me :( I need a Windows Mediaplayer streaming example with a vertical slidebar.

All the best,
Linda