Keefy
Show profile
Link to this post
I've seen a few skins use Flash to do this. There is an easier way!!
To display a volume or location bar, simply use a <table>. Set the <td> width attributes to percentages, and you change these. For example:
Set each side to a diffent colour. Then, the following javascript will set the width, where percentage position is an integer between 0 and 100:
The checks are because NaN will produce invalid HTML, as will a value of 0
Now, you handle clicks on it with following function:
which is called by surrounding the whole <table> with the following HTML. The location you clicked on is set in the variable "clickedLocation".
Now, this is pretty basic, but you get the idea. You can do more clever stuff by perhaps using three <td> elements, with the middle one being an image of a slider control. OK, so you don't drag the control, but it essentially does the same purpose. You'd need to tweak the maths to compensate for the width of the graphic.
I use this for a track position system. All will be revealed in my skin....
To display a volume or location bar, simply use a <table>. Set the <td> width attributes to percentages, and you change these. For example:
<table id="progressBar" border="0" cellpadding="0" cellspacing="0" width="200">
<tr>
<td id="progressBarLeft" width="1%"> </td>
<td id="progressBarRight"> </td>
</tr>
</table>
<tr>
<td id="progressBarLeft" width="1%"> </td>
<td id="progressBarRight"> </td>
</tr>
</table>
Set each side to a diffent colour. Then, the following javascript will set the width, where percentage position is an integer between 0 and 100:
if(isNaN(percentagePosition))
percentagePosition = 1;
if(percentagePosition == 0)
percentagePosition = 1;
progressBarLeft.width = percentagePosition + "%";
progressBarLeft.innerHTML = " ";
progressBarRight.innerHTML = " ";
}
percentagePosition = 1;
if(percentagePosition == 0)
percentagePosition = 1;
progressBarLeft.width = percentagePosition + "%";
progressBarLeft.innerHTML = " ";
progressBarRight.innerHTML = " ";
}
The checks are because NaN will produce invalid HTML, as will a value of 0
Now, you handle clicks on it with following function:
function clickProgressBar()
{
var x = event.offsetX + event.srcElement.offsetLeft; // x relative to the table
var mywidth = progressBar.width; // width of table
clickedLocation = parseInt(100*x/mywidth));
}
{
var x = event.offsetX + event.srcElement.offsetLeft; // x relative to the table
var mywidth = progressBar.width; // width of table
clickedLocation = parseInt(100*x/mywidth));
}
which is called by surrounding the whole <table> with the following HTML. The location you clicked on is set in the variable "clickedLocation".
<a id="progressBarLink" href="#" onclick="clickProgressBar();">
<table>
blah blah blah
</table>
</a>
<table>
blah blah blah
</table>
</a>
Now, this is pretty basic, but you get the idea. You can do more clever stuff by perhaps using three <td> elements, with the middle one being an image of a slider control. OK, so you don't drag the control, but it essentially does the same purpose. You'd need to tweak the maths to compensate for the width of the graphic.
I use this for a track position system. All will be revealed in my skin....
This post was edited on 2003-05-14, 18:17 by Unknown user.
sliders.zip 102.6 kBytes