Aunque el ícono del tema sugiera que voy a proponer una idea, en realidad quiero hacer no una sino dos preguntas.
Hace unos días respondí una duda sobre los em, y me puse a mirar disquetes para encontrar algún ejemplo de página hecha con esta medida. Y como de costumbre encontré algo que había olvidado. Tiempo atrás empecé a simular listas con div y dd (también con tablas, pero como en este foro hay gente muy suceptible voy a omitir ese código), y descubrí que el objetivo era usar 'caracteres personalizados' a modo de viñetas.
Por supuesto que al encontrar algo nuevo con qué entretenerme olvidé los
em; y es porque había un par de escripts para ordenar y animar las viñetas.
Era mi gran oportunidad para empezar a experimentar con nodos, así que reescribí los códigos y los probé en IExplorer. El mayor problema lo tuve con la diferente interpretación que hace el bendito navegador entre las versiones 5 y 6 de los em y lo solucioné al la manera Microsoft. Pero cuando probé los escripts en FF fue una tragedia.
Ya me había olvidado de que estos navegadores interpretan distinto los nodos, y tuve que inventar un engendro para corregirlo sin tener que hacer una línea de código para cada uno. El ejemplo es éste :
Código:
Y las preguntas son :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"><html>
<head>
<title>VIÑETAS PERSONALIZADAS.</title>
<script type="text/javascript">
var animacion = ["▀","▐","▄","▌"];
var vA= 0;
var paso , undefined;
function anima(){
var vAnim = document.getElementById("listaAnim").childNodes;
vA = (vA == animacion.length-1)? vA=0 : vA += 1;
for(i=0; i<vAnim.length; i++){
if(vAnim[i].innerHTML != undefined){
var nVineta = (vAnim[i].childNodes[0].innerHTML != undefined) ? 0 : 1
vAnim[i].childNodes[nVineta].innerHTML = animacion[vA];
}
}
paso = setTimeout("anima()" , 100);
}
var vSIni = 913; /*Alfa mayúscula*/
var vSFin = 969; /*omega minúscula*/
var vS = vSIni; /*primer ítem (p.e. 922 empieza con Kappa)*/
var excep = "930 938 939 940 941 942 943 944 962"; /*Caracteres acentuados (Separar con espacios)*/
function secuencia(){
var cSecuen = document.getElementById("listaSecuen").childNodes;
for(c=0; c<cSecuen.length; c++){
var vSecuen = cSecuen[c].childNodes;
for(i=0; i<vSecuen.length; i++){
while((" "+excep+" ").indexOf(" "+vS+" ") > -1) vS += 1;
if(vSecuen[i].innerHTML != undefined){
var sVineta= (vSecuen[i].childNodes[0].innerHTML != undefined) ? 0 : 1;
vSecuen[i].childNodes[sVineta].innerHTML = "&#" +vS+ ";";
vS = (vS == vSFin)? vS = vSIni : vS += 1;
}
}
}
}
</script>
<style type="text/css">
body {font-size:125%; color:#000000; background-color:#ffffff; }
h3 {margin-left:0.5em; }
p {font-size:0.75em; }
#listaAnim {width:10em; border:1px solid black; font-size:1em; }
#listaAnim dd {font-size:0.75em; position:relative; margin:1em 4em; }
.vineta , .vinetaAnim {position:absolute; left:-2em; top:0; font-size:1.2em; font-weight:bold;
font-family:"Times New Roman", Arial, serif; }
#listaSecuen {position:relative; width:32em; height:10em; margin:1em; }
.lista {position:relative; top:0; margin:1em 0 1em 4em; font-size:0.7em; }
#listaSecuen .vinetaS {color:#000000; background-color:#ffff66; font-weight:bold;
position:absolute; left:-1em; top:0; }
.listaS {position:relative; top:0; left:0; margin:1em; font-size:0.7em; }
.col {position:relative; float:left; margin-left:1.5em; }
.lista0 {left:0em; }
.lista1 {left:5em; }
.lista2 {left:10em; }
.lista3 {left:15em; }
.casino {font-size:1em; }
.casino dd {font-size:0.75em; position:relative; margin:1em 4em; }
dd .vinetaC {font-size:1.2em; width:1.2em; text-align:center;
font-family:arial,"times new roman", serif; position:absolute;
margin:0 -2em; }
.rojo {color:#ff0000; background-color:#ffffff; }
.negro {color:#000000; background-color:#ffffff; }
</style>
</head>
<body>
<!--[if lt IE 5.5000]>
<style>
.vineta , .vinetaAnim {left:1.2em; }
</style>
<![endif]-->
<h2>Listas simuladas. (IE6 / FF5)</h2>
<h3>Usa caracteres ASCII / Unicode como viñetas.</h3>
<h4>Con <tt>dl</tt> y <tt>dd</tt>.</h4>
<dl class="casino">
<dd><span class="vinetaC negro">♠</span>Picas.<br />
(spades)</dd>
<dd><span class="vinetaC negro">♣</span>Tréboles<br />
(clubs)</dd>
<dd><span class="vinetaC rojo">♦</span>Diamantes<br />
(diams)</dd>
<dd><span class="vinetaC rojo">♥</span>Corazones<br />
(hearts)</dd>
</dl>
<h4>Simulada con <tt>div</tt>.</h4>
<div class="lista">
<span class="vineta">☼</span>
Ítem con viñeta <br />
personalizada. <br />
</div>
<div class="lista">
<span class="vineta">⌐</span>
Ítem con viñeta <br />
personalizada. <br />
</div>
<div class="lista">
<span class="vineta">♫</span>
Ítem con viñeta <br />
personalizada. <br />
</div>
<div class="lista">
<span class="vineta">≈</span>
Ítem con viñeta <br />
personalizada. <br />
</div>
<h3>Con animación <i>mouseover</i>.</h3>
<dl id="listaAnim" onmouseover="anima()" onmouseout="clearTimeout(paso)">
<dd><span class="vinetaAnim">▀</span>Ítem con viñeta <br />
animada <br />
uno.
</dd>
<dd><span class="vinetaAnim">▀</span>Ítem con viñeta <br />
animada <br />
dos.
</dd>
<dd><span class="vinetaAnim">▀</span>Ítem con viñeta <br />
animada <br />
tres.
</dd>
</dl>
<h3>Usa una secuencia ordenada.</h3>
<div id="listaSecuen">
<div class="col">
<div class="listaS">
<span class="vinetaS"> </span>
0 Un ítem <br />
relleno relleno
</div>
<div class="listaS">
<span class="vinetaS"> </span>
1 Otro ítem <br />
relleno relleno
</div>
<div class="listaS">
<span class="vinetaS"> </span>
2 Otro ítem
</div>
<div class="listaS">
<span class="vinetaS"> </span>
3 Otro ítem <br />
relleno relleno
</div>
</div>
<div class="col">
<div class="listaS">
<span class="vinetaS"> </span>
4 Un ítem <br />
relleno relleno
</div>
<div class="listaS">
<span class="vinetaS"> </span>
5 Otro ítem <br />
relleno relleno
</div>
<div class="listaS">
<span class="vinetaS"> </span>
6 Otro ítem
</div>
<div class="listaS">
<span class="vinetaS"> </span>
7 Otro ítem <br />
relleno relleno
</div>
</div>
<div class="col">
<div class="listaS">
<span class="vinetaS"> </span>
8 Un ítem <br />
relleno relleno
</div>
<div class="listaS">
<span class="vinetaS"> </span>
9 Otro ítem <br />
relleno relleno
</div>
<div class="listaS">
<span class="vinetaS"> </span>
10 Otro ítem
</div>
<div class="listaS">
<span class="vinetaS"> </span>
11 Otro ítem <br />
relleno relleno
</div>
</div>
<div class="col">
<div class="listaS">
<span class="vinetaS"> </span>
12 Un ítem <br />
relleno relleno
</div>
<div class="listaS">
<span class="vinetaS"> </span>
13 Otro ítem <br />
relleno relleno
</div>
<div class="listaS">
<span class="vinetaS"> </span>
14 Otro ítem
</div>
<div class="listaS">
<span class="vinetaS"> </span>
15 Otro ítem <br />
relleno relleno
</div>
</div>
</div>
<input type="button" value="Ver Viñetas Griegas" onclick="secuencia()" />
<p>
La secuencia de las viñetas coincide con el orden Unicode. Con un nuevo click
se puede ver la progresión (Mayúsculas, minúsculas y recomienza).
El escript ignora los caracteres acentuados que estan entre la 'Ω' y la 'α'.
</p>
<p>
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-html401"
alt="Valid HTML 4.01 Transitional" height="31" width="88"></a>
</p>
</body>
</html>
- ¿Hay alguna forma de usar unicode en los list-style?.
- ¿Hay alguna manera elegante de hacer que un escript no caiga en nodos 'vacíos' en Firefox? (me pareció ver una, pero dentro de algún código que no recuerdo y por eso no lo puedo buscar).
Gracias
), es que estoy muy vago y esperaba algún código que no tuviera que desarmar 
.
Ja, ja, me encantan tus truquillos. 
