Ширина, поглощающая элементы HTML - PullRequest
Новая
       13

Ширина, поглощающая элементы HTML

3 голосов
/ 04 мая 2009

Я пытаюсь думать, как это сделать с HTML-элементами.

alt text

В цветах нет ничего особенного, поэтому мне не нужно делать их изображениями. Обратите внимание, что текст выровнен по правому краю. Кроме того, цветная полоса соответствует тексту слева.

Таким образом, это может быть реализовано, если текст всплывает справа с цветом фона белым, а div с цветом фона устанавливается прямо рядом с ним (а затем очищается).

Или вместо поплавков я могу сделать выравнивание текста вправо и получить аналогичный эффект.

Вот кикер.

Я использую библиотеку javascript (не важно, какая именно) для создания анимации. Анимация состоит в том, что полосы сжимаются влево и заканчиваются примерно так:

alt text

Проблема с методами с плавающей запятой или выравниванием текста состоит в том, что слишком много значений необходимо изменить для перехода между двумя состояниями. Эффекты анимации JavaScript, как правило, хотят изменить пару предопределенных значений, таких как ширина или размер шрифта. Чтобы перейти с рисунка 1 к рисунку 2 с использованием методов float или text-align, я должен удалить плавающее / text-align, а затем установить ширину цвета полосы, но это не сработает, если я хочу сохранить JavaScript накладные расходы минимальны для такой простой задачи.

Я пробовал абсолютное позиционирование / ширину, но я не могу ничего сделать, чтобы текст был выровнен по правому краю, и чтобы полосы совпали в одной точке слева.

Я надеюсь, что, может быть, я просто слеп от простого решения, но, как я понимаю, мне нужен один элемент, текст которого расположен как-то вправо, и элемент, который занимает как можно больше места рядом с ним. для цвета ... И элемент, который имеет цвет, должен иметь ширину, а за ним следует текст.

Спасибо.

Ответы [ 3 ]

3 голосов
/ 04 мая 2009

Вот моя попытка. Примечание: к ужасу некоторых фанатиков против таблицы, которые используют таблицы. Поплавки просто не могут «занять все доступное пространство», как таблицы. 

<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>

Я подумал о способе работы без таблиц, который работает довольно хорошо, так что вот оно: 

<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>
2 голосов
/ 04 мая 2009

Это проверено и работает отлично (без глупых таблиц и очень простого 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: Я предполагал, что вы пытаетесь создать какие-то элементы навигации с ними, поэтому я добавил логику взаимодействия с мышью. В любом случае, это может быть полезно, ха-ха?

Второе редактирование: Я изменил код, чтобы сделать его более эффективным и предсказуемым ... если кому-то все равно. ;)

0 голосов
/ 04 мая 2009

Должны ли цветные полосы быть определенной ширины, или просто заполнить пространство между словами справа и началом слева? Предполагая, что мое предположение верно: 

<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>

Рабочая демоверсия: http://davidrhysthomas.co.uk/so/colouredfoobars.html

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...