Facil Solucion
   
  Contactenos Registro Login
 
     
Inicio > Informatica > Como programar en Javascript, tutoriales, comandos y sintaxis
 
Hacer una nueva consulta

Crear contenido que aparece y desaparece usando Javascript

Esta nota explica como hacer para crear contenidos en nuestra web que aparezcan o se oculten haciendo un clic y sin reabrir la pagina.

En esta nota te explicamos como ocultar o mostrar informacion que se encuetra dentro de un DIV, de manera dinamica, utilizando Javascript

Muchas veces nos encontramos con que deseamos que cierta parte de nuestra página aparezca solo cuando es requerida. Por ejemplo, podemos tener un libro de visitas que lista las últimas entradas que tuvimos, y al final, aparece un link que dice “Agregar nueva entrada” y solo al pulsar dicho link, aparece el formulario debajo para realizar el ingreso.

Esto se puede realizar con una sencilla función Javascript y con una etiqueta DIV html. Recordemos que entre etiquetas DIV podemos colocar estructuras completas, como tablas, iframes, etc.

La función Javascript simplemente debería recibir como parámetro el nombre del DIV que deseamos hacer visible, para de ese modo asignarle a la propiedad “visibility” el valor de “visible” y así éste aparezca.

Esta sería la función:


<script language="JavaScript">
function mostrar(nombrediv)
{
document.all[nombrediv].style.visibility='visible';
}
</script>


También aprovecho este momento para comentar que es importante también contar con la función que hace lo inverso, es decir, ocultar el DIV. Para este caso, escribimos lo siguiente:


<script language="JavaScript">
function ocultar(nombrediv)
{
document.all[nombrediv].style.visibility='hidden';
}
</script>



El siguiente paso es crear el DIV en nuestra página, y colocar dentro de él, el contenido que deseamos que aparezca y desaparezca.

Sencillamente el código de nuestra página debiera ser algo así:


<html>
<head>
<title>Titulo de la pagina</title>

//funciones javascript escritas arriba

</head>

<body>
<h4 style="cursor:hand;" onclick="mostrar('div1')">Agregar nueva entrada</h4>
<div id="div1" style="visibility:hidden">

//estructura que aparecerá cuando se realice el clic. Aquí pueden poner una tabla, o un iframe que llame a la página que realiza la carga propiamente dicha, etc.

</div>
</body>
</html>


Tenga en cuenta que lo que aparecerá es lo que se encuentra entre las etiquetas <DIV> y </DIV>, el resto no será alterado. Note también que el texto en negrita es el nombre del DIV, en este caso a modo de ejemplo le colocamos div1.

Por último, las funciones Javascript descritas arriba, pueden usarse de manera mas genérica para hacer desaparecer y aparecer elementos dentro de una página web. Todas las estructuras HTML tienen el parámetro ID que contiene su identificador dentro del código HTML, y las funciones Javascript hacen referencia a los objetos accediendo mediante la matriz de elementos globales, de modo que si usted le colocara a un Formulario como ID = Form1 y le pasara como parámetro a la función ocultar(‘form1’) el mismo desaparecer.
 
Notas relacionadas:
  • Crear contenido que aparece y desaparece usando Javascript
    		•
     
    Mas notas de la misma seccion:
    No se encontraron mas notas en esta seccion
     
    Facil Solucion - Todos los derechos reservados © 2008