Solved

text that inverts over bar

Posted on 2003-10-30
7
245 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Flexible connectivity for any environment

The KE6900 series can extend and deploy computers with high definition displays across multiple stations in a variety of applications that suit any environment. Expand computer use to stations across multiple rooms with dynamic access.

 
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

Save the day with this special offer from ATEN!

Save 30% on the CV211 using promo code EXPERTS30 now through April 30th. The ATEN CV211 connects a laptop directly to any server allowing you instant access to perform data maintenance and local operations, for quick troubleshooting, updating, service and repair.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
VPN Dedicated IP address question 7 48
Redundant SQL Servers Without Clustering 7 137
Change local server setting in php 6 105
Nameserver and MX Record 2 81
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 …
In our day to day coding, how many times have we come across a necessity to check whether a URL is a broken link or not? For those of you that answered countless and are using ColdFusion like myself, then this article is for you.  It will show yo…
Email security requires an ever evolving service that stays up to date with counter-evolving threats. The Email Laundry perform Research and Development to ensure their email security service evolves faster than cyber criminals. We apply our Threat…
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…

749 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