Rob Wagner

Rob,

Glad you like it.

I have not provided a way to put gaps between bars in the same data 
range, but if you replace the first occurance of
this.rotate?scaleSize:offWidth,this.rotate?offWidth:scaleSize
with
this.rotate?scaleSize:offWidth-1,this.rotate?offWidth-1:scaleSize
in the script source, then an extra pixel gap will appear down the edge of
each bar, making them separate from each other. It may have a few minor
rendering bugs in extreme circumstances - 1px wide bars will disappear
etc. - (which is why I do not offer it as an option), but for most graphs,
it will look perfect.

I had hoped that the configurable colours would be enough to make the bars
distinguishable from each other.

As for images, I have not provided any way to do this, mainly because the
width of the bars may change, so the tiling effect would only work if you
managed to make everything pixel perfect (note that some bars are one
pixel wider than others to fill up the available space). Also, one of the
important things about the way I wrote the script is that it does not use
any images at all, making it very lightweight - but that's just a matter
of my pride ;)

If you want to enable images, you will need to do some more editing:
replace the last occurance of:
  background-color
with
  background
and replace
  bgcolor="'+oC+'"
with
  background="'+oC+'"
and replace
  bgcolor="'+this.colours[x]+'"
with
  background="'+this.colours[x]+'"
and replace
  if( typeof( oCol ) != 'string' || oCol.length != 7 || oCol.charAt(0) != '#' ) {
with
  if( typeof( oCol ) != 'string' ) {
You will then ONLY be able to use images, not colours for the 
bars/columns.

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

Hi again Rob,

This is easily possible. The sliders have no concept of which slider they
are, all they know is 'I am me', but they do not hold an individual
reference to themselves. This is why the sliders do not pass that
information to the function. However, you can use any function name(s) you
like, you are not restricted to using 'stopFunction'. This means that each
slider can run its own function, instead of running the same function as
the other sliders. Each function can then do something different, or could
simply pass values to another function, along with the number or name of
the slider (as I have shown below).

eg
var temper = new slider(
 ...
 'moveFunction',
 'stopFunction',
 ...
);
var density = new slider(
 ...
 'myMoveFunction',
 'myStopFunction',
 ...
);
var salinity = new slider(
 ...
 'yourMoveHandler',
 'yourStopHandler',
 ...
);
function yourMoveHandler(oPos) {
 //this function will be called by slider3 (and only slider3) as it is moving
}
... etc ...

if you then want all sliders to run the same function, but to tell it which
slider they are, try this:

function moveFunction(oPos) { globalMove(oPos,'temper'); }
function myMoveFunction(oPos) { globalMove(oPos,'density'); }
function yourMoveHandler(oPos) { globalMove(oPos,'salinity'); }
function stopFunction(oPos) { globalStop(oPos,'temper'); }
function myStopFunction(oPos) { globalStop(oPos,'density'); }
function yourStopHandler(oPos) { globalStop(oPos,'salinity'); }
function globalMove(oPos,oSlider) {
 window.status = 'Slider '+oSlider+' at position '+oPos;
}
function globalStop(oPos,oSlider) {
 alert('Slider '+oSlider+' at position '+oPos);
}

You could even pass the reference to the slider object if you wanted to
(note the lack of quotes, I am just passing the variables you created):
function stopFunction(oPos) { globalStop(oPos,temper); }
function myStopFunction(oPos) { globalStop(oPos,density); }
function yourStopHandler(oPos) { globalStop(oPos,salinity); }
function globalStop(oPos,oSlider) {
 oSlider.setPosition(0.5);
 alert('Ha! Ha! I moved it back.')
}


Does all of that make sense?

Tarquin