Solved

text that inverts over bar

Posted on 2003-10-30
7
243 Views
Last Modified: 2013-12-24
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
Comment
Question by:theamzngq
  • 4
  • 2
7 Comments
 
LVL 17

Accepted Solution

by:
anandkp earned 100 total points
ID: 9655760
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
 
LVL 17

Expert Comment

by:anandkp
ID: 9655763
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
 
LVL 4

Expert Comment

by:procept
ID: 9656361
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
The Eight Noble Truths of Backup and Recovery

How can IT departments tackle the challenges of a Big Data world? This white paper provides a roadmap to success and helps companies ensure that all their data is safe and secure, no matter if it resides on-premise with physical or virtual machines or in the cloud.

 
LVL 17

Expert Comment

by:anandkp
ID: 9656401
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
 
LVL 4

Expert Comment

by:procept
ID: 9656595
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
 
LVL 17

Expert Comment

by:anandkp
ID: 9656714
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
 
LVL 2

Author Comment

by:theamzngq
ID: 9658647
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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a guide to setting up a new WHM/cPanel Server to be used for web hosting accounts. It is intended for web hosting company administrators and dedicated server owners. For under $99 per month (considering normal rate of Big Data Cetnters like …
A web service (http://en.wikipedia.org/wiki/Web_service) is a software related technology that facilitates machine-to-machine interaction over a network. This article helps beginners in creating and consuming a web service using the ColdFusion Ma…
Although Jacob Bernoulli (1654-1705) has been credited as the creator of "Binomial Distribution Table", Gottfried Leibniz (1646-1716) did his dissertation on the subject in 1666; Leibniz you may recall is the co-inventor of "Calculus" and beat Isaac…

856 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question