Tu portal de
formación online

Infórmate
Inicio » Artículos » Programación » JavaScript » Crear un div flotante con JQuery

Legislación General

Ofimática

Suscríbete al boletín

Recibirás información detallada de nuestras ofertas, noticias, etc.

Suscríbete al boletín

Enviar a un amigo

Si crees que este Artículo le puede interesar a un amigo puedes enviarselo desde aquí.

Enviar a un amigo

Crear un div flotante con JQuery

25-01-2010 Daniel Ibáñez

En otros artículos, hemos visto cómo JQuery puede ser muy útil en nuestras páginas. Por ejemplo aprendimos cómo evitar el reenvío de un formulario por la impaciencia del usuario.

En este caso, crearemos un div flotante, donde aparecerá un texto aclaratorio sobre el contenido de la página.

El HTML inicial de nuestro documento es el siguiente:

Para procesar el contenido del HTML, incluiremos la librería JQuery 1.4. Esta librería puede descargarse desde http://jquery.com/

Además del archivo jquery-1.4.min.js (versión comprimida de JQuery), incluiremos otro archivo, jquery.notasalpie.js. Éste arhivo, de mi propia cosecha, será el que procese el contenido del HTML.
 

Descargar jquery.notasalpie.js

Así, nuestro HTML final será:

 

Si deseas descargar el ejemplo completo, aquí tienes un archivo comprimido con todo lo necesario.

Descargar ejemplo completo

Disfrútalo!

 

 

cantasken03-07-2012

buen aporte men , te pasaste , que xvr , justo lo que estaba buscando

Re: El ejemplo no funciona
wr4pp3r23-05-2012

Me respondoo.

Es solo un error de palabras la clase .iconnotapie es la que debería estar en lugar de anotacion en el tag "p" del documento HTML, y es todo, aunque sigo sin entender para que son las capas #floater y #floater_inside.

Saludos Gracias.

Re: El ejemplo no funciona
wr4pp3r23-05-2012

Descargue el ejemplo pero no funciona, así que revise el código un poco y encuentro que la clase anotacion no se encuentra referenciada en el css y dentro del mismo existen 2 capas más que no se usan en el documento .iconnotapie y #floater_inside; no estoy seguro de porque está así el ejemplo o tal vez yo estoy en un error :P jejejeje no se, espero que se pueda solucionar.

Gracias.

Daniel27-08-2010

Hola!

He revisado el ejemplo, y efectivamente con IE daba problemas (todos conocemos a IE XD )

He actualizado el ejemplo para que funcione con IE

Saludos!

Juan04-08-2010

Hola estuve probando tu aplicacion y funciona bien en chrome y en mozilla pero en IE no se ve, espero que me ayudes porque lo estuve revisando pero como no soy un experto en javascript y query nose cual sera el problema

Francisco03-08-2010

Muchas gracias, me fue muy util para una funcionalidad que necesitaba, funciona ok

* Los comentarios son propiedad de quien los envió, adrformación no se hace responsable de su contenido.