Ejemplo de como mostrar u ocultar un div dinamicamente usando jQuery y Html

Para ver el demo funcionando click aqui

para descargar el ejemplo completo (32kb) click aqui

link para descargar el ejemplo o ver el demo:
http://downloads.netonline3000.com/?f=4

Video de youtube:
https://www.youtube.com/watch?v=P3glDnY6ZvY

en este video se muestra desde cero y paso a paso como crear los div’s, aplicarle estilo css, insertar el codigo java. se usa dreamweaver como editor y firefox como nevegador pero el estilo css aplicado en el ejemplo funciona muy bien en google chrome.

Aqui se muestra un pequeño ejemplo de como Mostrar u ocultar un div dinamicamente usando jQuery y Html.

(
para esto uso las siguientes funciones en javascript:

function mostrar_div()

function ocultar_div()

lo dinamico lo aplico con:

fadeIn
fadeOut

y slideToggle

quedando el codigo asi:

<script language=”javascript”>
function mostrar_div(){
$(“#registro”).fadeIn(500);
}

function ocultar_div(){
$(“#registro”).slideToggle(800);
}
</script>

//

para que este codigo funcione previamente importo la libreria de jQuery 2.0.3

jquery-2.0.3.min.js, la cual tambien esta disponible aqui: http://downloads.netonline3000.com/?f=2

)

Es algo sencillo y practico tanto por si deseas crear un form de registro flotante o un div para que los usuarios inicien session o para lo que necesiten.

Crear paginas web dinamicas no solo le da un aspecto profesional tu sitio web o blog sino que te permite ahorrar espacio en pantalla haciendo de esta manera que los usuarios puedan elegir que mostrar o que ocultar.

Tambien por si deseas mostrar una publicidad permitiendo al usuario cerrar dicho anuncio publicitario etc etc etc.

Si deseas descargar archivos de ejemplos y recursos o ya sabes programar y deseas poner a disposicion de los usuarios los archivos, puedes ir a:
http://downloads.netonline3000.com

aprende y comparte el conocimiento.
–Like and Share.

also available in English …!!!
http://netonline3000.com/

Mas en español:
http://netonline3000.com/blog/

 

 

 

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s

A %d blogueros les gusta esto: