Foros del Web » Programando para Internet » Javascript »

Codigo de ejemplo (agrandar tabla tiempo real)

Estas en el tema de Codigo de ejemplo (agrandar tabla tiempo real) en el foro de Javascript en Foros del Web. Bueno esto no es una duda, es un código q termine esta mañana y yo creo en q todos debemos compartir conocimientos para mejorar cada ...
  #1 (permalink)  
Antiguo 14/07/2007, 09:10
Avatar de minkweb  
Fecha de Ingreso: septiembre-2005
Mensajes: 443
Antigüedad: 18 años, 6 meses
Puntos: 14
Codigo de ejemplo (agrandar tabla tiempo real)

Bueno esto no es una duda, es un código q termine esta mañana y yo creo en q todos debemos compartir conocimientos para mejorar cada dia mas, envolvere el codigo en etiquetas php para hacerlo mas claro

El javascript...
Código PHP:
<html xmlns="http://www.w3.org/1999/xhtml" lang="es">
<
head>
<
link href="estilo.lib.css" rel="stylesheet" type="text/css"/>
<
script>

function 
achicar(minimo){
  
contenido document.getElementById("tabla"); //capturo tabla en la variable contenido
  
contenido.innerHTML ""//borro el texto del div
  
altura document.getElementById("tabla").style.height//obtengo altura
  
altura parseFloat(altura); //cambio altura a numero para manejar condicionales
      
if(altura minimo){  //condicional.. si altura es mayor q minimo
      
altura--;  //altura se reduce en 1 unidad
      
document.getElementById("tabla").style.height altura//otorgo nuevo valor de altura reducido en 1
      
}
  if(
altura minimo){ //condicional.. si altura es mayor que minimo
    
Rminimo minimo//creo la variable rminimo para pasarla nuevamente
      
setTimeout("achicar(Rminimo)",1); //cada microsegundo se repetira la accion hasta q altura sea menor o igual a minimo
  
}
}
function 
agrandar(maximo,minimo){
  
contenido document.getElementById("tabla"); //capturo tabla en la variable contenido
  
altura document.getElementById("tabla").style.height//obtengo altura
  
altura parseFloat(altura); //cambio altura a numero para manejar condicionales
      
if(altura maximo){   //condicional.. si altura es menor que maximo
      
altura++; //Altura aumenta en 1 unidad
      
document.getElementById("tabla").style.height altura;  //otorgo nuevo valor de altura aumentado en 1
      
AgregarTexto altura+1;  //le sumo a altura una unidad, y coloco ese valor dentro de la variable AgregarTexto
        
if(AgregarTexto == maximo){ //Si AgregarTexto es igual a la altura maxima, ingreso el contenido en el div
        
contenido.innerHTML "Ahora puede leer este contenido<br /> es un simple javascript que cada 1 microsegundos aumenta +1 la altura de la tabla<br />Luego comprueba q la altura actual sea igual a la altura limite, en ese momento lanzo este texto<br /> ¿Simple no?<br /> jaja xD <br /><a href=\"#\" onClick=\"achicar("+minimo+");\">Esconder</a>";
        }
      }
  if(
altura maximo){ //condicional.. si altura es menor que maximo
    
Rmaximo maximo;
    
Rminimo minimo;
      
setTimeout("agrandar(Rmaximo,Rminimo)",1); //cada microsegundo se repetira la accion hasta q altura sea mayor o igual a maximo
  
}
}
</script>
</head>
<body>
<table class="caja" width="400" align="center">
       <tr>
           <td>Caja de texto</td>
       </tr>
       <tr>
           <td>Para ampliar el contenido haga clic <a href="#" onClick="agrandar(120,20);">aqui</a></td>
       </tr>
       <tr>
           <td id="tabla" style="height:20px;"></div></td>
       </tr>
</table>
</body>
</html> 

El estilo..
Código HTML:
.caja {
	BORDER-BOTTOM: #999999 10px solid;
	BORDER-TOP: #999999 1px solid;
	BORDER-LEFT: #999999 1px solid;
	BORDER-RIGHT: #999999 1px solid;
	FONT-SIZE: 11px;
	BACKGROUND-COLOR : #f9f9f9;
}
onClick="agrandar(120,20);" aki mando el valor 120 es el valor hasta el q se agrandara la celda, y 20 es el valor q tenia al principio, mando ambos para hacer el efecto de agrandar y achicar

Espero que les sea util, es un buen efecto para una web, Saludos

PD: si postie en el lugar ekivokado espero me disculpen :)

Última edición por minkweb; 14/07/2007 a las 09:17
  #2 (permalink)  
Antiguo 14/07/2007, 13:48
 
Fecha de Ingreso: marzo-2006
Mensajes: 137
Antigüedad: 18 años
Puntos: 0
Re: Codigo de ejemplo (agrandar tabla tiempo real)

muy buena aportacion, estaba por realizar eso para un sitio web :)
le di una pequenya editada, ahora le puedes poner las cajas que quieras y te las maximiza y minimiza. solo enviando el ID y las dimensiones de la celda. Gracias


Código PHP:
<script>

function 
achicar(minimo,ID){
ID2=ID;

  
contenido document.getElementById(ID2); //capturo tabla en la variable contenido
 
contenido.innerHTML ""//borro el texto del div
  
altura document.getElementById(ID2).style.height//obtengo altura
  
altura parseFloat(altura); //cambio altura a numero para manejar condicionales
      
if(altura minimo){  //condicional.. si altura es mayor q minimo
      
altura--;  //altura se reduce en 1 unidad
      
document.getElementById(ID2).style.height altura//otorgo nuevo valor de altura reducido en 1
      
}
  if(
altura minimo){ //condicional.. si altura es mayor que minimo
    
Rminimo minimo//creo la variable rminimo para pasarla nuevamente
     
    
setTimeout("achicar(Rminimo,ID2)",1); //cada microsegundo se repetira la accion hasta q altura sea menor o igual a minimo
  
}

}
function 
agrandar(maximo,minimo,ID){
ID2=ID;
  
contenido document.getElementById(ID); //capturo tabla en la variable contenido
  
altura document.getElementById(ID).style.height//obtengo altura
  
altura parseFloat(altura); //cambio altura a numero para manejar condicionales
      
if(altura maximo){   //condicional.. si altura es menor que maximo
      
altura++; //Altura aumenta en 1 unidad
      
document.getElementById(ID).style.height altura;  //otorgo nuevo valor de altura aumentado en 1
      
AgregarTexto altura+1;  //le sumo a altura una unidad, y coloco ese valor dentro de la variable AgregarTexto
        
if(AgregarTexto == maximo){ //Si AgregarTexto es igual a la altura maxima, ingreso el contenido en el div
        
contenido.innerHTML "Ahora puede leer este contenido<br /> es un simple javascript que cada 1 microsegundos aumenta +1 la altura de la tabla<br />Luego comprueba q la altura actual sea igual a la altura limite, en ese momento lanzo este texto<br /> ¿Simple no?<br /> jaja xD <br />";
        }
      }
  if(
altura maximo){ //condicional.. si altura es menor que maximo
    
Rmaximo maximo;
    
Rminimo minimo;

      
setTimeout("agrandar(Rmaximo,Rminimo,ID2)",1); //cada microsegundo se repetira la accion hasta q altura sea mayor o igual a maximo
  
}
}
</script> 

html:
Código PHP:
<table class="caja" width="400" align="center">
       <
tr>
           <
td>Caja de texto1</td>
       </
tr>
       <
tr>
           <
td>Para ampliar el contenido haga clic <a href="#" onClick="agrandar(120,20,'celda1');">aqui</a></td><td>Para minimizar el contenido haga clic <a href="#" onClick="achicar(20,'celda1');">aqui</a></td>
       </
tr>
       <
tr>
           <
td id="celda1" style="height:20px;"></div></td>
       </
tr>

.
.
.
.
.
.
</
table
__________________
__Neurotic-Developer....:::: La unica limitacion de la programacion, es el programador.
  #3 (permalink)  
Antiguo 15/07/2007, 01:19
Avatar de minkweb  
Fecha de Ingreso: septiembre-2005
Mensajes: 443
Antigüedad: 18 años, 6 meses
Puntos: 14
Re: Codigo de ejemplo (agrandar tabla tiempo real)

jeje, muy buen aporte, hace la funcion mas independiente
  #4 (permalink)  
Antiguo 09/09/2007, 09:51
Avatar de admoro  
Fecha de Ingreso: agosto-2005
Ubicación: Prov. de Bs As. Argentina
Mensajes: 435
Antigüedad: 18 años, 6 meses
Puntos: 3
Re: Codigo de ejemplo (agrandar tabla tiempo real)

Tremendo aporte, lo coloqué en mi sitio porque me encantó, muy original. No lo toqué, sólo lo utilizó y maravilloso!!!
Gracias por colaborar!!
  #5 (permalink)  
Antiguo 20/06/2008, 22:54
Avatar de gepd  
Fecha de Ingreso: diciembre-2007
Mensajes: 142
Antigüedad: 16 años, 3 meses
Puntos: 6
Respuesta: Codigo de ejemplo (agrandar tabla tiempo real)

Amigos no he creado un nuevo tema por que creo que mi pregunta debe ir necesariamente aquí, he partido con éste código y le he hecho algunas modificaciones, les cuento:

Cree un div el cual está dimensionado de tal forma que se vea igual que al estilo de la barra de activex de microsoft, pero ésta aparece cuando hay algun error o se desea notificar algo, pero tengo un problema, resulta que en login de usuario cuando el usuario ingresa sus datos, prone un mensaje de verificando datos, luego si el rut es incorrecto cambio el mensaje de la barra e igualmente con el rut, y si todo está ok lo redirecciono...

ahora mi problema está en que cuando presiono en el boton enviar para que verifique los datos porne el mensaje "Verificando..." pero como se demora 20 micro segundos (ya que lo agrando 20px) envio el mensaje de error informado que la el rut o clave está incorrecta, pero no lo hace ya que hasta ese momento todavía no ha terminado de escalar el div, supongo que ésto no pasaía si el servidor fuese un poco mas lento en dar la respuesta

a continuacion coloco el codigo que mo difique

Código HTML:
function agrandar(maximo,minimo,ID,msj){
 ID2=ID;
 msjX=msj;
   contenido = document.getElementById(ID);
   altura = document.getElementById(ID).style.height;
   altura = parseFloat(altura);
 
 if(altura < maximo){
  altura++;
       contenido.style.display = "block";
       document.getElementById(ID).style.height = altura;
       AgregarTexto = altura+1;
 
        if(AgregarTexto == maximo){
   contenido.innerHTML = msjX;
        }
 }
 
 if(altura < maximo){
  Rmaximo = maximo;
  Rminimo = minimo;  
  setTimeout("agrandar(Rmaximo,Rminimo,ID2,msjX)",1);
 }
}

y así es como llamo a la función


Código HTML:
agrandar(20,0,'barra','Verifique el R.U.T ingresado');
se supone que si la barra ya tiene los 20px que de seo y quiero enviar otro mensaje de error que por cierto no quiero que se agregue si no que reemplace al anterior lo hago llamando nuevamente a la barra tal cual, pero cambiando el mensaje


alguien me puede ayudar a solucionar éste problema?
  #6 (permalink)  
Antiguo 20/06/2008, 23:37
Avatar de minkweb  
Fecha de Ingreso: septiembre-2005
Mensajes: 443
Antigüedad: 18 años, 6 meses
Puntos: 14
Respuesta: Codigo de ejemplo (agrandar tabla tiempo real)

MMM no se muy bien como estes trabajando ni en q lenguajes pero te dare una posible solucion para ese problema

Código HTML:
function CambiarMensaje(maximo,minimo,ID,msj)
{
    var maximo2 = maximo;
    var minimo2 = minimo;
    var ID2 = ID;
    contenido = document.getElementById(ID).innerHTML = msj;
    function agrandar(maximo2,minimo2,ID2)
}

function agrandar(maximo,minimo,ID){
 ID2=ID;
   altura = document.getElementById(ID).style.height;
   altura = parseFloat(altura);
 
 if(altura < maximo){
  altura++;
       contenido.style.display = "block";
       document.getElementById(ID).style.height = altura+".px";

 }
 
 if(altura < maximo){
  Rmaximo = maximo;
  Rminimo = minimo;  
  setTimeout("agrandar(Rmaximo,Rminimo,ID2)",1);
 }
}
y llamas asi

CambiarMensaje(20,0,'barra','Verifique el R.U.T ingresado');


asi sin esperar a q termine de abrir el div, primero cambias el texto luego amplias el div con la misma funcion de cambiar texto

avisame si no t funciona, si el problema es de estetica (q salga el texto del div o algo) tengo la solucion y si es otro rollo le damos mas cerebro al asunto :)

PD:para q funcione bien bien usa lo de los q "px" q coloque, x mozilla, puede q tenga uno q otro error de sintaxis, no lo probe pero en teoria funcionara.
__________________
Juegos
Juegos iphone

Última edición por minkweb; 20/06/2008 a las 23:51
  #7 (permalink)  
Antiguo 21/06/2008, 09:07
Avatar de gepd  
Fecha de Ingreso: diciembre-2007
Mensajes: 142
Antigüedad: 16 años, 3 meses
Puntos: 6
Respuesta: Codigo de ejemplo (agrandar tabla tiempo real)

gracias minkweb funciona bien habia posteado antes un error pero era sólo por que faltaba
contenido = document.getElementById(ID) en la funcion que agranda, ahora me puedes hechar una manito para que el texto se agregue solo cuando ya tiene el tamañp deseado?


saludos y gracias

Última edición por gepd; 21/06/2008 a las 09:14
  #8 (permalink)  
Antiguo 22/06/2008, 14:24
Avatar de minkweb  
Fecha de Ingreso: septiembre-2005
Mensajes: 443
Antigüedad: 18 años, 6 meses
Puntos: 14
Respuesta: Codigo de ejemplo (agrandar tabla tiempo real)

Pues esta parte

Código HTML:
        if(AgregarTexto == maximo){
        contenido.innerHTML = msjX;
        }
se supone q deberia hacer eso... q cuando la altura sea igual a maximo escriba el texto ¿no funciona asi?
__________________
Juegos
Juegos iphone
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 09:19.