Tagged: jQuery RSS

  • TBS 12:38 am on November 20, 2009 Permalink | Reply
    Tags: jQuery, , subtítulos   

    jQuery Subtitles plugin 

    Inspirado por la página de conmemoración del 5to aniversario de Firefox y el video que muestran con subtítulos externos que aprovecha las bondades de HTML 5 y la etiqueta <video>, creé el plugin Subtitles para jQuery a partir de este snipt de j^.

    Básicamente carga y sincroniza subtítulos desde un archivo externo con un video embebido con la etiqueta <video> de HTML 5.

    El modo de utilización es bastante simple:

    1. Cargamos jQuery y el plugin: 
      <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jquery.subtitle.js"></script>
    2. Insertamos la etiqueta video con los atributos que estimemos pertinentes y el elemento donde se visualizarán los subtítulos que puede ser un div, p, spam o cualquier otr que deseemos: 
      <video id="video_example" width="505" height="284" src="http://videos.mozilla.org/fyfx/Firefox_Final_VO.ogv" controls="" tabindex="0"></video>
<p class="subtitulos"></p>
    3. Para finalizar ejecutamos el plugin. Se debe especificar como parámetros el camino hasta el fichero con los subtítulos y el id del video con el que se van a sincronizar: 
      <script type="text/javascript">
	$(document).ready(function(){
		$(".subtitulos").loadSubtitle("mozilla.srt", "video_example");
	});
</script>

    Debo agregar que por el momento solo soporta subtítulos en formato .srt.

    Pueden ver este ejemplo funcionando y descargar el plugin desde el repositorio de jQuery.

     

  • TBS 5:20 pm on November 13, 2009 Permalink | Reply
    Tags: clic, contextual, jQuery, menu   

    Deshabilitar menú contextual con jQuery 

    Si por alguna razón necesitas deshabilitar el menú contextual(clic derecho) en tu página, con unas pocas líneas gracias a jQuery podemos lograrlo:


    $(document).ready(function()
    {
    $(document).bind("contextmenu",function(e){
    return false;
    });
    });

    Si además necesitas agregar alguna rutina solo debemos agregarla antes del return false de la siguiente forma:

    $(document).ready(function()
    {
    $(document).bind("contextmenu",function(e){
    alert("Lo sentimos, el menú contextual ha sido deshabilitado en este sitio");
    return false;
    });
    });

     

  • TBS 9:07 pm on November 9, 2009 Permalink | Reply
    Tags: adaptable, , , jQuery, layout, liquido, , plantilla,   

    Crear “vista adaptable” al estilo YouTube 

    LayoutSeguramente han notado en algún momento el botón que incorporó YouTube que nos permite expandir el reproductor del video al ancho total de la página, desplazando la lista de videos relacionados.

    En la práctica la vista adaptable en determinadas circunstancias puede resultar sumamente beneficiosa, mejorando la usabilidad de nuestro sitio web, además de brindar libertad al usuario de cambiar la visualización de los contenidos.

    Expandir la columna central del layout de nuestra página como lo hace YouTube puede resultar sencillo de realizar dependiendo de como esté estructurada y maquetada nuestra web.

    Desde JankoAtWarpSpeed –un fanático de Star Trek?- nos llega este ejemplo que utiliza la siguiente estructura:

    <div id="main"></div>

    El CSS es el complemento que ayudará a que la estructura de nuestro layout se ajuste de la siguiente forma: contenidos y áreas de comentario flota a la izquierda, mientras que la barra lateral flota a la derecha. Esto permitirá a la barra lateral bajar cuando expandamos el contenido sin necesidad de alterar nuestra estructura XHTML manipulando el DOM.

    El fragmento de CSS para que el ejemplo funcione de la manera descrita es el siguiente:

    #header, #content, #comments, #sidebar, #footer { margin:10px 0px; padding:30px;}
#header { width:900px; margin:0px auto;}
#main {width:960px; margin:0px auto; overflow:hidden;}
#content { width:540px; float:left;}
#content.wide { width:900px;}
#comments { width:540px; float:left;}
#sidebar { width:280px; margin-left:20px; float:right;}
#footer { width:900px; margin:0px auto;}

    Mediante unas líneas de Javascript y aprovechando la librería jQuery, vamos a conseguir que al dar click sobre un hipervínculo, se agregue o elimine la clase “wide” al elemento “content” de nuestra página, lo cuál completará la “magia”:

    $(document).ready(function() {
    $("#wideView").click(function() {
        $("#content").toggleClass("wide");
    });
});

    Para finalizar, podemos ver un ejemplo funcionando, descargar el código de fuente del ejemplo o leer el artículo original.

     

  • TBS 6:47 pm on May 1, 2009 Permalink | Reply
    Tags: , , jQuery, precarga,   

    Lazy Load: manipular la descarga de imágenes con jQuery 

    Si tienes un sitio con un número considerable de imágenes de gran tamaño y la descarga se ve afectada por este motivo, este plugin de jQuery puede ayudarte a optimizar el proceso.

    Con Lazy Load podemos retardar la descarga de las imágenes de una página a un período de tiempo determinado o hasta que la página se encuentre descargada completamente. De esta forma damos prioridad para que se descarguen las hojas de estilo y el cuerpo de la página, visualizándose sin problemas y dejando para el final la descarga de las imágenes pesadas.

    También podemos sumarnos algunos puntos de estética, si especificamos que las imágenes aparezcan solo cuando estas se encuentren completamente descargadas.

    Un ejemplo de su uso sería:

    <script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
 
<script type="text/javascript">
      $(function() {          
          $("img").lazyload({
             placeholder : "img/grey.gif",
             effect      : "fadeIn"
          });
      });
</script>

    Enlaces: Descargar Lazy Load y ejemplos

     

  • TBS 4:50 pm on April 24, 2009 Permalink | Reply
    Tags: 960, , Framework, jQuery,   

    960.gs grid overlay: plugin de jQuery para verificar las retículas 


    Si basas tus diseños web en columnas utilizando el Framework de CSS 960.gs, 960.gs grid overlay, un plugin para jQuery puede resultarte bastante útil.

    Con 960.gs grid overlay podemos agregar de forma dinámica una capa con las columas(12 o 16 según especifiquemos) sobre nuestro sitio, mientras testeamos la maquetación en el navegador. De esta forma podemos comprobar los márgenes y el ancho de las columnas del trabajo que estamos maquetando.

    El plugin pesa solo unos 1.5 Kb y podemos utilizarlo agregando solamente algo como esto:

    <script type="text/javascript">
	$(function() {
		$("body").addGrid(12, {img_path: 'images/'});
	});
</script>

    Para el ejemplo tomé prestado una imagen del diseño de Cubanealo que hace unos días hizo público David Chapet y que está basado 12 columnas con 960.gs.

    Enlaces: 960.gs grid overlay | Demo 960.gs grid overlay | 960.gs

     

  • TBS 11:05 pm on March 30, 2009 Permalink | Reply
    Tags: jQuery,   

    jQuery hint Plugin: EZPZ hint 

    EZPZ hint es un plugin de jQuery para mostrar en el interior de un campo de texto una etiqueta descriptiva, la misma desaparece cuando pasa el foco al campo de texto, y aparece de nuevo si salimos del mismo sin haber escrito nada.

    La forma de empleo es bastante simple, creamos un input de tipo texto y nos aseguramos de especificar el atributo title, ya que este será el texto que aparecerá dentro del mismo:

    <input id="search" class="hint" title="Search" name="search" type="text" />

    Luego agregamos las siguientes líneas para activar el plugin:

    $("input.login_hint").ezpz_hint();

    Sencillo modo de empleo, práctico y solo 900 bytes.

    Enlaces: Ejemplos y más información | Descargar

     

  • TBS 4:28 pm on March 10, 2009 Permalink | Reply
    Tags: , jQuery, ,   

    Use jQuery: directorio de sitios que utilizan jQuery 

    Use jQuery es un proyecto en el cuál se ha tratado de reunir la mayor cantidad de sitios que comparten la característica de utilizar la librería de Javascript jQuery en alguna parte del código de la página.

    Por el momento existen 121 sitios clasificados en 17 caterorías y cualquier usuario es libre de enviar alguna página propia o que conozca que utilice jQuery y será incluida en el directorio.

    Sin dudas una web muy interesante para consultar y ver de que forma se han explotado las bondades de jQuery.

    jQuery es sin dudas una librería JavaScript muy rápida y muy ligera que nos simplifica el desarrollo del lado del  cliente en las aplicaciones web que desarrollamos y Use jQuery con cada una de las páginas que lo conforma es una prueba de ello.

    Enlaces: Use jQuery | jQuery

     

  • TBS 7:53 pm on March 9, 2009 Permalink | Reply
    Tags: jQuery, ,   

    Modificar altura de un textarea de forma automática 

    Vía Twitter y gracias a este micropost de @nourayehia conozco a autoRisze, un nuevo plugin para jQuery que nos permite modificar la altura de un textarea de forma automática a la par que introducimos el contenido en el mismo.

    Utilizando el método scrollTop del DOM, obtiene la altura completa del textarea, incluyendo los pixels que nos oculta el scroll. Luego modifica la altura del textarea a los pixels obtenidos. De manera alternativa podemos aplicar el cambio con un pequeño efecto.

    Sin dudas este plugin utiliza una forma mucho más óptima que la que utilizaba el plugin de Jason Frame que a mi particularmente nunca me funcionó del todo bién, por aquello que obtenía la altura de un DIV invisible en el cuál replicaba el contenido del textarea, etc.

    Para poner a funcionar el plugin solo tenemos que las siguientes líneas de código:

    $('textarea#comment').autoResize({
// On resize:
onResize : function() {
$(this).css({opacity:0.8});
},
// After resize:
animateCallback : function() {
$(this).css({opacity:1});
},
// Quite slow animation:
animateDuration : 300,
// More extra space:
extraSpace : 40
});

    Enlaces: autoRisze

     

  • TBS 4:51 pm on March 7, 2009 Permalink | Reply
    Tags: , jQuery, , , Trackback   

    Obtener el Trackback URL de un blog utilizando PHP y jQuery 

    Hace unos días vengo testeando Cubanéalo, un proyecto de Cuba Zoom que se encuentra en fase de producción y del cuál muy pronto estoy seguro se hablará mucho.

    Para que tengan una idea, Cubanéalo es una especie de digg-like, pero tiene la particularidad que solo difunde contenido relacionado con Cuba.

    Probando esta aplicación, noté la ausensia de la detección automática de la URL Trackback hacia el contenido, algo que si no eres un usuario experimentado y con conocimientos de los blogs, difícilmente sepas el dato que te están pidiendo y como obtenerlo.

    Tengo la manía de ponerme a tratar de decifrar como se haría X o Y cosa que me halla llamado la atención en algún sitio que visito, la detección automática de la URL Trackback de los contenidos que se publican en Cubanéalo no fue la excepción ;) …

    Heché manos a la obra y desarrollé utilizando jQuery y la clase PHP Simple HTML DOM Parser este ejemplo que de forma bastante práctica y dinámica nos permite obtener la URL Trackback.

    Este Script puede modificarse para de forma alternativa obtener el título, las palabras claves y otros contenidos de nuestro interés en la página especificada.

    El funcionamiento es básicamente el siguiente:

    • Recojo la URL especificada que apunta hacia el contenido a publicar con Javascript y la envío por AJAX hacia el Script getPingBack.php, todo utilizando jQuery.
    • El Script getPingBack.php verifica valida la URL, de existir aprovechando los métodos de la clase PHP Simple HTML Parser, cargo el contenido de la página y lo parseo hasta encontrar la etiqueta link cuyo atributo rel tiene el valor pingback.
    • Si el Script encuentra dicha etiqueta, devuelve el atributo href de la misma, que es la URL Trackback de la página en cuestión y se muestra utilizando nuevamente jQuery en el input correspondiente a la URL Trackback

    Enlaces: Ejemplo obtener la URL Trackback | Código de fuente | jQuery | PHP Simple HTML DOM Parser

     

  • TBS 2:05 pm on January 31, 2009 Permalink | Reply
    Tags: chivos, chuletas, , jQuery,   

    Chivos para jQuery 

    Cuando se es programador y utilizas para el desarrollo varios lenguajes es bién difícil acordarse de todas las funciones y métodos propias de cada uno de ellos.Hay un invento que nos puede ayudar a recordar y es más viejo que andar a piés: los chivos(chuletas)… (More …)

     

Older Posts →

c
compose new post
j
next post/next comment
k
previous post/previous comment
r
reply
e
edit
o
show/hide comments
t
go to top
l
go to login
h
show/hide help
esc
cancel