[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

text that inverts over bar

Posted on 2003-10-30
7
Medium Priority
?
252 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:David Williamson
[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 400 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
Looking for a new Web Host?

Lunarpages' assortment of hosting products and solutions ensure a perfect fit for anyone looking to get their vision or products to market. Our award winning customer support and 30-day money back guarantee show the pride we take in being the industry's premier MSP.

 
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:David Williamson
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

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

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

Article by: kevp75
Hey folks, 'bout time for me to come around with a little tip. Thanks to IIS 7.5 Extensions and Microsoft (well... really Windows 8, and IIS 8 I guess...), we can now prime our Application Pools, when IIS starts. Now, though it would be nice t…
One of the typical problems I have experienced is when you have to move a web server from one hosting site to another. You normally prepare all on the new host, transfer the site, change DNS and cross your fingers hoping all will be ok on new server…
Visualize your data even better in Access queries. Given a date and a value, this lesson shows how to compare that value with the previous value, calculate the difference, and display a circle if the value is the same, an up triangle if it increased…
Is your data getting by on basic protection measures? In today’s climate of debilitating malware and ransomware—like WannaCry—that may not be enough. You need to establish more than basics, like a recovery plan that protects both data and endpoints.…

656 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