text that inverts over bar
This might be a chart thing, but I ask because I don't know:
I am building a page that will show the workload of our engineers. I would like to display a bar as a background that indicates the 'busy-ness' level of the engineer with their name as text superimposed on the bar. I would like the text to invert as the bar passes through it, much like progress bars on software installations where the percentage compelte is shown (except this will NOT be animated). A visual example of the result I'm looking for can be found at: http://www.davesrentals.com/bars.jpg
The colors don't matter, just the effect/idea. Could something like this be done with cfchart? Or JavaScript?
I am building a page that will show the workload of our engineers. I would like to display a bar as a background that indicates the 'busy-ness' level of the engineer with their name as text superimposed on the bar. I would like the text to invert as the bar passes through it, much like progress bars on software installations where the percentage compelte is shown (except this will NOT be animated). A visual example of the result I'm looking for can be found at: http://www.davesrentals.com/bars.jpg
The colors don't matter, just the effect/idea. Could something like this be done with cfchart? Or JavaScript?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Hi,
Anands code actually displays a thin bar above the names.... if you want to display it like you showed in your image, you have two options:
1) go for DHTML and overlapping <DIV>s. But, you'll run into browser compatibility problems with the positioning, etc.
2) make a couple of different "bar pictures" with same height but different width that you can use as background pictures for table cells:
<table border="0">
<tr>
<td background="redbar10.gif" style="background-repeat: no-repeat;">Name 1</td>
</tr>
<tr>
<td background="redbar50.gif" style="background-repeat: no-repeat;">Name 2</td>
</tr>
<tr>
<td background="redbar100.gif"
</tr>
</table>
redbar10.gif would be a red bar that is 10 px wide, redbar50.gif would be 50px wide, etc.
Instead of using the style attribute to set the background to no-repeat (which might not work in older browsers), you could make the pics all the same width, and have just different portions of the bar colored, like 10% colored, 50% colored, etc. Just make sure that the names are not longer than the names. ;-))
HTH,
Chris
Anands code actually displays a thin bar above the names.... if you want to display it like you showed in your image, you have two options:
1) go for DHTML and overlapping <DIV>s. But, you'll run into browser compatibility problems with the positioning, etc.
2) make a couple of different "bar pictures" with same height but different width that you can use as background pictures for table cells:
<table border="0">
<tr>
<td background="redbar10.gif" style="background-repeat: no-repeat;">Name 1</td>
</tr>
<tr>
<td background="redbar50.gif" style="background-repeat: no-repeat;">Name 2</td>
</tr>
<tr>
<td background="redbar100.gif"
</tr>
</table>
redbar10.gif would be a red bar that is 10 px wide, redbar50.gif would be 50px wide, etc.
Instead of using the style attribute to set the background to no-repeat (which might not work in older browsers), you could make the pics all the same width, and have just different portions of the bar colored, like 10% colored, 50% colored, etc. Just make sure that the names are not longer than the names. ;-))
HTH,
Chris
Chris : how many different gifs wld u have at the end of teh day ??? :)
Did u actually run my code & see it - i DONT think so !
cos it dosent display a "thin bar gif" like u mentioned - its exactly the way being required by "theamzngq".
take a look :)
Cheers
Anand
Did u actually run my code & see it - i DONT think so !
cos it dosent display a "thin bar gif" like u mentioned - its exactly the way being required by "theamzngq".
take a look :)
Cheers
Anand
Anand:
Many gif's: yep, that's the downside to it. ;-))
Your code: I copied it, generated the pics and ran it ... and it DID (!!) display a thin line above the names. Only then I posted my comment.
BUT! Taking a closer look at it I wondered why a supposedly transparent pixel would show a line and found.... I had mixed up the transparent and the coloured gif. DUH!!! :-(((
Used the correct pics and... it's just like you described and "theamzngq" required. Sorry for confusion!
Cheers
Chris
Many gif's: yep, that's the downside to it. ;-))
Your code: I copied it, generated the pics and ran it ... and it DID (!!) display a thin line above the names. Only then I posted my comment.
BUT! Taking a closer look at it I wondered why a supposedly transparent pixel would show a line and found.... I had mixed up the transparent and the coloured gif. DUH!!! :-(((
Used the correct pics and... it's just like you described and "theamzngq" required. Sorry for confusion!
Cheers
Chris
Gosh u had almost got me thinking, that i probably messed up somewhere ...
Chillax Chris - u dont need to be sorry ... happens to the best of the lot ... :)
Cheers
Anand
Chillax Chris - u dont need to be sorry ... happens to the best of the lot ... :)
Cheers
Anand
ASKER
wow, such activity on this thread! Well, I will have to take a second and try out anand's code. I have never worked with transparent gif's, so it might be cool if you sent me that file, Anand.
dw@wrightengineers.com
Thanks for all the contribution!
dw@wrightengineers.com
Thanks for all the contribution!
1. value to be used instead of my randrange()
2. value to be used instead of name#i#