Popup estilo Coda gracias a jQuery

4 Enero, 2009 in Cajón desastre / 8 comentarios

Coda es una popular aplicación para Mac Os X, desarrollada por Panic, que sirve para el desarrollo de páginas web.

Si visitamos su sitio y pasamos el ratón por encima del menú “Download” veremos que nos aparece un popup; este es el efecto que buscamos imitar con este fantástico script para jQuery.

Podéis ver la demostración del script, descargarlo o seguir leyendo el artículo para conocerlo un poco más a fondo.

DemostraciónEjemplos en HTML

DescargaArchivo HTML

1. El script

Lo primero que haremos será añadir la última versión de jQuery y el código del script entre las etiquetas head de nuestra plantilla o página web, de la siguiente forma:

Código JavaScript

<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    <!--
 
    $(function () {
        $('.bubbleInfo').each(function () {
            var distance = 10;
            var time = 250;
            var hideDelay = 500;
 
            var hideDelayTimer = null;
 
            var beingShown = false;
            var shown = false;
            var trigger = $('.trigger', this);
            var info = $('.popup', this).css('opacity', 0);
 
 
            $([trigger.get(0), info.get(0)]).mouseover(function () {
                if (hideDelayTimer) clearTimeout(hideDelayTimer);
                if (beingShown || shown) {
                    // don't trigger the animation again
                    return;
                } else {
                    // reset position of info box
                    beingShown = true;
 
                    info.css({
                        top: -90,
                        left: -33,
                        display: 'block'
                    }).animate({
                        top: '-=' + distance + 'px',
                        opacity: 1
                    }, time, 'swing', function() {
                        beingShown = false;
                        shown = true;
                    });
                }
 
                return false;
            }).mouseout(function () {
                if (hideDelayTimer) clearTimeout(hideDelayTimer);
                hideDelayTimer = setTimeout(function () {
                    hideDelayTimer = null;
                    info.animate({
                        top: '-=' + distance + 'px',
                        opacity: 0
                    }, time, 'swing', function () {
                        shown = false;
                        info.css('display', 'none');
                    });
 
                }, hideDelay);
 
                return false;
            });
        });
    });
 
    //-->
    </script>

2. Las hoja de estilos

La hoja de estilos de la web de Coda contiene mucho código relacionado con el popup y la burbuja. Ya que este script está escrito sobre su base, el código mínimo de CSS que recomiendan , para el ejemplo es, el siguiente:

Código CSS

.bubbleInfo {
    position: relative;
}
.popup {
    position: absolute;
    display: none; /* mantiene oculto el popup si el .js no está disponible */
}

3. Implementándolo en nuestra plantilla

El objetivo del script es que el popup se muestre cuando el usuario pasa el ratón por encima del objetivo (haga mouseover). De esta manera lo implementariamos así:

Código HTML

<div class="bubbleInfo">
  <img class="trigger" src="http://mysite.com/path/to/image.png" />
  <div class="popup">
    <!-- la información que deseemos -->
  </div>
</div>

Si te ha gustado este artículo puedes votarlo ahora en Bitacoras.com. De esta forma más gente podrá leerlo y conocer las noticias de este blog.

Artículos Relacionados

Comentarios (8)

1. Randy dice:

   Ayuda no he podido hacer funcionar el pop up lo que pasa es que muestro las imagenes dinamicamente asi como la tabla en la que se presentan, debe de ser algo sencillo pero no lo he logrado, ayuda!!

   13 Enero 2009 en 17:16 Responder
   • David Costales dice:

     Hola Randy, según he entendido, ¿intentas mostrar el popup en un carrusel de imágenes no?. ¿Le has añadido el atributo class=”trigger” a cada imágen?. Si me explicas un poco más cual es el problema intentaré ayudarte. Gracias por leer mi blog ;-)

     14 Enero 2009 en 03:36 Responder
2. Randy dice:

   mira te paso un poco de mi codigo no es un carusel, se trata de que mi codigo lee de una base los nombres de una imagenes y las muestra creando una tabla de 3 columnas y “n” filas, dependiendo la cantidad de imagenes, lo que quiero es en el popup mostrar mi imagen de tamaño natural.

   codigo:
   $num=mysql_num_rows($Result);
   $i=0;
   $r=0;
   while($i<$num){

   if ($r

   <img src=”images/pub/” width=120 height=90 border=”0″/>

   <?php
   ++$i;
   ++$r;
   } else {
   print (”\n”);
   $r=0;
   if ($r

   <img src= “images/pub/” width=120 height=90 border=”0″>

   <?php
   ++$r;
   ++$i;
   }
   }
   }
   print (”\n”);
   print (”\n”);
   print (”\n”);

   14 Enero 2009 en 13:51 Responder
3. Randy dice:

   espera que no salio completo….

   $num=mysql_num_rows($Result);
   $i=0;
   $r=0;
   while($i<$num){
   if ($r

   <img src=”images/pub/” width=120 height=90 border=”0″/>

   <?php
   ++$i;
   ++$r;
   } else {
   print (”\n”);
   $r=0;

   if ($r

   <img src= “images/pub/” width=120 height=90 border=”0″>

   <?php
   ++$r;
   ++$i;
   }
   }
   }
   print (”\n”);
   print (”\n”);
   print (”\n”);
   ?>

   14 Enero 2009 en 13:56 Responder
4. Randy dice:

   huu!! me imagino por que no sale completo
   por que es codigo

   14 Enero 2009 en 13:58 Responder
5. Randy dice:

   Bueno, si es posible agregame al messenger randy_gf@hotmail.com

   14 Enero 2009 en 14:03 Responder
6. Randy dice:

   Ayuda!!!

   17 Enero 2009 en 10:02 Responder
   • David Costales dice:

     Hola Randy,
     Siento haber tardando tanto en responder, últimamente ando muy ajetreado y no tengo tiempo de mirar los comentarios. En cuanto tenga un ratito me siento y miramos eso. No tengo Messenger así que tendrá que ser por otro medio.

     Un saludo, David

     21 Enero 2009 en 05:56 Responder