Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript

Width Absorbing Html Elements

Post a Comment
Im trying to think how to do this with html elements. 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,

Solution 1:

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><styletype="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; }
#row1th { background: red; }
#row2th { background: blue; }
#row3th { background: green; }
#row4th { background: yellow; }
#row5th { background: pink; }
#row6th { background: gray; }
</style><scripttype="text/javascript"src="http://www.google.com/jsapi"></script><scripttype="text/javascript">
google.load("jquery", "1.3.2");
google.setOnLoadCallback(function() {
  $(function() {
    $("th").animate({ width: 0 }, 2000);
  });
});
</script></head><body><table><trid="row1"><th></th><td><div>FOO</div></td></tr></table><table><trid="row2"><th></th><td><div>BAR</div></td></tr></table><table><trid="row3"><th></th><td><div>THESE PRETZELS ARE</div></td></tr></table><table><trid="row4"><th></th><td><div>MAKING ME THIRSTY</div></td></tr></table><table><trid="row5"><th></th><td><div>BLAH</div></td></tr></table><table><trid="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><styletype="text/css">divdiv { 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><scripttype="text/javascript"src="http://www.google.com/jsapi"></script><scripttype="text/javascript">
google.load("jquery", "1.3.2");
google.setOnLoadCallback(function() {
  $(function() {
    $("div.text").animate({ width: "90%" }, 2000);
  });
});
</script></head><body><divid="wrapper"><divclass="text">FOO</div><divid="row1"></div><divclass="text">BAR</div><divid="row2"></div><divclass="text">THESE PRETZELS ARE</div><divid="row3"></div><divclass="text">MAKING ME THIRSTY</div><divid="row4"></div><divclass="text">BLAH</div><divid="row5"></div><divclass="text">BLAH</div><divid="row6"></div></div></body></html>

Solution 2:

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

<styletype="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><scripttype="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><ahref="#"class="crazy_slider"id="red"><divclass="crazy_slider_text">FOO</div></a><ahref="#"class="crazy_slider"id="blue"><divclass="crazy_slider_text">BAR</div></a><ahref="#"class="crazy_slider"id="green"><divclass="crazy_slider_text">BAZ</div></a><ahref="#"class="crazy_slider"id="yellow"><divclass="crazy_slider_text">FOOBAR</div></a><ahref="#"class="crazy_slider"id="pink"><divclass="crazy_slider_text">FOOBARBAZ</div></a><ahref="#"class="crazy_slider"id="grey"><divclass="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. ;)

Solution 3:

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.2em0;
        }

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

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

 </style><divid="container"><spanid="foo"><p>foo</p></span><spanid="bar"><p>bar</p></span><spanid="foobar"><p>foobar</p></span></div>

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

Post a Comment for "Width Absorbing Html Elements"