Archivos para Febrero, 2008

¿Qué es jActivating?

26 Febrero, 2008 a 11:56 am · Archivado en Javascript ·Etiquetado ,

Conocido originalmente como JS Embedded Content, es un pequeño y “no obstructivo” código JavaScript para solucionar el problema de “Haga click aquí para activar y usar este control”, permitiendo a los usuarios de un sitio web interactuar con contenido embebido (películas Flash, películas Quicktime, applets de Java, etc.) sin tener que primero activarlos manualmente. Este procedimiento comenzó a ser requerido para las más recientes versiones de Internet Explorer (6+) y Opera (9+) como resultado de un conflicto de patentes con Eolas Technologies (otros navegadores no lo requieren… aún).

Características principales

  • Es super sencillo de implementar y usar (3 simples pasos).
  • Soporta páginas enviadas como application/xhtml+xml y text/html.
  • Es completamente “no obstructivo”: el contenido embebido se mantendrá accesible aún si JavaScript no es soportado.
  • HTML (o XHTML) y el código JavaScript se encuentran completamente separados uno del otro (no se utiliza JavaScript inline).
  • Este software es de dominio público (sin derechos reservados).

¿Cómo instalar jActivating?

Paso 1:

Ubica el archivo JavaScript en algún directorio de tu servidor web.

Paso 2:

Agrega la siguiente línea en el encabezado de la página web donde quieres utilizarlo (entre <head>…</head>):


<script type="text/javascript" src="embeddedcontent.js" defer="defer"></script>

Aviso: el atributo defer es requerido para Internet Explorer.

Paso 3:

Utiliza tu método favorito para embeber contenido. A continuación un ejemplo simple:

<object type="application/x-shockwave-flash" data="movie.swf" width="400px" height="100px">
<param name="src" value="movie.swf" />
<p>Alternative content</p>
</object>

Descargas

jActivating puede ser descargado desde SourceForge

Dejar un comentario

EasyDrag jQuery Plugin

10 Febrero, 2008 a 4:28 pm · Archivado en Javascript ·Etiquetado , , , ,

EasyDrag es un plugin para la popular librería javascript jQuery el cual te permitirá añadir la funcionalidad de Drag and drop o Arrastrar y soltar a elementos html de tu pagina. Esta librería permite agregar la funcionalidad de drag con sencillas lineas de código, además de ello tiene detectores de eventos con lo cual se pueden controlar los drag dependiendo de las acciones realizadas.

Utilización
Lo primero para utilizar EasyDrag es descargar JQuery y luego jquery.easydrag.js, este ultimo archivo contienen las funciones necesarias para el funcionamiento de esta librería.

El siguiente paso es añadir estas librerías al header de nuestro html, para ello utilizamos los tags script para incluirlas de la forma:

  1. <script src=“jquery.js” type=“text/javascript”></script>
  2. <script src=“jquery.easydrag.js” type=“text/javascript”></script>

Luego el siguiente paso es agregar la función easydrag al elemento que deseamos controlar de la siguiente forma:

  1. <script type="text/javascript">
  2. $(function(){
  3.     $("#box1").easydrag();
  4. });
  5. </script>

Uniendo estas lineas tendremos el siguiente código con el cual podemos hacer Drag a un elemento html.

  1. <html>
  2. <head>
  3. <title>EasyDrag Demo</title>
  4. <script src="jquery.js" type="text/javascript"></script>
  5. <script src="jquery.easydrag.js" type="text/javascript"></script>
  6. <script type="text/javascript">
  7. $(function(){
  8.     $("#box1").easydrag();
  9. });
  10. </script>
  11. <style type="text/css">
  12. #box1 {
  13.     font-family: "Trebuchet MS", Tahoma, Verdana;
  14.     background-color: yellow;
  15.     padding: 5px;
  16.     border: 2px solid orange;
  17.     width: 200px;
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <h3>EasyDrag jQuery Plugin </h3>
  23. <div id="box1">Versi&oacute;n demo de Easy Drag</div>
  24. </body>
  25. </html>

También existe la posibilidad de detectar cuando se termina de hacer el drag, para ello se utiliza el evento ondrop, con el cual se pude llamar a una acción de la siguiente forma:

  1. <script type="text/javascript">
  2. $(function(){
  3.     $("#box1").easydrag();
  4.     $("#box1").ondrop(function(){ alert("Dropped"); });
  5. });
  6. </script>

Como pueden ver es una forma muy sencilla de crear este tipo de efectos para nuestras páginas html.

Dejar un comentario

Javascript Smooth Scroll

10 Febrero, 2008 a 4:22 pm · Archivado en Javascript ·Etiquetado , , ,

df Javascript Smooth Scroll es una pequeña librería que te permitirá agregar un efecto de transición al acceder a los anchor en una página web. Es compatible con la mayoría de navegadores y solo pesa 1024 bytes.

smoothscroll.jpg

Típicamente al acceder a un anchor, el browser se mueve directamente a la posición del anchor, pero si deseamos aplicarlo un movimiento suave para acceder al anchor esta es la librería que necesitamos.

Como utilizar Smooth Scroll
El uso es muy sencillo, luego de descargar los archivos fuentes desde df_smooth_scroll.zip, luego al momento de crear nuestro html debemos incluir el archivo smooth.pack.js de la siguiente forma:

  1. <script type="text/javascript" src="smooth.pack.js"></script>

Lo siguiente es agregar los anchor de la forma normal es decir no hace falta agregar ningún código adicional para el funcionamiento.

  1. <a href="#footer" name="top">Go To Footer</a>
  2. <p> text body </p>
  3. <a href="#top" name="footer">Go To Header</a>

Uniendo estas lineas, obtendremos un resultado muy agradable pues los movimientos son muy suaves lo que facilita el proceso de moverse en la página. Finalmente pueden ver el ejemplo funcionando en df_smooth_scroll.html.

Dejar un comentario

ThickBox: Ventanas flotantes

10 Febrero, 2008 a 4:10 pm · Archivado en CSS, HTML, Javascript ·Etiquetado , , , , ,

ThickBox es una librería javascript que permite abrir ventanas flotantes sobre páginas HTML. Esto nos permitirá mostrar imágenes o paginas sobre una ventana emergente y sin necesidad de abrir una ventana nueva, evitando de esa forma también el Bloqueador de popup de nuestro navegador.

thickbox.gif

ThickBox, creado por Cody Lindley y que acaba de llegar a la versión 2.0 es sencilla de utilizar. Primero debes descargar los archivos necesarios para su funcionamiento:

  • jquery.js: Librería necesaria para el funcionamiento e thickbox.
  • thickbox.js: Funciones thickbox para abrir las ventanas.
  • thickbox.css: Hoja de estilos para la ventana emergente.
  • loader.gif: imagen que se mostrará mientras se carga el contenido de la ventana emergente

Entonces una vez que se tienen todos los archivos, lo siguiente es incluir las librerías, la hoja de estilos en nuestro HTML, esto se incluye antes de cerrar el tag HEAD.

  1. <script type="text/javascript" src="jquery.js"></script>
  2. <script type="text/javascript" src="thickbox.js"></script>
  3. <link rel="stylesheet" href="thickbox.css" type="text/css" />

Luego cuando se quiere insertar una pantalla flotante con una imagen, esto se hace sobre un enlace, por ejemplo si deseamos incluir un enlace para abrir una imagen:

  1. <a href=“flash9.gif” class=“thickbox” title=“Ejemplo ThickBox”>

Donde se tiene que class=”thickbox” es el que indica a las librerías thickbox que se abrirá una ventana emergente, el otro dato importante es que lo que se asigne a la propiedad title se mostrará como titulo de la ventana emergente. Resumiendo podemos decir que a cualquier enlace que tengamos en nuestra página solo es necesario aplicarlo el estilo thickbox.

Esto es para el caso de las imágenes, pero si deseamos incluir una página externa, el código cambio poco, donde tenemos que incluir el ancho y el alto de la ventana emergente en la url que se le pasará a la propiedad href, veamos el siguiente ejemplo donde abrimos la página de Google.

  1. <a

  2. 

    href="http://www.google.com?TB_iframe=true&height=420&width=600"
    

    3. 

  3. 

    title="Google"
    

    4. 

  4. 

    class="thickbox">Google</a>
    

    5.

            Se observa que el código adicional es ?TB_iframe=true&height=420&width=600, es obvio donde se pone el ancho y alto de la ventana.

            Comentarios (3)