• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 254
  • Last Modified:

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?
0
David Williamson
Asked:
David Williamson
  • 4
  • 2
1 Solution
 
anandkpCommented:
Seems pretty easy !

try this code !

<TABLE WIDTH="10" BORDER="0" CELLSPACING="0" CELLPADDING="1">
      <TR>
            <TD>
            <CFOUTPUT>
                  <CFLOOP INDEX="i" FROM="1" TO="3">
                        <TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0">
                              <TR>
                                    <TD HEIGHT="1"><IMG SRC="/IMAGES/1X1/GIF" BORDER="0" HEIGHT="1" WIDTH="#RandRange(100,1000)#"></TD>
                              </TR>
                              <TR>
                                    <TD BACKGROUND="http://www.davesrentals.com/bars.jpg"><!--- repalce the above gif with a colorfull gif so u get what color u want :)  ---><FONT COLOR="FFFFFF">Name#i#</FONT><!--- repalce this with whatever names u want ---></TD>
                              </TR>
                        </TABLE>
                  </CFLOOP>
            </CFOUTPUT>
            </TD>
      </TR>
</TABLE>

U'll need a transperent gif called "1x1.gif" which i've used in the code - if u dotn have email me & i'll send u as a attachment & this code will do exactly what u r looking for

let me know

K'Rgds
Anand
0
 
anandkpCommented:
few things - u'll be getting from ur code wld be

1. value to be used instead of my randrange()
2. value to be used instead of name#i#
0
 
proceptCommented:
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" style="background-repeat: no-repeat;">Name 3</td>
   </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
0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
anandkpCommented:
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
0
 
proceptCommented:
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
0
 
anandkpCommented:
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

0
 
David WilliamsonIT DirectorAuthor Commented:
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!
0

Featured Post

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now