Solved

text that inverts over bar

Posted on 2003-10-30
7
238 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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Introduction This article explores the design of a cache system that can improve the performance of a web site or web application.  The assumption is that the web site has many more “read” operations than “write” operations (this is commonly the ca…
When it comes to showing a 404 error page to your visitors, you do not want that generic page to show, and you especially do not want your hosting provider’s ad error page to show either. In this article, I will show you how to enable the custom 40…
Sending a Secure fax is easy with eFax Corporate (http://www.enterprise.efax.com). First, Just open a new email message.  In the To field, type your recipient's fax number @efaxsend.com. You can even send a secure international fax — just include t…
This demo shows you how to set up the containerized NetScaler CPX with NetScaler Management and Analytics System in a non-routable Mesos/Marathon environment for use with Micro-Services applications.

707 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now