Home/ Questions/Q 193757
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T16:32:15+00:00

Im trying to think how to do this with html elements. There is nothing

  • 0

Im trying to think how to do this with html elements.

alt text

There is nothing special about the colors, so I don’t need to make them images.
Do note that the text is right aligned. Also, the color bar goes up to the text from the left.

So this could be implemented by having the text float right with background color white, and a div with the background color set right next to it (and then a clear).

Or instead of floats, I can do text align-right and get a similar effect.

Here is the kicker.

I’m using a javascript library (shouldn’t matter which one) to create an animation. The animation is the bars shrink to the left, and end up like so:

alt text

The problem with the float or text-align methods are that too many values have to be changed to transition between the two states. The javascript animation effects tend to want to change a couple predefined values, like width or font-size. In order to transfer from picture 1 to picture 2 using the float or text-align methods, I must remove the floating/text-align then set the width of the bar color, but that doesn’t work if I want to keep the javascript overhead minimal for such a simple task.

I’ve tried absolute positioning/widths, but I can’t get anything to make the text right aligned AND have the bars meet at the same point on the left.

I’m hoping maybe I’m just blind of a simple solution, but as I see it, I need one element that has the text positioned to the right somehow, and an element that takes up as much room possible beside it for the color… AND the element that has the color should be able to take a width, while having the text follow beside it.

Thank you.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s my attempt. Note: to the horror of some anti-table zealots this does use tables. Floats just can’t do “take up all available space” like tables can.

    <html>
<head>
<style type="text/css">
table { width: 300px; background: #DDD; empty-cells: show; }
th { padding-left: 8px; width: 100%; height: 1em; }
td { padding-left: 12px; width: auto; }
div { white-space: nowrap; }
#row1 th { background: red; }
#row2 th { background: blue; }
#row3 th { background: green; }
#row4 th { background: yellow; }
#row5 th { background: pink; }
#row6 th { background: gray; }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.setOnLoadCallback(function() {
  $(function() {
    $("th").animate({ width: 0 }, 2000);
  });
});
</script>
</head>
<body>
<table><tr id="row1"><th></th><td><div>FOO</div></td></tr></table>
<table><tr id="row2"><th></th><td><div>BAR</div></td></tr></table>
<table><tr id="row3"><th></th><td><div>THESE PRETZELS ARE</div></td></tr></table>
<table><tr id="row4"><th></th><td><div>MAKING ME THIRSTY</div></td></tr></table>
<table><tr id="row5"><th></th><td><div>BLAH</div></td></tr></table>
<table><tr id="row6"><th></th><td><div>BLAH</div></td></tr></table>
</body>
</html>

    I thought of a non-tables way of doing it that works pretty well, so here it is:

    <html>
<head>
<style type="text/css">
div div { height: 1.3em; }
#wrapper { width: 300px; overflow: hidden; }
div.text { float: right; white-space: nowrap; clear: both; background: white; padding-left: 12px; text-align: left; }
#row1, #row2, #row3, #row4, #row5, #row6 { width: 270px; margin-bottom: 4px; }
#row1 { background: red; }
#row2 { background: blue; }
#row3 { background: green; }
#row4 { background: yellow; }
#row5 { background: pink; }
#row6 { background: gray; }
</style>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.setOnLoadCallback(function() {
  $(function() {
    $("div.text").animate({ width: "90%" }, 2000);
  });
});
</script>
</head>
<body>
<div id="wrapper">
<div class="text">FOO</div><div id="row1"></div>
<div class="text">BAR</div><div id="row2"></div>
<div class="text">THESE PRETZELS ARE</div><div id="row3"></div>
<div class="text">MAKING ME THIRSTY</div><div id="row4"></div>
<div class="text">BLAH</div><div id="row5"></div>
<div class="text">BLAH</div><div id="row6"></div>
</div>
</body>
</html>
    • 0