Not logged in. · Lost password · Register
Forum: Skins RSS
Easy Volume/positon Sliders
Keefy #1
Member since Mar 2003 · 89 posts
Group memberships: Members
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:

<table id="progressBar"  border="0" cellpadding="0" cellspacing="0" width="200">
    <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 = " ";
    }

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));
}

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>


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....  ;)
Avatar
Azimuth #2
Member since Jan 2003 · 427 posts · Location: Chicago, Illinois - USA
Group memberships: Members
Show profile · Link to this post
I figured that was the best way to do it. Now, we just need a tag to read the current song position (unless I missed it)!
This post was edited on 2003-05-14, 17:17 by Unknown user.
Keefy #3
Member since Mar 2003 · 89 posts
Group memberships: Members
Show profile · Link to this post
I used the Javascript Date object. Just feed in the values and do some hideous date math to get the time as a percentage.  ;)  

It's not worth explaining here, because it's pretty complicated. In short, it sets up several date objects, like "lastKnownPosition", "lastKnownPositionTimeStamp" and "trackLength". From these you can work out pretty much anything, especially as lastKnownPositionTimeStamp can be compared to the current time, to work out where the track is at any given moment.

I'm going to comment how all this stuff works in my skin. I'll try and post it all up in the next week or so.
Avatar
Henry (Administrator) #4
Member since Jan 2003 · 865 posts · Location: Munich Germany
Group memberships: Administrators, Members
Show profile · Link to this post
I just added a new Tag: <#SongPositionPercent>.
Comes with the next release.

Your table row width stuff is really cool! I'll add this to the base skin.  :-D
Avatar
Azimuth #5
Member since Jan 2003 · 427 posts · Location: Chicago, Illinois - USA
Group memberships: Members
Show profile · Link to this post
Yay!  :-D
genekeenan #6
Member since Mar 2003 · 18 posts
Group memberships: Members
Show profile · Link to this post
attached is the
FLASH volume scale 100 control
it is revised so that it only sets the volume once the user has released the slider (low bandwidth version).
It is also transparent so you can use it over any background. You change the size by editing the width and height attributes in the embed/object tags.

The previous version has a constant feedback device in it (better for me). The final version will be better.

i hope at some point to post a complete working flash version of the skin.

gk


edit: attachment removed - Henry
This post was edited on 2003-05-15, 05:57 by Unknown user.
Avatar
Azimuth #7
Member since Jan 2003 · 427 posts · Location: Chicago, Illinois - USA
Group memberships: Members
Show profile · Link to this post
GK: Would it be hard to have both a vertical and horizontal version?
genekeenan #8
Member since Mar 2003 · 18 posts
Group memberships: Members
Show profile · Link to this post
here are four more flash sliders:
1 large horizontal
1 small horizontal
1 large vertical
1 small vertical


I would disregard the ones i just posted. They had some code that was left over from constant feed back so it caused the playback.html to be called 3 times instead of just once.  Sorry for that.

gk
The author has attached one file to this post:
sliders.zip 102.6 kBytes
You have no permission to open this file.
Avatar
Azimuth #9
Member since Jan 2003 · 427 posts · Location: Chicago, Illinois - USA
Group memberships: Members
Show profile · Link to this post
Great! I'll post TTunes with this now!  B)
genekeenan #10
Member since Mar 2003 · 18 posts
Group memberships: Members
Show profile · Link to this post
I have updated the volume sliders so that they update themselves to the current volume when ever the screen refreshes.

attached are the files including source.

gk
The author has attached one file to this post:
volume_slides.zip 87.7 kBytes
You have no permission to open this file.
genekeenan #11
Member since Mar 2003 · 18 posts
Group memberships: Members
Show profile · Link to this post
Hi,

i made some current track position slides. they are identical to the volume slides except for some minor code changes that make them respond to the current track position.

the files including the source files are attached.

gk
The author has attached one file to this post:
current_position_slides.zip 87.2 kBytes
You have no permission to open this file.
Avatar
Azimuth #12
Member since Jan 2003 · 427 posts · Location: Chicago, Illinois - USA
Group memberships: Members
Show profile · Link to this post
Great! I'll get these in the Flash version of TTunes soon.
Keefy #13
Member since Mar 2003 · 89 posts
Group memberships: Members
Show profile · Link to this post
The update to the XML skin posted today has a much improved version of the HTML based progress bar. It works by creating a fixed width table of a defined background color. Inside the table is a single <td> element containing an <img> tag to a 1x10 pixel bitmap of a different color. By varying the width of this image, you can represent any percentage value easily. By enclosing the table in an <a> link tag, it's now clickable at any point, where there is some javascript to determine the location of the click.

Simple, but very effective. Hope someone finds it useful!! Files of interest are XML\Client\full.html and XML\Client\winamp.js, but here follows the relevant code:

HTML
<a href="#" onclick="clickProgressBar();">
<table  id="progressBar" border="0" cellpadding="0" cellspacing="0" width="200" bgcolor="#FFFFFF">
    <tbody>
  <tr>
      <td bgcolor="#FFFFFF">
      <img id="progressBarLeft"  src="gfx/vertical_bar.gif" width="1" height="10"/>
      </td>
  </tr>
    </tbody>
</table>
</a>

Javascript function to handle clicks
function clickProgressBar()
{
    var x = event.offsetX + event.srcElement.offsetLeft;    // x relative to the table
    var mywidth = progressBar.width;      // width of table
    var clickedPercentage = parseInt(100*x/mywidth);

    doSomething(clickedPercentage);
}

To set a value, use this function
function updateProgressBar(newPercentage)
{
    // Sanity check
    if(isNaN(newPercentage) || (newPercentage <= 0) || (newPercentage > 100))
  var scaledPosition = 1;          // Safe value
    else
  var scaledPosition = (progressBar.width/100) * newPercentage;  // Scale it up by (image max width)/100
 
    progressBarLeft.width = scaledPosition;
   


}

Any questions, just ask!!
Avatar
Henry (Administrator) #14
Member since Jan 2003 · 865 posts · Location: Munich Germany
Group memberships: Administrators, Members
Show profile · Link to this post
I have just improved keefys version of the volume slider 'cause the current versions only works with IE and not with Mozilla.

This is the volume bar table with the onClick event handler:
<table border="0" cellpadding="0" cellspacing="1" bgcolor="003366" title="click bar to change volume">
                            <tr>
                              <td onClick="clickVolumeBar(this, event);" class="small" align="left" width="100" bgcolor="#000033"><img src="gfx/bluepixel.gif" width="1" height="4" id="volumeBar" border="0"></td>
                            </tr>
                          </table>
Place this piece of code right after the volume bar to set the current value:
<script language="JavaScript" type="text/JavaScript">
var Volume = <#Volume>;
 if(isNaN(Volume)) Volume = 1;
 if(Volume == 0) Volume = 1;
 document.getElementById("volumeBar").width = Volume;
</script>

Place the following code in the head section of your document:
<script type="text/javascript">

// check browser type
var Netscape = new Boolean();
if(navigator.appName == "Netscape")  Netscape = true;
else Netscape = false;

// used with netscape browsers
function findPosX(obj)
{
    var curleft = 0;
    if (obj.offsetParent)
    {
  while (obj.offsetParent)
  {
      curleft += obj.offsetLeft
      obj = obj.offsetParent;
  }
    }
    else if (obj.x)
  curleft += obj.x;
    return curleft;
}


function clickVolumeBar(Element, myevent)
{
var x;
 // Netscape and IE makes a difference
 if(Netscape) x = myevent.pageX - findPosX(Element); 
 else x = event.offsetX + event.srcElement.offsetLeft;
 var mywidth = Element.width; // get the width of the table

 RequestPage("?volume=" + parseInt(100*x/mywidth));  // build url and reload page, can also be: document.location.href=...
}
</script>
This code can easily be adapted for progressbar.
Hope this helps making skins more browser independent.  ;)
This post was edited on 2003-08-05, 20:04 by Unknown user.
Close Smaller – Larger + Reply to this post:
Verification code: VeriCode Please enter the word from the image into the text field below. (Type the letters only, lower case is okay.)
Smileys: :-) ;-) :-D :-p :blush: :cool: :rolleyes: :huh: :-/ <_< :-( :'( :#: :scared: 8-( :nuts: :-O
Special characters:
Go to forum
This board is powered by the Unclassified NewsBoard software, 20150713-dev, © 2003-2015 by Yves Goergen
Page created in 245.5 ms (154.7 ms) · 105 database queries in 115.1 ms
Current time: 2018-12-12, 09:30:37 (UTC +00:00)