Thursday, May 5, 2011

Width absorbing HTML elements

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.

From stackoverflow

  • 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>
    phillc : Slightly awkward with the text looking like its centered... I think I'm going see if I can take some of your ideas and merge it into my solution.
    cletus : What text looks like it's centered?
    KyleFarris : He's talking about the tables version. The CSS version works better.
    phillc : might be a browser thing, all I had to do was add a text-align
    phillc : Your non-tables implementation is very close to my original thought process on how to do things, but you did something that I can't figure out, once I decipher, I think this is the winning answer. Thank you a ton.
    phillc : OH I SEE! You are making the text take more room =) Going to adopt it so that it doesn't use %'s, and I should be set. Thanks again.
    phillc : Did not work in internet explorer. Solution just removed the width from #row1, #row2 #row3.....
    cletus : Frigging IE. It's actually wrong to be doing what it's doing. Floats aren't meant to displace block elements.
    cletus : Haven't thought of a solution to this yet. Will update when I do. But I guess that's one reason for the tables based solution: it works perfectly in IE (well, after you add a DOCTYPE to force standards compliant mode).

  • Do the coloured bars need to be a particular width, or just fill the space between the words on the right and the origin on the left? Assuming that my assumption's correct:

    <style>

#container    {width: 50%;
          margin: 0 auto;
        }

span    {width: 100%;
     display: block;
        text-align: right;
        margin: 0.2em 0;
        }

span p  {text-align: right;
     background-color: #fff;
     color: #333;
     display: inline-block;
     padding: 0 0 0 0.4em;
     line-height: 1.4em;
     font-weight: bold;
     }

span#foo    {background-color: #f00;
     }
span#bar    {background-color: #0f0;
        }
span#foobar {background-color: #00f;
        }

 </style>



<div id="container">
    <span id="foo">
     <p>foo</p>
    </span>
    <span id="bar">
     <p>bar</p>
    </span>
    <span id="foobar">
     <p>foobar</p>
    </span>

</div>

    Working demo: http://davidrhysthomas.co.uk/so/colouredfoobars.html

    phillc : will try in a moment.
    phillc : Ah yes, I've tampered with a method like this as well. It works for stage one, but what do I set the javascript to animate to? I don't know what width the entire thing should be, because the words being a variable width.
    David Thomas : ...I should read the questions properly...I completely missed the JS part. ...ugh, my amnesia... O.o
    David Thomas : Okay, I suck at JS. So...Psuedocode: set the width of the #container to 'auto.' This should allow the spans to collapse down to the width of the word. As time passes, assuming you want all the words to align right, increase the width of the #container? Would that work..?

  • This is tested and it works perfectly (no stupid tables and very simple CSS/jQuery):

    <style type="text/css">
   .crazy_slider { display:block; height:25px; width:500px; clear:both; position:relative; z-index:0; text-decoration:none; }
    .crazy_slider_text { position:absolute; right:0px; top:0px; height:100%; background-color:white; color:#666; font-size:1em; display:block; text-align:left; z-index:1px; padding-left:10px; }
    #red { background-color:red; }
    #blue { background-color:blue; }
    #green { background-color:green; }
    #yellow { background-color:yellow; }
    #pink { background-color:pink; }
    #grey { background-color:grey; }
</style>


<script type="text/javascript">
    $(function() {
        $('.crazy_slider').hover(
            function() {
                var bar_width = $(this).width();
                var $crazy_slider_text = $(this).children('.crazy_slider_text');
                if($crazy_slider_text.data('original_width') == null || $crazy_slider_text.data('original_width') == undefined || !$crazy_slider_text.data('original_width')) {
                    var original_width = $crazy_slider_text.width();
                    $crazy_slider_text.data('original_width',original_width);
                }
                $crazy_slider_text.stop().animate({width:95+'%'},500);
            },
            function() {
                var $crazy_slider_text = $(this).children('.crazy_slider_text');
                var text_width = $crazy_slider_text.data('original_width');
                $crazy_slider_text.stop().animate({width:text_width+"px"},500);
            }
        );
    });
</script>


<a href="#" class="crazy_slider" id="red"><div class="crazy_slider_text">FOO</div></a>
<a href="#" class="crazy_slider" id="blue"><div class="crazy_slider_text">BAR</div></a>
<a href="#" class="crazy_slider" id="green"><div class="crazy_slider_text">BAZ</div></a>
<a href="#" class="crazy_slider" id="yellow"><div class="crazy_slider_text">FOOBAR</div></a>
<a href="#" class="crazy_slider" id="pink"><div class="crazy_slider_text">FOOBARBAZ</div></a>
<a href="#" class="crazy_slider" id="grey"><div class="crazy_slider_text">BAZAGAIN</div></a>

    Edit: I was assuming you were tying to make some kind of navigation elements with these so I added the mouse interaction logic. In any case, it might be useful, haha?

    Second Edit: I've changed the code to be more efficient and more predictable... if anyone cares. ;)

    phillc : Oh, very nice. With the given answers, my debate is basically: simple html vs simple javascript.
    Amit : I like this one, especially since you didn't use tables for layouts. I can not believe that people are still posting solutions that use tables for layouts, thats soooo 1998-ish. Also I like that you have used jquery data API instead of storing data in dom nodes (again so 1998-ish). Good job.
    KyleFarris : @phillc - Yeah, my code is a bit more crazy but it does do a lot more. I'm not sure what you're planning on doing but it looks like you just wanted the simple animation, not interaction. That's cool. But, if you ever want to add some hover effects to it, you know where to go. ;-)
    phillc : oh yes, im keeping this in my back pocket. =) thanks
Posted by Ku XI at 6:03 AM

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)