Largeur absorbant les éléments HTML

J'essaie de penser à faire cela avec les éléments html.Largeur absorbant les éléments HTML

alt text

Il n'y a rien de spécial sur les couleurs, donc je ne pas besoin de les faire des images. Notez que le texte est aligné à droite. En outre, la barre de couleur va jusqu'au texte de la gauche.

Ainsi, cela pourrait être implémenté en ayant le texte flottant à droite avec la couleur d'arrière-plan blanche, et un div avec la couleur d'arrière-plan définie juste à côté (et ensuite un clair).

Ou à la place des flottants, je peux faire du texte align-right et obtenir un effet similaire.

Voici le kicker. J'utilise une bibliothèque javascript (peu importe laquelle) pour créer une animation. L'animation est les barres rétrécissent à gauche, et finissent comme ceci:

alt text

Le problème avec les méthodes de flotteur ou d'aligner le texte sont que trop de valeurs doivent être modifiées à la transition entre les deux états . Les effets d'animation javascript ont tendance à vouloir changer quelques valeurs prédéfinies, comme la largeur ou la taille de la police. Afin de transférer de l'image 1 à l'image 2 en utilisant les méthodes float ou text-align, je dois supprimer le flottant/text-align puis définir la largeur de la couleur de la barre, mais cela ne fonctionne pas si je veux garder le javascript frais généraux minimal pour une tâche aussi simple. J'ai essayé le positionnement absolu/les largeurs, mais je ne peux rien obtenir pour que le texte soit aligné à droite ET que les barres se rencontrent au même point sur la gauche. J'espère peut-être que je suis aveugle à une solution simple, mais comme je le vois, j'ai besoin d'un élément qui a le texte positionné vers la droite en quelque sorte, et un élément qui prend autant de place possible à côté pour la couleur ... ET l'élément qui a la couleur devrait pouvoir prendre une largeur, tout en ayant le texte à côté.

Merci.

Source

2009-05-04 phillc

Voici ma tentative. Note: à l'horreur de certains fanatiques anti-table cela utilise des tables. Les flotteurs ne peuvent tout simplement pas "occuper tout l'espace disponible" comme le peuvent les tables.

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

Je pensais que d'une manière non-tables de le faire qui fonctionne assez bien, si elle est ici:

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

Source

2009-05-04 15:26:37 cletus

Légèrement gênant avec le texte ressemblant à son centré ... Je pense que je vais voir si je peux prendre certaines de vos idées et les fusionner dans ma solution. – phillc

Quel texte a l'air centré? – cletus

Il parle de la version des tables. La version CSS fonctionne mieux. – KyleFarris

Est-ce que les barres de couleur doivent être une largeur particulière, ou tout simplement remplir le espace entre les mots sur la droite et l'origine sur la gauche?En supposant que correct de mon hypothèse:

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

démonstration de travail: http://davidrhysthomas.co.uk/so/colouredfoobars.html

Source

2009-05-04 15:27:57

va essayer dans un instant. – phillc

Ah oui, j'ai aussi trafiqué une méthode comme celle-ci. Cela fonctionne pour la première étape, mais qu'est-ce que je mets le javascript à animer? Je ne sais pas quelle largeur tout devrait être, parce que les mots sont de largeur variable. – phillc

... Je devrais lire les questions correctement ... J'ai complètement raté la partie JS. ... euh, mon amnésie ... O.o –

Ceci est testé et il fonctionne parfaitement (pas de tables stupides et très 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>

Modifier : Je supposais que vous étiez en train de faire des éléments de navigation avec ceux-ci, donc j'ai ajouté la logique d'interaction de la souris. En tout cas, ça pourrait être utile, haha?

Deuxième édition: J'ai changé le code pour être plus efficace et plus prévisible ... si quelqu'un s'en soucie. ;)

Source

2009-05-04 15:43:00 KyleFarris

Oh, très bien. Avec les réponses données, mon débat est essentiellement: simple html vs simple javascript. – phillc

J'aime celui-ci, d'autant plus que vous n'avez pas utilisé de tableaux pour les mises en page. Je ne peux pas croire que les gens affichent toujours des solutions qui utilisent des tableaux pour les mises en page, c'est tellement 1998-ish. J'aime aussi que vous ayez utilisé l'API de données jquery au lieu de stocker des données dans les nœuds dom (encore une fois 1998-ish). Bon travail. – Amit

@phillc - Oui, mon code est un peu plus fou mais ça en fait beaucoup plus. Je ne suis pas sûr de ce que vous projetez de faire, mais il semble que vous vouliez juste l'animation simple, pas l'interaction. C'est super. Mais, si vous voulez ajouter des effets de survol, vous savez où aller. ;-) – KyleFarris

Largeur absorbant les éléments HTML

Répondre

Questions connexes