JavaScript

Quitar imagenes rotas con jQuery ó Mootools

Probablemente colgemos una imagen de otro servidor ó servicios de alojamiento en nuestras páginas web. Existe la posibilidad de que con el tiempo cambie de ubicación de ésta y en nuestra página web en vez de aparecer la imagen sale una alternativa indicándonos que la dirección a la imagen que haciamos referencia es incorrecta (imagen rota). Existe una forma de prevenir...

jqFancy Transitions, presentación de imagenes con efecto diferente

jqFancyTransitions es un plugin para jQuery que nos permite mostrar nuestra galería de fotos en forma de diapositivas con un efecto de transición llamativo entre una y otra. Este efecto es muy diferente de los clásicos fade (desvanecer) y slide (desplazar) por imágen. Para que tenga una idea de lo hablamos pueden ver el demo y a diversas formas como...

To-Do List (lista de tareas) con jQuery, PHP, MySQL, AJAX (pt. 1)

Inspirandome en TeuxDeux un administrador de tareas sencillo pero eficaz que corre perfectamente sobre el navegador web (vía Ajaxian), se me ocurrió realizar uno con similar funcionalidad. En realidad no he probado esta herramienta, pues hay que registrarse (y no quize demorar) así que me guié del video relacionado:Está es la primera parte, así que no verán algo muy sofisticado...

Campo para contraseña (input password) similar al iPhone, con Mootools

Al momento de escribir en los campos para contraseñas en el iPhone ó iPod Touch, los caracteres escritos van cambiando a otro con el fin de mantener la privacidad. Este efecto se puede conseguir en nuestras páginas web con la ayuda de distintas librerías JavaScript (como por ejemplo jQuery). En esta ocasión mencionaremos como lograrlo con Mootools. Se trata de...

TinyTable, ordenar tabla con JavaScript

Publicado el 19⋅Noviembre⋅2009 en JavaScript
1 Comentarios • 2004 hits

tinytablev3

TinyTable es un script que convierte una simple tabla HTML en una tabla avanzada gracias a JavaScript. Esta nueva versión permite: ordenar datos por cabecera de columnas, búsqueda, promedio y totales de columnas con valores numéricos, numeración de registros y funciones para ver todos los registros ó resetear valores por defecto.

Configuración básica:

<script type="text/javascript">
	var sorter = new TINY.table.sorter('sorter','table',{
		headclass:'head',
		ascclass:'asc',
		descclass:'desc',
		evenclass:'evenrow',
		oddclass:'oddrow',
		evenselclass:'evenselected',
		oddselclass:'oddselected',
		paginate:true,
		size:10,
		colddid:'columns',
		currentid:'currentpage',
		totalid:'totalpages',
		startingrecid:'startrecord',
		endingrecid:'endrecord',
		totalrecid:'totalrecords',
		hoverid:'selectedrow',
		pageddid:'pagedropdown',
		navid:'tablenav',
		sortcolumn:1,
		sortdir:1,
		sum:[8],
		avg:[6,7,8,9],
		columns:[{index:7, format:'%', decimals:1},{index:8, format:'$', decimals:0}],
		init:true
	});
</script>

Aunque ya no es un deber optimizar para IE6 este script funciona correctamente en este.

Ver demo!

Imágen de fondo animada con jQuery

Publicado el 12⋅Noviembre⋅2009 en JavaScript, Desarrollo Web
0 Comentarios • 1952 hits

CatsWhoCode nos presenta una interesante forma de diseño. Se trata de mostrar una imágen de fondo (ó background image) en movimiento horizontal continuo gracias a jQuery.

Puedes ver el resultado final aquí. El código probado y comproado se muestra a continuación:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fondo animado</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<style type="text/css" media="screen">
        body{
                background-color: #C0DEED;
                margin:0;
                padding:0;
        }

        #header{
                height:180px;
                background: #8EC1DA url(bg-clouds.png) repeat-y scroll left top;
                text-align:center;
                margin-top:-30px;
        }

        #header h1{
                padding-top:35px;
                font-family: "Myriad Pro", Helvetica, Arial, sans-serif;
                color:white;
                font-size:45px;
        }

        #content{
                background-color:#fff;
                height:500px;
                width:980px;
                margin:25px auto 0 auto;
                -moz-border-radius:10px;
                -webkit-border-radius:10px;
        }
</style>

<script type="text/javascript" charset="utf-8">
        var scrollSpeed = 70;
        var step = 1;
        var current = 0;
        var imageWidth = 2247;
        var headerWidth = 800;          

        var restartPosition = -(imageWidth - headerWidth);

        function scrollBg(){
                current -= step;
                if (current == restartPosition){
                        current = 0;
                }

                $('#header').css("background-position",current+"px 0");
        }

        var init = setInterval("scrollBg()", scrollSpeed);
</script>

</head>

<body>
<div id="container">
        <div id="header">
                <h1>Animated Background Image</h1>
        </div><!-- #header -->

        <div id="content">
                <!-- Your content will go here -->
        </div><!-- #content -->
</div><!-- #container -->

</body>
</html>

Link Animated background image with jQuery

Paginar y filtrar lista-select con Mootools

Publicado el 18⋅Septiembre⋅2009 en JavaScript
0 Comentarios • 1690 hits

La lista HTML estándar <select> es muy útil para mostrar una listado de texto, permitiendo al usuario seleccionar uno ó, si esta habilitado, varios elementos de esta. MTMultiselect es un widget, que con la ayuda de Mootools, le podemos añadir funcionalidad extra como: paginar y filtrar los elementos de la lista.

MTMultiselect

El diseño de este widget puede ser modificado mediante CSS.

Sitio web : justindonato.com
Demo : http://www.justindonato.com/demo/mtmultiselect/
Descarga : http://bitbucket.org/justindonato/mtmultiselect/

Easy News Plus, diapositiva de noticias

Publicado el 17⋅Septiembre⋅2009 en JavaScript, Desarrollo Web
2 Comentarios • 1553 hits

En uno de los comentarios me preguntaron por el slideshow ó diapositiva de noticias que se pueden apreciar en la página inicial del blog (y directorio de categorias también). Pues se trata de Easy News Plus un plugin que implementa facilmente un slideshow de contenido HTML que funciona con jQuery.

Easy news plus

Cuenta con las siguientes características:

Cross browser (compatibilidad con la mayoría de navegadores web) .
Botones Previo, Pause y Siguiente.
No necesita de otros plugins.
Acepta cuaquier contenido HTML, incluso Flash.
Soporte efecto de transición muy suave.
Velocidad de visualización ajustable.
Diseño editable mediante su hoja de estilos.

HTML

Primero creamos el contenedor de todas las noticias ó HTML que queremos mostrar.

<div id="mynews" style="display:none">
<div class="news_style">Contenido HTML ...</div>
<div class="news_style">Contenido HTML .../div>
..........mas noticias.................
</div>

Creamos otro contendor para mostrar las noticias.

<div  id=showhere></div>

Insertamos los botones Prev, Siguiente y Pause (por defecto usar los siguientes nombres de archivo: prev0.gif, next0.gif, pause0.gif).

<div class=buttondiv id=news_button>
<img src=prev.gif align="absmiddle" id=news_prev>
<img src=pause.gif align="absmiddle" id=news_pause>
<img src=next.gif align="absmiddle" id=news_next>
</div>

Opcionalmente creamos un contendor para mostrar el título de las noticias:

<div id=news_display ></div>

Descargamos jQuery y el plugin de esta herramienta. Antes del </head> incluir este código JavaScript.

<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="jquery.easynews.plus.js"></script>
<script>
$(document).ready(function(){
  var newsoption = {
  firstname: "mynews",
  secondname: "showhere",
  thirdname:"news_display",
  fourthname:"news_button" ,
  playingtitle:"Now Playing:",
  nexttitle:"Next News:",
  prevtitle:"prev News:",
  newsspeed:'8000',
  isauto:'1',
  newscountname:"test",
  imagedir:'/dir/easynewsplus/',
  disablenewscount:false
  }
  $.init_plus(newsoption);
});
</script>

Expliquemos algunos parámetros:

firstname, id de contenedor de todas las noticias.
secondname, id del contenedor donde se mostrarán las noticias.
thirdname, id del contenedor del título de las noticias.
fourthname, id del contendor de los botones de desplazamiento.
newsspeed, tiempo de desplazamiento 1000=1 segundo.
isauto, 1 = auto play.
imagedir, directorio donde están alojadas las imágenes.

Si todo esto te parecio confuso un demo de esta herramienta te puede ayudar.

Sitio web : EZjQuery
Demo : http://www.ezjquery.com/sdemo9more.html

Resaltar color de celda, filas y columnas de una tabla con Mootools

Publicado el 16⋅Septiembre⋅2009 en JavaScript, CSS
0 Comentarios • 1679 hits

Con la ayuda de CSS es posible resaltar el color de fondo de un elemento HTML en este caso una celda, fila ó columna de una tabla. Con la ayuda de la propiedad :hover, soportado en la mayoría de navegadores (salvo IE6, grrrr!). Pero David Walsh nos explica una forma de lograr el resaltado de color con la ayuda de Mootools.

Tabla XHTML

<table id="highlight-table">
       <colgroup></colgroup>
       <colgroup class="slim"></colgroup>
       <colgroup class="slim"></colgroup>
       <colgroup class="slim"></colgroup>
       <colgroup class="slim"></colgroup>
    <thead>
       <tr>
           <th></th>
           <th></th>
           <th></th>
           <th></th>
           <th></th>
       </tr>
    </thead>
        <tbody>
                <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                </tr>
                <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                </tr>
                <!-- MORE ROWS -->
        </tbody>
</table>

CSS

table               { border-collapse: collapse; width: 100%; margin-top:10px; }
td                  { border: 1px solid #ccc; padding: 10px; }
thead               { width: 100%; height: 109px; background: url(header.png) no-repeat; }
.slim               { width: 88px; }
.column-hover           { background:#eee; }
.row-hover                      { background:#ddd; }
.cell-hover                     { background:#fffea1; }

Código JavaScript

window.addEvent('domready',function(){
/*  METHOD 2:  Better  */
var table = document.id('highlight-table');
var rows = table.getElements('tr');

//for every row...
rows.each(function(tr,trCount){
        //we don't want the header
        if(tr.getParent().get('tag') == 'thead') { return false; }
        //add the row class to the row
        tr.addClass('row-' + trCount);
        //add the row listener
        tr.addEvents({
                'mouseenter': function(){
                        tr.addClass('row-hover');
                },
                'mouseleave': function(){
                        tr.removeClass('row-hover');
                }
        });
        //for every cell...
        tr.getElements('td').each(function(td,tdCount) {
                //remember column and column items
                var column = 'col-' + tdCount;
                var friends = 'td.' + column;
                //add td's column class
                td.addClass(column);
                //add the cell and column event listeners
                td.addEvents({
                        'mouseenter': function(){
                                $$(friends).erase(td).addClass('column-hover');
                                td.addClass('cell-hover');
                        },
                        'mouseleave': function() {
                                $$(friends).erase(td).removeClass('column-hover');
                                td.removeClass('cell-hover');
                        }
                });
        });
});     
});

Sitio : David Walsh
Demo : http://davidwalsh.name/dw-content/mootools-table-columns.php

Reconocimiento de voz en una página web con WAMI

Publicado el 16⋅Septiembre⋅2009 en Tecnología, JavaScript
1 Comentarios • 1359 hits

WAMI (Web Accessible Multimodal Applications) es un proyecto de la MIT que permite el reconocimiento de voz directamente en una página web gracias a JavaScript y un applet en Java, y opcionalmente grabar-almacenar estos en archivos de audio.

Puedes ver una lista de ejemplos haciendo uso de esta herramienta.

Puedes probar con la aplicación Hola Mundo de WAMI para notar el potencial de esta herramienta. Conecta el microfono a tu PC, pulsas settings para configurar el audio de entrada y salida, luego manten pulsado Hold to talk mientras lees cualquiera de la frases que se muestran. WAMI reconocerá lo que leistes y lo mostrará en un cuadro de mensaje.

WAMI

Vía Ajaxian

Sitio web : WAMI Toolkit
Demo : http://wami.csail.mit.edu/examples/jsapi/parrot.html

Página 1 / 21 : 1 2 3 4 5 6 ...21 Siguiente

RibosoMatic on Facebook

Populares Comentarios Ultimos 10

Categorias / Archivo