Foros del Web » Programación web » Javascript »

Texto en dos columnas

Estas en el tema de Texto en dos columnas en el foro de Javascript en Foros del Web. Es posible hacer que un texto comience en una columna y termine en la segunda? Una de las formas que puienso que podria ser es ...
  #1 (permalink)  
Antiguo 29/09/2005, 08:29
Avatar de virla  
Fecha de Ingreso: julio-2002
Ubicación: Rio Gallegos - Santa Cruz
Mensajes: 875
Antigüedad: 12 años, 5 meses
Puntos: 1
Texto en dos columnas

Es posible hacer que un texto comience en una columna y termine en la segunda?
Una de las formas que puienso que podria ser es sabiendo la cantidad de caracteres que pueden entrar en una linea de texto como para separarlo por lineas dependiendo de la cantidad de lineas digamos si es par no tendremos problemas, pero si es impar dejamos la primera columna con la cantidad de lineas impares y la segunda par, para que quede vistosamente bien. El tema es que hay que tener un buen control de las palabras porque puede ser que nos corte palabras mal o que quede pasando un pedasito de un texto y continue en la otra columna.
bueno es una idea si alguien me puede pasar un codigo para hacer esto o alguna idea lo adradeceria mucho
__________________
---->Sin ayuda no se llega a ningun lado<----
Virla
  #2 (permalink)  
Antiguo 29/09/2005, 14:21
Avatar de virla  
Fecha de Ingreso: julio-2002
Ubicación: Rio Gallegos - Santa Cruz
Mensajes: 875
Antigüedad: 12 años, 5 meses
Puntos: 1
alguien se da una idea de como hacer esto?
__________________
---->Sin ayuda no se llega a ningun lado<----
Virla
  #3 (permalink)  
Antiguo 30/09/2005, 06:49
Avatar de virla  
Fecha de Ingreso: julio-2002
Ubicación: Rio Gallegos - Santa Cruz
Mensajes: 875
Antigüedad: 12 años, 5 meses
Puntos: 1
nadie tiene idea de como hacer esto?
__________________
---->Sin ayuda no se llega a ningun lado<----
Virla
  #4 (permalink)  
Antiguo 01/10/2005, 14:25
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.368
Antigüedad: 12 años, 1 mes
Puntos: 317
Hola virla :

Como dice el tango : "el que no llora no mama".

No eres el primero al que se le ocurre hacer columnas. Y si hasta ahora nadie pudo, no nos vas a apurar repitiendo la pregunta todos los días.
Con una vez por semana debe ser suficiente .

Los problemas son algunos más de los que enumeraste arriba. Trata de encolumnar en cualquier procesador de texto, y una vez que tengas listo el documento empieza a cambiar la fuente, el tamaño de los caracteres, el espaciado, el formato de hoja. Y tendrás que ajustar a mano todo de nuevo.
Eso es justamente lo que pasa en cada navegador, que puede estar configurado distinto. Pero no puedes ir a ajustarlo a mano por todo el mundo.

En realidad, los navegadores saben donde cortar las palabras y donde termina el area disponible para texto. Alos fabricantes no les sería imposible hacer una etiqueta, una propiedad o un estilo para mostrar columnas.
Cuando el texto supera la capacidad de la primer columna solamente tendría que desbordar en la segunda. Lo de crear "contenedores" de columna dinamicamente ya es más complicado ( en el caso de que el texto no quepa en las dos primeras y haya que generar una tercera ), y lo de igualar las alturas, también.

El contenido del documento en los navegadores... ¿occidentales? ...fluye hacia abajo sin superar el ancho del panel. La lógica de las columnas es diferente, y por ahora sólo tenemos a los escripts para simular el efecto. Y no va a ser fácil.
Habrá que resignarse a sus muchas limitaciones.

El único que conozco capaz de leer la cantidad de líneas o "renglones" de un texto es para ( ¡y cuándo no! ) el Internet Explorer.

Dejo un ejemplo para que veas cómo trabaja. Tengo hecho otro que me parece más eficiente; pero si encima de que uso código propietario, pongo un ejemplo con tablas; seguro que va a aparecer alguno que no se aguante y me lo defenestre.
Igual vas a ver un método poco ortodoxo para alinear el contenido de los divs

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head><title>NUMERA L&Iacute;NEAS. </title>
<meta http-equiv=content-type content="text/html; charset=iso-8859-1">

<style>
body{font-size:100%; font-family:'times new roman' times serif;}
h3{text-align:center}
#contLin{position:absolute; top:0; left:5px; z-index:-1; text-align:right; vertical-align:botton; }
.laLinea{display: inline; z-index: -1; position: absolute; background-color: #cccccc; text-align:right; vertical-align:bottom; font-weight:bold; font-size:75%; font-family:monospace; width:30px; }
.laLinea img{width:0; height:90%; vertical-align:bottom; }
#contTex{margin-left:30px; }

</style>

<script>
var grisBlanco = "#cccccc";

function numerar() {
if(document.all){
contLin.innerHTML = ""; 
grisBlanco = "#cccccc";

var lineas = "";
var leeLin = contTex.getClientRects();
var totLin= leeLin.length;

for(L=0; L<totLin; L++){
derecha = leeLin[L].right + cuerpo.scrollLeft;
izquierda = leeLin[L].left + cuerpo.scrollLeft;
arriba = leeLin[L].top + cuerpo.scrollTop;
abajo = leeLin[L].bottom + cuerpo.scrollTop;
grisBlanco = (grisBlanco == "#cccccc") ? "#eeeeee" : "#cccccc";

lineas += "<DIV class='laLinea' style='top:" +arriba+ "; height:" +(abajo-arriba)+ "; background:" +grisBlanco+ "; '><img src='0.0'>" +L+ "</DIV>";

}
contLin.innerHTML = lineas;
}
}

</script>
</head>
<body id="cuerpo" onload="numerar()" onresize="numerar()">

<h2>Numera l&iacute;neas de texto.</h2>
N&uacute;meros en <tt>div</tt>.
<br /><br />
<div id="contTex">
<h3>Título.</h3>

&nbsp;Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto. 
<h4>Subtítulo.</h4>
&nbsp;Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.<br />
&nbsp;Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.<br />
&nbsp;Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto.<br />
&nbsp;Texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto. 
</div>

<div id="contLin"></div>

<br><br><br>

</body>

<!--
obj.getBoundingClientRect().right;//left top
-->
</html>
Dejo otros dos códigos que pueden aportar ideas que sirven para usar en otros navegadores también

Presentacion "por paginas"

Calculadora de palabras

Como recomendación final, te diría que vas a tener que bajar las pretensiones. Un escript capaz de mostrar columnas "pèrfectas" puede ser demasiado grande y complejo.

Una tentación es usar fuente de paso fijo. Todos sabemos que en las fuentes de ancho variable es practicamente imposible calcular el tamaño de un texto por la cantidad de caracteres; pero con una monospace es más fácil

serif
preterintencionalidad |
socialdemocratización |


monospace
preterintencionalidad |
socialdemocratización |



El texto tampoco deberá tener formato; sería dificil cortar

Código:
<span id="mi_id">QWERTYUIOP QWERTYUIOP</span>
para meter un QWERTYUIOP en cada columna.

Como ideas para empezar, me parece que ya está bien.

Mucha suerte con el proyecto

furoya
  #5 (permalink)  
Antiguo 03/10/2005, 07:28
Avatar de virla  
Fecha de Ingreso: julio-2002
Ubicación: Rio Gallegos - Santa Cruz
Mensajes: 875
Antigüedad: 12 años, 5 meses
Puntos: 1
gracias por la ayuda, hace unos años atras he visto que el diario la nacion de argentina tenia sus noticias presentadas en dos columnas y si mal no recuerdo se podia cambiar a 3 o ponerlas en una, creo que esa vez me hice una copia de esa pagina para ver el codigo pero no la encuentro era tan simple como esa funcion de poder cambiar el tamaño de la fuente de la nota.
Bueno segire buscado.
muchas gracias igual por tu tiempo
__________________
---->Sin ayuda no se llega a ningun lado<----
Virla
  #6 (permalink)  
Antiguo 03/10/2005, 12:45
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.368
Antigüedad: 12 años, 1 mes
Puntos: 317
No, de nada.

Entré en el sitio

http://www.lanacion.com.ar/

y vi lo de cambiar la fuente de la nota, pero no lo de las columnas.

Seguramente lo sacaron porque no funcionaba o lo haciá solamente en algunos navegadores. Es como te conté más arriba. Hay montones de circunstancias que pueden hacer fallar un script de encolumnado. Te diría que casi hay que hacerlo a medida del texto a encolumnar. Algo imposible para un sitio que actualiza noticias cada 15 minutos.

Con respecto a

Cita:
... era tan simple como esa funcion de poder cambiar el tamaño de la fuente...
supongo que no te refieres a hacer un click en una opción.
Eso seguro es fácil, pero el escript que se dispare detrás puede ser enorme y complejo.

De cualquier forma, hay algunos sitios que guardan páginas históricas que ya no están en línea. No creo que también guarden los .JS, pero intenta buscar allí.

De momento no se me ocurre otra cosa.
  #7 (permalink)  
Antiguo 03/10/2005, 12:48
Avatar de virla  
Fecha de Ingreso: julio-2002
Ubicación: Rio Gallegos - Santa Cruz
Mensajes: 875
Antigüedad: 12 años, 5 meses
Puntos: 1
no hace tiempo que lo saco, calculo que como mas de un año, despues de hacerle algunos cambios de diseño a la pagina. pero si estaba eso lo recuerdo muy bien
__________________
---->Sin ayuda no se llega a ningun lado<----
Virla
  #8 (permalink)  
Antiguo 03/10/2005, 13:14
Avatar de leoj90
Usuario baneado!
 
Fecha de Ingreso: agosto-2005
Mensajes: 1.367
Antigüedad: 9 años, 4 meses
Puntos: 0
Da un ejemplo de q es lo q quieres si ya no esta busca algun otro lugar donde esté.
Y aunq pongas 10 mensajes de q te contesten, nadie te va a contestar sino dices bien lo q quieres hacer y los demas no entienden, asi q evita esos mensajs bobos.
  #9 (permalink)  
Antiguo 03/10/2005, 17:46
Avatar de virla  
Fecha de Ingreso: julio-2002
Ubicación: Rio Gallegos - Santa Cruz
Mensajes: 875
Antigüedad: 12 años, 5 meses
Puntos: 1
ok, gracias muchachos, no se preocupen
__________________
---->Sin ayuda no se llega a ningun lado<----
Virla
  #10 (permalink)  
Antiguo 16/12/2007, 01:44
Avatar de virla  
Fecha de Ingreso: julio-2002
Ubicación: Rio Gallegos - Santa Cruz
Mensajes: 875
Antigüedad: 12 años, 5 meses
Puntos: 1
Re: Texto en dos columnas

Bueno muchachos aca tengo esto que hace tiempo estaba buscando pero necesito la ayuda de ustedes.
Aca les dejo el link de la pagina de la nacion vieja donde se puede probar el tema de las dos columnas
http://www.cedepesca.org.ar/noticias...cion_pesca.htm

aca les dejo donde poder bajarce la pagina y el javascript para ver si alguno de los capos en javascript puede hacer alguna adaptacion y asi poder utilizarlo
http://www.cedepesca.org.ar/noticias...otaLaNacion.js

Espero pronto poder tener alguna buena noticia con esto
desde ya gracias a los que puedan hacer algo

PD: lo que no me agrada es que divide la nota en varias partes donde hay que presionar ver mas y aparece la continuacion de la noticia asi tantas veces asta que se vio toda. seria interesante que esa opcion no funcione
__________________
---->Sin ayuda no se llega a ningun lado<----
Virla
  #11 (permalink)  
Antiguo 16/12/2007, 09:55
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 11 años, 1 mes
Puntos: 44
Re: Texto en dos columnas

Hola virla, qué tal:


Interesantísimo tema al que le dedique un post en (X)HTML, http://www.forosdelweb.com/f53/prese...imagen-521156/, y del que no saqué practicamente nada en limpio.

Ahora que he visto lo de La Nación se me vienen a la cabeza nuevas ideas...

Como se ve, es relativamente fácil colocar texto en dos columnas (aunque todavía no lo he estudiado, seguro que no resulta complicado, el código es bastante limpio y legible).


Lo que no tengo claro es cómo juegan con el cálculo de cuánto cabe en una columna y cómo calcular cuántas columnas hacen falta. Pero creo que lo de que aparezca aquello de Siguiente >> es cómodo porque con columnas demasiado largas habría que hacer scroll para seguir en la siguiente columna, algo quizás incómodo.


Bueno, a ver si saco un rato esta semana para mirarlo.

Un saludo
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #12 (permalink)  
Antiguo 17/12/2007, 22:50
Avatar de virla  
Fecha de Ingreso: julio-2002
Ubicación: Rio Gallegos - Santa Cruz
Mensajes: 875
Antigüedad: 12 años, 5 meses
Puntos: 1
Re: Texto en dos columnas

ok espero que alguien mas se sume a esta propuesta de poder hacer algo que funcione bien y que todos podamos utilizar, ya que la mayoria soño con poder presentar textos de esta manera.
__________________
---->Sin ayuda no se llega a ningun lado<----
Virla
  #13 (permalink)  
Antiguo 19/12/2007, 07:26
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.368
Antigüedad: 12 años, 1 mes
Puntos: 317
Re: Texto en dos columnas

Hola de nuevo :

realmente pensé que ya habías resuelto el tema, virla, y que por eso no volvías. Quiero decir, que tampoco te ibas a ofender por un comentario de leoj90.

Recuerdo otro tema parecido

Usar UL para crear layout de 3 columnas

Y le eché una mirada rápida al JS.

Parece que funcionaba en Netscape. ¿Alguien lo probó en Firefox o Opera?

Vamos a ver qué dice derkenuke ( Hola!) que es el que sabe, porque a pesar de su opinión, a mi me parece demasiado código. Y muy "ajustado"; digo, que depende de muchas medidas muy justas y que no siempre se pueden controlar (como la fuente a utilizar y su tamaño, que es algo que ya mencioné más arriba).

Yo seguiría usando mi ejemplo de

Presentacion "por paginas"

ya que el de La Nación tampoco calcula el tamaño total y simplemente mete el contenido "hasta donde llegue". Que es justamente lo que no te agrada.

En este tiempo pegeñé varias maneras más, pero cada una tiene su limitación. Explícanos un poco mejor cuál es tu proyecto y vemos si alguien tiene el código justo. Porque adaptar uno como el que muestras no siempre es posible; En este caso, para que no complete con más columnas, hay que escribirlo de nuevo. Bah, en realidad hay que escribir otro ...
  #14 (permalink)  
Antiguo 19/12/2007, 17:34
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 11 años, 1 mes
Puntos: 44
Re: Texto en dos columnas

Cita:
Iniciado por furoya Ver Mensaje
Vamos a ver qué dice derkenuke ( Hola!) que es el que sabe, porque a pesar de su opinión, a mi me parece demasiado código. Y muy "ajustado"; digo, que depende de muchas medidas muy justas y que no siempre se pueden controlar (como la fuente a utilizar y su tamaño, que es algo que ya mencioné más arriba).
Gracias por los elogios furoya

Posteo para decir que me he metido de lleno con el código de La Nación, y que es horrible . El HTML está lleno de tablas y de etiquetas <div> <span> <font> y <b> innecesarias, y las hay peores... tiene muchas partes que son invisibles, y las que realmente leemos se activan mediante javascript. El javascript tiene cálculos complejos de medidas "ajustadas" como bien dices, todo está medido al píxel, y en el momento que falla alguna medida, se acabará viendo mal. Tiene algunos comentarios, pero para entenderlo a simple lectura, necesitaría 3 o 4 veces más carga de comentarios. Está lleno de funciones que llaman a otras funciones... no hay nada claro.


He limpiado muchísimo el documento, para quedarme únicamente con lo esencial: El marco que es capaz de representar la columna única y la doble columna. Todavía tengo que limpiarlo un poco más y mirar el javascript, pero cuando lo tenga limpito lo postearé para que podáis leer el código cómodamente y a ver si hay alguien que aporta algo, como una explicación por ejemplo.


PD: Todavía no me he enterado en realidad de cómo funciona el sistema de dos columnas, y eso que ya llevo bastante rato intentandolo averiguar... espero que cuando limpie el código se me abran los ojos.


Lo dicho, esperad otro post mío y a ver si sacamos de ésto algo en claro, creo que éste podría ser un post revelador...


Un saludo a todos
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #15 (permalink)  
Antiguo 21/12/2007, 15:03
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.368
Antigüedad: 12 años, 1 mes
Puntos: 317
Re: Texto en dos columnas

De nada, derkenuke. Es indudable que te gusta destripar códigos. Pero que éste sea una vergüenza, y que le salten bichos por todos lados ya te quita las ganas de mirarlo.

Con una pasada ya me di cuenta por qué lo sacaron de línea en cuanto lo probaron en otros navegadores que no eran IE.

Vamos a retomar un poco el tema desde el principio. Lo que desde ya tiene que quedar claro es que no podemos hacer 2 ó más columnas en JS. Eso lo tiene que hacer el navegador; lo más a que podemos aspirar es a una simulación llena de limitaciones. Y la que elijamos hacer será la que mejor se adapte a cada proyecto.

Un texto a 2 columnas está dentro de un mismo bloque, sólo se corta visualmente y eso permite mantener formatos, enlaces y demás sin modificar el documento.
Nosotros tendremos que dividirlo y meter cada columna en un bloque distinto, lo que destruye el documento y -como mínimo- le quita accesibilidad.

Firefox ya las tiene, y se llaman desde el CSS; así que no nos vamos a ocupar de él.

Otro problema es decidir qué hacemos si al dividir en 2 nos quedan columnas de mayor altura que la de la ventana. Porque si tenemos que usar scrollbars las columnas carecen de sentido.

Ahora empecemos. Creo que hay 3 maneras de simular estas columnas.

En IE existe -como ya mencioné y puse ejemplo- getClientRects(); que nos permite no sólo contar las líneas, sino saber donde empiezan o terminan en altura, y nos deja usar caracteres de distinto tamaño. Así, en vez de "cortar" párrafos para pasar a otro bloque, lo que haremos es duplicar el contenido en cada bloque, medir hasta la línea de "la mitad", darle a esa columna esa altura y desplazar el contenido de la segunda la misma altura, hacia arriba.

Pero como no funcionan en otros navegadores, vamos a usar el "truco" del código de LN : le damos una medida absoluta a la fuente y la usamos para todo el texto.

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>DIVIDE TEXTO.</title>
<script type="text/javascript">

var unidad, cont1, alturaCol, semiAltCol, lineasCol;
var muestra = 1;

function inicio(){
document.getElementById("col1").style.width = "300px";
unidad = parseInt(document.getElementById("unid").offsetHeight);
cont1 = document.getElementById("col1").innerHTML;
alturaCol = parseInt(document.getElementById("col1").offsetHeight);
lineasCol = alturaCol / unidad;
semiAltCol = (Math.ceil(lineasCol / 2)) * unidad;

if(muestra == 1){columnaD();} else{columnaS();}
}

function columnaD(){
document.getElementById("pag").style.height = semiAltCol + 20 +"px";
document.getElementById("col2").style.display = "block";
document.getElementById("contCol2").innerHTML = cont1;
document.getElementById("col1").style.height = document.getElementById("col2").style.height = semiAltCol +"px";
document.getElementById("col1").style.width = "300px";
document.getElementById("contCol2").style.marginTop = "-"+ semiAltCol +"px";
}

function columnaS(){
document.getElementById("col2").style.display = "none";
document.getElementById("col1").style.height = "auto";
document.getElementById("col1").style.width = "610px";
document.getElementById("pag").style.height = parseInt(document.getElementById("col1").offsetHeight) + 20 +"px";
}

function cambia(){
if(document.getElementById("col2").style.display == "block" ){
document.getElementById("pag").title = "Dos columnas / Ajusta al tamaño.";
muestra = 2;
}
else{
document.getElementById("pag").title = "Una columna / Ajusta al tamaño.";
muestra = 1;
}
inicio();
}

onload = inicio;
</script>

<style type="text/css">
body{background-color : black; color : white; font : 100%/125% arial, helvetica, sans-serif; }
#unid , #col1 , #col2 {font: 90%/125% arial, helvetica, sans-serif; position: absolute; }
#col1 , #col2 {width: 300px; height: auto; overflow: hidden; top: 10px; left: 10px; background-color: white; color: black; text-align:justify; /*text-justify : auto;*/ }
#col2 {top: 10px; left: 320px;}
#pag {position: relative; height: auto; width:630px; background-color: silver; cursor : hand;}
#pag {cursor : pointer;}
span{background-color : red; font-weight : bold;}
h2 , p{font-family : "times new roman", times, georgia, serif;}
</style>
</head>
<body>
<div id="unid">.</div>
<h2>Muestra el texto en una o dos columnas.</h2>

<div id="pag" onmousedown="cambia()" title="una columna"><div id="col1">
01 yctrbqweu crtbqweui tyr ctyw yjhuety tyeiqeru tyor poetuv .<br>
02 uiowcty eqrouo yp qeotvuiqe oiueq poiueqp uyv uy ewripo pewqroiu`p968 v'6 .<br>
03 568091u4 26 po.<br>
04 yctrbqweu crtbqweui tyr cbyqdar rt tyiqeru tyor poetuv .<br>
05 yctrbqweu crtbqweui tyr ctyiqeru tyor poetuv.<br>
06 uiowcty eqrouo yp qeotvuiqe oiueq poiueqp uyv uy ewripo pewqroiu`p968 v'6.<br>
07 568091u4 26 po.<br>
08 yctrbqweu crtbqweui tyr ctyiqeru tyor poetuv.<br>
09 uiowcty eqrouo yp qeotvuiqe oiueq poiueqp uyv uy ewripo pewqroiu`p968 v'6.<br>
10 568091u4 26 po.<br><span>
11 yctrbqweu crtbqrs tybwvwrweui tyr ctyiqeru tyor poetuv.<br>
12 yctrbqweu crtbqweui tyr ctyiqeru tyor poetuv.<br>
13 uiowcty eqrouo yp qeotvuiqe oiueq poiueqp uyv uy ewripo pewqroiu`p968 v'6</span>.<br>
14 568091u4 26 po.<br>
15 yctrbqweu crtbqweui tyr ctyiqeru tyor poetuv .<br>
16 yctrbqweu crtbqweui tyr ctyiqwvbywreru tyor poetuv.<br>
17 uiowcty eqrouo yp qeotvuiqe oiueq poiueqp uyv uy ewripo pewqroiu`p968 v'6.<br>
18 568091u4 26 po.<br>
19 yctrbqweu crtbqwbyrwr ybutey weui tyr ctyiqeru tyor poetuv.<br>
20yctrbqweu crtbqweui tyr ctyiqeru tyor poetuv.<br>
21 uiowcty eqrouo yp qeotvuiqe oiueq poiueqp uyv uy ewripo pewqroiu`p968 v'6.<br>
22 568091u4 26 po.<br>
</div>

<div id="col2"><div id="contCol2"></div></div>
</div>

<p>Al cambiar el tama&ntilde;o de fuente se debe ajustar la/s columna/s con click.</p>
</body>
</html>
La ventaja es que muestra los formatos. La desventaja es que su lectura será desastrosa para navegadores de voz y quizá para impresión. Y no se puede aumentar el tamaño de texto*.

Otro método es el que enlacé arriba. Se corta el texto en cadenas de 1 párrafo c/u y se rellenan las columnas. Cuando llegamos al "medio", cortamos ese párrafo en palabras y las vamos distribuyendo mientras las alturas se mantengan o aumente la primera, que puede ser 'una línea más alta' que la segunda.
Por supuesto, no puede haber etiquetas de formato, porque es complicado cortarles el texto, y al igual que en el ejemplo anterior, un id no se puede duplicar.

Por último ... creo que nos estamos ahogando en un vaso de agua. Lo difícil es medir el contenido de una columna para meterlo en dos; pero es mucho más fácil hacer 2 columnas y después juntar el contenido en 1. Para volver a las 2, simplemente reescribimos el documento original o recargamos. Así no ahorramos el escript que hace todos los cálculos por nosotros.

Y por supuesto, tampoco se puede cambiar la medida del texto cuando esté a 2 columnas.

Espero que alguna de estas ideas sirva para algo.

Y virla, no traigas más porquerías.

[edit]
* Me quedé pensando en el tamaño de texto. Como habrán visto en el ejemplo, la altura de cada línea se saca de un caracter y no del CSS, porque la idea era que se leyera dinamicamente. Corregí el código para usar -ahora sí- medidas relativas, pero no encontré un evento que detecte cuándo usamos "Ver > Tamaño de texto", así que hay que cliquear cada vez que querramos ajustar las columnas.
Peor es nada.
[/edit]

Última edición por furoya; 23/12/2007 a las 07:08 Razón: mejorar el ejemplo
  #16 (permalink)  
Antiguo 23/12/2007, 19:01
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 11 años, 1 mes
Puntos: 44
Re: Texto en dos columnas

Hola de nuevo furoya, muy buen código:

No se me había ocurrido eso de medir el alto de una línea dinámicamente... es bastante exacto. En IE6 me ha funcionado de perlas, ninguna línea se corta y se actualiza solito cuando aumentamos o disminuímos el tamaño del texto.
Sin embargo en FF2 desde que carga ya no encajan del todo las dos columnas... se ve un poco de la línea 12 en la primera columna estando su mayoría en la segunda columna (unos 2 o 3 px). Luego el error va aumentando si cambiamos de tamaño el texto, y el tamaño de la capa se va deformando, incluso si lo recalculamos con el click sale deformado : S

No he sabido solucionarlo...


Si averiguo más del tema seguiré posteando.


Un saludo
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #17 (permalink)  
Antiguo 30/12/2007, 05:14
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.368
Antigüedad: 12 años, 1 mes
Puntos: 317
Re: Texto en dos columnas

Bueno, el código no es para Firefox. Ese navegador ya tiene un CSS para hacer columnas. A simple vista parece que debería funcionar, pero justamente el punto flojo de FF son los formatos para caracteres; y quizá que sea un poco lento para los escripts.
Si el problema fuera éste último, con algunos setTimeout() para darle tiempo a cambiar formatos antes de leerlos, bastaría.

Lo de la línea que se sobrepasa es normal, y puede ocurrir en IE también. Resulta que le puse un interlineado de 125%, cuando el default debe ser de 110 ó 120. Prefiero que se vea un poco de subrayado o color de fondo a que el navegador me redondee las alturas relativas para abajo y me corte algunas letras si son muy pequeñas.

Lo de medir fuentes del lado "cliente" ya lo había usado antes (y creo que tunait y Caricatos también). El error que suelen arrastrar los diseñadores gráficos que se pasan al web es justamente creer que lo que ven en su máquina es lo mismo que verán los demás; como ocurre con las impresiones, que no cambian el tamaño del papel ni de la tipografía.

Este buen muchacho ancló su escript a una fuente y su tamaño. Y el navegador puede hacer cualquier cosa ...

A veces envidio tus ganas de hacer disección (en este caso "autopsia") de códigos. Yo ya no tengo voluntad y cuando vi el aparato que trajo virla casi huyo despavorido. Aunque sé que tienes razón en cuanto a que siempre puede haber algo rescatable para aprender.

Y hablando de virla ¿estará de vacaciones?. ¿o, ahora sí, con los ejemplos que pusimos ya habrá resuelto su problema?

cuantos lineas de texto tengo en un div?

Última edición por furoya; 30/10/2008 a las 16:36 Razón: Agregar enlade
  #18 (permalink)  
Antiguo 30/12/2007, 15:51
Avatar de derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 11 años, 1 mes
Puntos: 44
Re: Texto en dos columnas

Voy a hacer una aportación más, no sé si será la última.

Este script es para IE también, me he despreocupado de FF por que ya tiene CSS propio. No cuento otros navegadores como Opera, que lo he probado y funcionar funciona, pero se descoloca todo bastante, se calculan mal las alturas...


Bueno, mi script se basa en coger cada palabra del texto dado, y meterla en un DIV. Es un poco lentorro, pero se puede soportar. Evidentemente el texto no puede ser demasiado largo... Una vez tenemos "encapsulada" cada palabra, podemos controlar dónde se encuentra, si empieza nueva línea, o si se sale del DIV que contiene la columna.

En IE no sale nada mal, la verdad, aunque el CSS está un poco ajustado. He comentado el script línea por línea para que todo el mundo lo pueda entender, a ver si avanzamos en ésto para los demás navegadores.

Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<
head>
<
meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<
meta name="Author" content="derkeNuke" />
<
title>Página nueva</title>
<
style type="text/css">
body {
    
height:100%;
}
#elArticulo {
    
width58%; 
    
background-color#FFF4D2; 
    
height80%; 
    
font-size0.7em
    
font-familyverdana
    
margin:0
    
padding:50px 10px 30px 20px
    
line-height1.3em
}
#elArticulo p {
    
margin:0;
    
margin-bottom1.3em;
}
.
pal {
    
displayinline;
}
.
columnata {
    
clearboth;
    
width97%;
    
height700px;
}
.
columna {
    
width48%;
    
padding3px
    
background-color#EDFFCC;
    /*border: solid 1px #669900; */
    
height700px;
    
float:left;
}
</
style>
</
head>

<
body>



<
div id="elArticulo">
    <
p>TEXTO 1 -- Lorem ipsum dolor sit ametconsectetuer adipiscing elitNunc malesuadaorci nec convallis elementumjusto dui sodales feliseu ullamcorper ante risus a miMauris at maurisUt et ipsum quis mi accumsan consectetuerDonec dictum sem nec anteProin magna liberoelementum egetscelerisque necconsequat vitaeduiPellentesque malesuada mauris vel diamVestibulum a semVivamus magna massaullamcorper acvarius pretiumaliquet necarcuNam tempor accumsan nullaFusce ipsumQuisque ac ipsum non nisi commodo tinciduntEtiam turpisDuis bibendum velit non nislNam volutpat lacinia eratNunc euismodSuspendisse vel dolor non arcu pellentesque ultrices.</p>

    <
p>Sed iaculis libero et nislSed congue dui sit amet estMorbi sit amet elit vel turpis varius tristiqueMorbi ac miCum sociis natoque penatibus et magnis dis parturient montesnascetur ridiculus musAenean sit amet nibh sed turpis nonummy euismodMaecenas magnaEtiam suscipiturna vitae sodales euismoddiam orci mollis liberoat pulvinar arcu sapien sit amet lectusNunc sagittis lobortis miQuisque ultrices.</p>

    <
p>In semSed suscipit ipsum at maurisUt aliquam orci ullamcorper ligulaNam sed arcu et nulla volutpat egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostraper inceptos hymenaeosSuspendisse rhoncusSuspendisse venenatis sapien vitae loremMauris porta quam non nuncCum sociis natoque penatibus et magnis dis parturient montesnascetur ridiculus musPellentesque quam justodapibus sedullamcorper acsuscipit egetmassaSed suscipit ipsum at maurisUt aliquam orci ullamcorper ligulaNam sed arcu et nulla volutpat egestas.</p>

    <
p>Integer a nislEtiam lectus magnapulvinar consectetuerelementum vitaeluctus rutrumlacusCras leoIn faucibusdui a tempor volutpatpurus magna nonummy antenec bibendum erat nunc convallis arcuPraesent convallisMauris non liberoVivamus nuncSed diamMorbi pulvinar nulla sodales ipsumNam ac turpis eget ipsum consequat euismod.</p>
</
div>
<
button type="button" onclick="dosColumnas()">Dos columnas</button>



<
script type="text/javascript">
<!--

// altura total del documento
var doc_height document.body.clientHeight || window.innerHeight;

// document.getElementById abreviado
function $(x) { return document.getElementById(x); }

/*
    El código coge cada palabra de la capa $("elArticulo"), y la mete en un DIV. 
    Ese DIV se mide en altura y se hallan sus coordenadas. 
    Se va colocando en columna1 los DIVs, uno por uno. 
    Siempre sabemos en que número de línea nos encontramos gracias a las coordenadas. 
    También sabemos el número de líneas que caben gracias a que medimos el alto de una palabra y el alto del DIV columna1.

    Cuando colocamos una palabra (o un salto de línea) y nos hemos pasado de la cantidad lineasCaben de columna1, entonces pasamos a poner palabras en columna2.
*/
function dosColumnas() {
    var 
capa = $("elArticulo");
    var 
hijos capa.childNodes;
    
// voy a dibujar las dos columnas en la capa
    
var columnata document.createElement("DIV");                // columnata contiene las dos columnas c1 y c2
    
columnata.className "columnata";
    var 
c1 document.createElement("DIV");
    
columnata.style.height c1.style.height 0.8*doc_height +"px";
    
c1.className "columna";
    var 
c2 c1.cloneNode(true);
    
columnata.appendChild(c1);
    
columnata.appendChild(c2);
    
capa.appendChild(columnata);
    
// fin del dibujo de las dos columnas
    // Variables principales para ir colocando palabra por palabra
    
var loPongoEn c1;                    // controlará en qué columna ponemos las palabras
    
var alturaMaxLoPongoEn loPongoEn.offsetHeight;        // la altura de loPongoEn
    
var lineasCaben;                    // no lo sabemos aún porque no sabemos lo que mide una línea
    
var lineasVamos=0;                    // contador para saber por qué linea vamos
    
var x0;                                // valor de la coordenada x de una palabra para la que empieza una linea nueva.
    // Bucle para recorrer los párrafos de capa, uno a uno
    
for(var i=0l=hijos.lengthi<li++) {
        if( 
hijos[i].nodeType==&& hijos[i].tagName.toUpperCase()=="P" ) {
            var 
texto hijos[i].childNodes[0].nodeValue;
            var 
palabras texto.split(" ");
            
// Por cada palabra del párrafo, la vamos añadiendo
            
for(var j=0n=palabras.lengthj<nj++) {
                var 
encapsulado document.createElement("DIV");                    // creamos el DIV
                
encapsulado.className "pal";                                        // lo ponemos inline
                
encapsulado.appendChilddocument.createTextNode(palabras[j]) );    // le dibujamos la palabra al DIV
                
loPongoEn.appendChild(encapsulado);                                    // lo añadimos a la columna
                
loPongoEn.appendChilddocument.createTextNode(" ") );                // añadimos a la columna el espacio detrás de la palabra    
                
if( lineasCaben == undefined )                    // si no estaba definido lineasCaben, ahora lo podemos definir
                    
lineasCaben Math.flooralturaMaxLoPongoEn / (encapsulado.offsetHeight+1) );
                var 
pos findPos(encapsulado)[0];                // hallamos su coordenada X
                
if( x0 == undefined x0 pos;                    // si x0 no estaba definido, ahora que colocamos la primera palabra la podemos definir
                
else if( x0 == pos lineasVamos++;                // si comenzamos una nueva línea, la contabilizamos
                
if( lineasVamos >= lineasCaben ) {                // Hemos puesto una línea más de las que cabían. Nos tenemos que arrepentir de haber puesto la ultima palabra
                    
loPongoEn.removeChildloPongoEn.lastChild );        // eliminamos el espacio en blanco (nodo de texto)
                    
loPongoEn.removeChildloPongoEn.lastChild );        // eliminamos la última palabra, la de arrepentimiento
                    
j--;                                        // repetir la palabra, pero ya en c2
                    // reseteamos las variables principales
                    
loPongoEn c2;    
                    
lineasVamos 0;
                    
x0 undefined;
                }

            }
            
loPongoEn.appendChilddocument.createElement("P") );        // dejamos un espacio entre párrafo y párrafo
            
lineasVamos++;                                                // contabilizamos el espacio como linea nueva
            
if( lineasVamos >= lineasCaben ) {                            // Hemos puesto una línea más de las que cabían. Nos tenemos que arrepentir de haber la última separación P
                
loPongoEn.removeChildloPongoEn.lastChild );                // eliminamos la separación
                // reseteamos las variables principales
                
loPongoEn c2;
                
lineasVamos 0;
                
x0 undefined;
            }
        }
    }
    
// Eliminación del texto original
    // elimino todos los hijos de capa que no sean DIVS!
    
for(var i=0i<hijos.lengthi++) {
        if( !(
hijos[i].nodeType==&& hijos[i].tagName.toUpperCase()=="DIV") ) {
            
capa.removeChildhijos[i] );
            
i--;
        }
    }
}


// créditos findPos: http://www.quirksmode.org/js/findpos.html
function findPos(obj) {
    var 
curleft curtop 0;
    if (
obj.offsetParent) {
        
curleft obj.offsetLeft
        curtop 
obj.offsetTop
        
while (obj obj.offsetParent) {
            
curleft += obj.offsetLeft
            curtop 
+= obj.offsetTop
        
}
    }
    return [
curleft,curtop];





// -->
</script>

</body>
</html> 

Bueno, a ver si os gusta. Se podría implementar y todo con confianza, pero no he probado a aumentar tamaños de texto ni a jugar con formatos...


Otra manera de hacerlo sería incluir párrafo por párrafo, y allí donde nos pasemos de la altura máxima de la columna entonces desmigajamos el párrafo en palabras...


Un saludo, y feliz 2008 ya
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.
  #19 (permalink)  
Antiguo 30/12/2007, 21:31
Avatar de virla  
Fecha de Ingreso: julio-2002
Ubicación: Rio Gallegos - Santa Cruz
Mensajes: 875
Antigüedad: 12 años, 5 meses
Puntos: 1
Re: Texto en dos columnas

Cita:
Iniciado por derkenuke Ver Mensaje
Voy a hacer una aportación más, no sé si será la última.

Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
<
html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<
head>
<
meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<
meta name="Author" content="derkeNuke" />
<
title>Página nueva</title>
<
style type="text/css">
body {
    
height:100%;
}
#elArticulo {
    
width58%; 
    
background-color#FFF4D2; 
    
height80%; 
    
font-size0.7em
    
font-familyverdana
    
margin:0
    
padding:50px 10px 30px 20px
    
line-height1.3em
}
#elArticulo p {
    
margin:0;
    
margin-bottom1.3em;
}
.
pal {
    
displayinline;
}
.
columnata {
    
clearboth;
    
width97%;
    
height700px;
}
.
columna {
    
width48%;
    
padding3px
    
background-color#EDFFCC;
    /*border: solid 1px #669900; */
    
height700px;
    
float:left;
}
</
style>
</
head>
 
<
body>
 
 
 
<
div id="elArticulo">
    <
p>TEXTO 1 -- Lorem ipsum dolor sit ametconsectetuer adipiscing elitNunc malesuadaorci nec convallis elementumjusto dui sodales feliseu ullamcorper ante risus a miMauris at maurisUt et ipsum quis mi accumsan consectetuerDonec dictum sem nec anteProin magna liberoelementum egetscelerisque necconsequat vitaeduiPellentesque malesuada mauris vel diamVestibulum a semVivamus magna massaullamcorper acvarius pretiumaliquet necarcuNam tempor accumsan nullaFusce ipsumQuisque ac ipsum non nisi commodo tinciduntEtiam turpisDuis bibendum velit non nislNam volutpat lacinia eratNunc euismodSuspendisse vel dolor non arcu pellentesque ultrices.</p>
 
    <
p>Sed iaculis libero et nislSed congue dui sit amet estMorbi sit amet elit vel turpis varius tristiqueMorbi ac miCum sociis natoque penatibus et magnis dis parturient montesnascetur ridiculus musAenean sit amet nibh sed turpis nonummy euismodMaecenas magnaEtiam suscipiturna vitae sodales euismoddiam orci mollis liberoat pulvinar arcu sapien sit amet lectusNunc sagittis lobortis miQuisque ultrices.</p>
 
    <
p>In semSed suscipit ipsum at maurisUt aliquam orci ullamcorper ligulaNam sed arcu et nulla volutpat egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostraper inceptos hymenaeosSuspendisse rhoncusSuspendisse venenatis sapien vitae loremMauris porta quam non nuncCum sociis natoque penatibus et magnis dis parturient montesnascetur ridiculus musPellentesque quam justodapibus sedullamcorper acsuscipit egetmassaSed suscipit ipsum at maurisUt aliquam orci ullamcorper ligulaNam sed arcu et nulla volutpat egestas.</p>
 
    <
p>Integer a nislEtiam lectus magnapulvinar consectetuerelementum vitaeluctus rutrumlacusCras leoIn faucibusdui a tempor volutpatpurus magna nonummy antenec bibendum erat nunc convallis arcuPraesent convallisMauris non liberoVivamus nuncSed diamMorbi pulvinar nulla sodales ipsumNam ac turpis eget ipsum consequat euismod.</p>
</
div>
<
button type="button" onclick="dosColumnas()">Dos columnas</button>
 
 
 
<
script type="text/javascript">
<!--
 
// altura total del documento
var doc_height document.body.clientHeight || window.innerHeight;
 
// document.getElementById abreviado
function $(x) { return document.getElementById(x); }
 
/*
    El código coge cada palabra de la capa $("elArticulo"), y la mete en un DIV. 
    Ese DIV se mide en altura y se hallan sus coordenadas. 
    Se va colocando en columna1 los DIVs, uno por uno. 
    Siempre sabemos en que número de línea nos encontramos gracias a las coordenadas. 
    También sabemos el número de líneas que caben gracias a que medimos el alto de una palabra y el alto del DIV columna1.
 
    Cuando colocamos una palabra (o un salto de línea) y nos hemos pasado de la cantidad lineasCaben de columna1, entonces pasamos a poner palabras en columna2.
*/
function dosColumnas() {
    var 
capa = $("elArticulo");
    var 
hijos capa.childNodes;
    
// voy a dibujar las dos columnas en la capa
    
var columnata document.createElement("DIV");                // columnata contiene las dos columnas c1 y c2
    
columnata.className "columnata";
    var 
c1 document.createElement("DIV");
    
columnata.style.height c1.style.height 0.8*doc_height +"px";
    
c1.className "columna";
    var 
c2 c1.cloneNode(true);
    
columnata.appendChild(c1);
    
columnata.appendChild(c2);
    
capa.appendChild(columnata);
    
// fin del dibujo de las dos columnas
    // Variables principales para ir colocando palabra por palabra
    
var loPongoEn c1;                    // controlará en qué columna ponemos las palabras
    
var alturaMaxLoPongoEn loPongoEn.offsetHeight;        // la altura de loPongoEn
    
var lineasCaben;                    // no lo sabemos aún porque no sabemos lo que mide una línea
    
var lineasVamos=0;                    // contador para saber por qué linea vamos
    
var x0;                                // valor de la coordenada x de una palabra para la que empieza una linea nueva.
    // Bucle para recorrer los párrafos de capa, uno a uno
    
for(var i=0l=hijos.lengthi<li++) {
        if( 
hijos[i].nodeType==&& hijos[i].tagName.toUpperCase()=="P" ) {
            var 
texto hijos[i].childNodes[0].nodeValue;
            var 
palabras texto.split(" ");
            
// Por cada palabra del párrafo, la vamos añadiendo
            
for(var j=0n=palabras.lengthj<nj++) {
                var 
encapsulado document.createElement("DIV");                    // creamos el DIV
                
encapsulado.className "pal";                                        // lo ponemos inline
                
encapsulado.appendChilddocument.createTextNode(palabras[j]) );    // le dibujamos la palabra al DIV
                
loPongoEn.appendChild(encapsulado);                                    // lo añadimos a la columna
                
loPongoEn.appendChilddocument.createTextNode(" ") );                // añadimos a la columna el espacio detrás de la palabra    
                
if( lineasCaben == undefined )                    // si no estaba definido lineasCaben, ahora lo podemos definir
                    
lineasCaben Math.flooralturaMaxLoPongoEn / (encapsulado.offsetHeight+1) );
                var 
pos findPos(encapsulado)[0];                // hallamos su coordenada X
                
if( x0 == undefined x0 pos;                    // si x0 no estaba definido, ahora que colocamos la primera palabra la podemos definir
                
else if( x0 == pos lineasVamos++;                // si comenzamos una nueva línea, la contabilizamos
                
if( lineasVamos >= lineasCaben ) {                // Hemos puesto una línea más de las que cabían. Nos tenemos que arrepentir de haber puesto la ultima palabra
                    
loPongoEn.removeChildloPongoEn.lastChild );        // eliminamos el espacio en blanco (nodo de texto)
                    
loPongoEn.removeChildloPongoEn.lastChild );        // eliminamos la última palabra, la de arrepentimiento
                    
j--;                                        // repetir la palabra, pero ya en c2
                    // reseteamos las variables principales
                    
loPongoEn c2;    
                    
lineasVamos 0;
                    
x0 undefined;
                }
 
            }
            
loPongoEn.appendChilddocument.createElement("P") );        // dejamos un espacio entre párrafo y párrafo
            
lineasVamos++;                                                // contabilizamos el espacio como linea nueva
            
if( lineasVamos >= lineasCaben ) {                            // Hemos puesto una línea más de las que cabían. Nos tenemos que arrepentir de haber la última separación P
                
loPongoEn.removeChildloPongoEn.lastChild );                // eliminamos la separación
                // reseteamos las variables principales
                
loPongoEn c2;
                
lineasVamos 0;
                
x0 undefined;
            }
        }
    }
    
// Eliminación del texto original
    // elimino todos los hijos de capa que no sean DIVS!
    
for(var i=0i<hijos.lengthi++) {
        if( !(
hijos[i].nodeType==&& hijos[i].tagName.toUpperCase()=="DIV") ) {
            
capa.removeChildhijos[i] );
            
i--;
        }
    }
}
 
 
// créditos findPos: http://www.quirksmode.org/js/findpos.html
function findPos(obj) {
    var 
curleft curtop 0;
    if (
obj.offsetParent) {
        
curleft obj.offsetLeft
        curtop 
obj.offsetTop
        
while (obj obj.offsetParent) {
            
curleft += obj.offsetLeft
            curtop 
+= obj.offsetTop
        
}
    }
    return [
curleft,curtop];

 
 
 
 
// -->
</script>
 
</body>
</html> 
Bueno la verdad esta bueno salvo que tiene un problemita, cuando le volves a dar al boton se agranda el campo pero no vuelve a ponerlo en una columna o no tiene la posibilidad de poner en tres, pero el aporte esta muy bien, mis felicitaciones y felicidades para este año que comienza
__________________
---->Sin ayuda no se llega a ningun lado<----
Virla
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:19.
SEO by vBSEO 3.3.2