Larry Ross

Larry,

Yes I can help. The outer container of the slider is a relatively
positioned DIV, so it can be positioned using any standard HTML or CSS
positioning techniques such as holding it in an absolutely or relatively
positioned DIV element or inside a table.
WARNING: IE5 Mac has problems positioning the sliders inside a relatively
positioned element - due to a relative position inheritance bug.

What worries me is the fact that you say it is not visible. The slider
should always be visible unless you hold it inside a hidden element. Can
you send me a URL so I can see why it is invisible?

The following is a working example (you will also need the line to load the
script file in the document head). moveFunction and stopFunction should
also be defined if you want to use them, or set to '' if you do not.

<div style="position:absolute;left:10px;top:30px;">
<script type="text/javascript" language="javascript1.2"><!--
var yourslider = new slider(
	24,
	150,
	'#9999bb',
	2,
	'#770000',
	2,
	'#000000',
	16,
	16,
	'#dfdfdf',
	2,
	'',
	true,
	'moveFunction',
	'stopFunction'
);
//--></script></div>


Hope all this helps.


Tarquin - author of http://www.howtocreate.co.uk/

There are ways of making it rise to the top of stacked layers:

1) z-index:100;
you did something like this already, but what happens if you increase the
number a lot?
Remember that the slider contains several other layers, so 4 may be an
unrealistic z-index, as there are far more than 4 layers on the page.

2) put the div containing the slider last on the page. The browser will
create a z-index that should push it above other layers, providing that
they do not have z-index explicitly defined (Dreamweaver often includes
z-index, even if it is unnecessary)

I don't know how to get the elapsed play time of a music track, but if you
can get it, it is simply a matter of using setInterval to repeatedly run
the script:
yourslider.setPosition(elapsedTime/totalTrackTime);
if required, just count from the time you started the track

The HTML I sent you in the last email should put the slider inside another
container. I suggest that you set z-index there. The padding and background
color will create a border. Note that you should also set the width of the
container div ((2*border)+widthOfTrack when there is no padding), or it may
may overlap other content:

<div style="position:absolute;left:10px;top:30px;z-index:100;
 padding:5px;background-color:red;">
<script type="text/javascript" language="javascript1.2"><!--
var yourslider = new slider(
	24,
	150,
	'#9999bb',
	2,
	'#770000',
	2,
	'#000000',
	16,
	16,
	'#dfdfdf',
	2,
	'',
	true,
	'moveFunction',
	'stopFunction'
);
//--></script></div>

I count two commands:
new slider()
setPosition()
The commands can be called from anywhere.

If the computer is locking up, I think you may be using setInterval the way
you would use setTimeout. setTimeout only calls a function once after the
specified delay, so if you want it to repeatedly execute the function, you
need to get the function to set a timer to call itself again:
function myFunction() {
  //display the time here
  window.setTimeout('myFunction()',500);
}
window.setTimeout('myFunction()',500);

setInterval only needs to be set once, the function does not need to call
itself again, as the interval timer will run the function every 'n'
miliseconds:
var theInt;
function myFunction() {
  //display the time here
}
theInt = window.setInterval('myFunction()',500);

When you need to stop the function executing (for example, if you stop a
track), use:
window.clearInterval(theInt);

To display the lapsed time on the slider, you need to use a number:
var currentPos = Player.controls.currentPosition;
var totalLength = Media.duration;
mySlider.setPosition(currentPos/totalLength);

Larry,

Thanks for the suggestion.

In fact the correct cursor is an arrow, as directed by the user interface
guidelines. This makes it the same as form buttons and other controls (try
the volume control on your computer;
Start - programs - accessories - entertainment/sound+video - volume control).

If you want to change this, you will need to modify the source of the script;
in the 'slider' function, change
cursor:default;
to
cursor:pointer;cursor:hand;

This will make it use a hand/finger cursor instead.

I may consider adding this to the script as an option later (if I do, it
will be in the next week).


Tarquin

I got a few minutes so I updated the script to provide the hand cursor
option. You can download the latest version from my JavaScript libraries
page:
http://www.howtocreate.co.uk/jslibs/