ElWebmaster.net » Javascript http://www.elwebmaster.net Recursos, tutoriales y descargas para desarrollo y diseño web Sat, 30 Jan 2010 23:48:15 +0000 en hourly 1 http://wordpress.org/?v=3.0 Golpe de timón -plus Color, plugin jquery http://www.elwebmaster.net/golpe-de-timon-color-plugin-jquer/ http://www.elwebmaster.net/golpe-de-timon-color-plugin-jquer/#comments Tue, 12 Jan 2010 02:33:30 +0000 Alfredo http://www.elwebmaster.net/?p=443

Últimamente el blog estuvo un poco descuidado, los que hicieron comentarios o preguntas durante este tiempo se habrán dado cuenta. Uno de los tantos motivos fue haberme encontrado con la, probablemente, peor pesadilla de los freelancers: un trabajo fijo.

Pero es momento de retomar el “buen camino”. Ahora, con un poco más de independencia, y además de presentarles dentro de unos días la web de mi nueva empresa de diseño web (para que me digan si les parece fea o no ;) ),  voy a aumentar la frecuencia de los posts y el feedback con los lectores. Porque eso es lo importante, aprender juntos.

Los dejo con Color, un plugin en Jquery que sirve para animar texto, capas, realizar scrolls con easing, y cambiar de color cualquier texto con un agradable efecto de fading.

Yo veo más útil el fade en el cambio de color, para usarlo en los links durante el mouseover.

Sitio del plugin Color, jQuery

Tutorial para incluir fading en el :hover de los links

]]> http://www.elwebmaster.net/golpe-de-timon-color-plugin-jquer/feed/ 1 Menú en jQuery estilo iPod http://www.elwebmaster.net/menu-en-jquery-estilo-ipod/ http://www.elwebmaster.net/menu-en-jquery-estilo-ipod/#comments Wed, 22 Jul 2009 02:26:16 +0000 Alfredo http://www.elwebmaster.net/?p=389

Últimamente ando buscando plugins para algunas cosas que tengo en mente (si esas ideas se materializan en alguna web voy a presentarlas aquí orgullosamente). Me pareció bastante bueno el menú estilo iPod basado en jQuery, hecho por los de Filament Group.

Presenta varias opciones, como incluir el botón atrás en cada subnivel, incluir la dirección actual en una especie de header, etc.

downloadDescargar el script con su CSS, y un HTML de ejemplo

]]> http://www.elwebmaster.net/menu-en-jquery-estilo-ipod/feed/ 3 5 tutoriales para crear tooltips con Jquery http://www.elwebmaster.net/5-tutoriales-para-crear-tooltips-con-jquery/ http://www.elwebmaster.net/5-tutoriales-para-crear-tooltips-con-jquery/#comments Mon, 29 Jun 2009 10:00:58 +0000 Alfredo http://www.elwebmaster.net/?p=344

Unos proyectos en desarrollo me llevaron a buscar tutoriales para hacer tooltips, y como verán hay de todo, simples, animados, minimalistas, feos, etc. Aquí va una lista de los que me parecieron más interesantes

Animated hover effect – Webdesignerwall

En el tutorial no dicen que es un tooltip, pero puede ser usado como tal. Son los ítems 5a y 6a de la lista.

Tutorial – Demo

Coda Popup Bubbles – Jqueryfordesigners

Tutorial – Demo

Simple tooltip with CSS and Jquery – Kriesi.at

Tutorial – Demo

Better tooltip with Jquery awesomeness – Net tuts

Tutorial – Demo

Simple tooltip powered by Jquery – 3nhaced.com

Tutorial – Demo

]]> http://www.elwebmaster.net/5-tutoriales-para-crear-tooltips-con-jquery/feed/ 2 Menú desplegable con JQuery y CSS http://www.elwebmaster.net/menu-desplegable-con-jquery-y-css/ http://www.elwebmaster.net/menu-desplegable-con-jquery-y-css/#comments Wed, 03 Jun 2009 10:45:44 +0000 Alfredo http://www.elwebmaster.net/?p=317

En Noupe encontré un ejemplo de menú desplegable en JQuery de uso bastante agradable, inclusive lo guardé para próximos proyectos. Click en la imagen para ver una Demo:

Se trata de un menú en el que si clickeas el texto, funciona como enlace, y si clickeas la flecha lateral se despliega el submenú. Pero lo que le da el toque especial es el suave efecto de movimiento al expandirse y colapsarse el menú.

Incluye la opción de mostrar un menú mucho más sencillo para los usuarios que tienen deshabilitado el Javascript en su navegador, obviamente el resultado es muy pobre.

]]> http://www.elwebmaster.net/menu-desplegable-con-jquery-y-css/feed/ 1 Dock menu con jQuery para tu web http://www.elwebmaster.net/dock-menu-con-jquery-para-tu-web/ http://www.elwebmaster.net/dock-menu-con-jquery-para-tu-web/#comments Thu, 23 Apr 2009 14:32:02 +0000 Alfredo http://www.elwebmaster.net/?p=197

Un regalo para los fans de MAC, este menú basado en jQuery y CSS inspirado en el dock de la manzanita. Desarrollado por ndesign, con íconos que también ellos diseñaron. Incluye 2 estilos: top y bottom

Descarga el menú – Mira el demo

Implementación del menú:

Luego de descargar el menú, incluye el siguiente código en el <head> de tu web:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>

<link href="style.css" rel="stylesheet" type="text/css" />

<!--[if lt IE 7]>
<style type="text/css">
.dock img { behavior: url(iepngfix.htc) }
</style>
<![endif]–>

Incluye lo siguiente en cualquier parte del <body>

<script type="text/javascript">
$(document).ready(
function()
{
$(’#dock2′).Fisheye(
{
maxWidth: 60,
items: ‘a’,
itemsText: ’span’,
container: ‘.dock-container2′,
itemWidth: 40,
proximity: 80,
alignment : ‘left’,
valign: ‘bottom’,
halign : ‘center’
}
)
}
);
</script>

Para añadir un ítem al top dock (el que se ubica en la parte superior)

<a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a>

Y para añadir un ítem al bottom dock (el de abajo)

<a class="dock-item2" href="#"><span>Home</span><img src="images/home.png" alt="home" /></a>

Funciona con IE 6, IE 7, Opera 9, Firefox 2, y Safari 2 (algunos errores menores en Safari)

    ]]>     http://www.elwebmaster.net/dock-menu-con-jquery-para-tu-web/feed/ 1     Galería de fotos en Mootools http://www.elwebmaster.net/galeria-de-fotos-en-mootools/ http://www.elwebmaster.net/galeria-de-fotos-en-mootools/#comments Wed, 15 Apr 2009 13:18:00 +0000 Alfredo http://www.elwebmaster.net/?p=157

    En (E)2 Interactive publicaron para descarga la beta .93 de (E)2 Photo Gallery, una galería de fotos hecha en Mootools. La galería carga automáticamente (mediante PHP) las fotos de la carpeta que le indiques.

    Instalación:

    Descarga la galería y descomprímela.

    1- Abre el archivo config.php para editarlo.

    $gallerypath=”images”;    //La ruta a la carpeta donde se encuentran las imágenes
    $thumbpath=”imagethumbs”; //La carpeta donde están las miniaturas para vista previa en el menú
    $transitionspeed=”500″;   //Velocidad de la animación
    $fadespeed=”300″;         //Velocidad de desvanecimiento de las fotos
    $username=”username_here”;//Nombre de usuario para ingresar al uploader de fotos
    $password=”password”;     //Contraseña para lo anterior

    2- Sube los archivos a tu servidor.

    3- Ingresa a http://www.tusitio.com/carpate donde está la galería/uploader/ con el nombre de usuario y la contraseña que configuraste antes. Sube las fotos y las miniaturas con el uploader. El Script se encarga de redimensionar tus miniaturas para que encajen en el menú de la galería.

    Y eso es todo! La galería viene con 5 estilos diferentes para elegir.

    ]]>     http://www.elwebmaster.net/galeria-de-fotos-en-mootools/feed/ 1     Paginación de libro con JQuery http://www.elwebmaster.net/paginacion-de-libro-con-jquery/ http://www.elwebmaster.net/paginacion-de-libro-con-jquery/#comments Tue, 07 Apr 2009 12:00:43 +0000 Alfredo http://www.elwebmaster.net/?p=111

    Cada vez hay más razones para ir dejando de lado flash! Con JQuery ahora puedes conseguir el efecto de cambio de página de un libro solamente usando esa librería de javascript.

    En la web del autor puedes acceder al código y las explicaciones.

    ]]>     http://www.elwebmaster.net/paginacion-de-libro-con-jquery/feed/ 1     s3Slider – Slideshow con JQuery http://www.elwebmaster.net/s3slider-slideshow-con-jquer/ http://www.elwebmaster.net/s3slider-slideshow-con-jquer/#comments Thu, 19 Mar 2009 14:40:10 +0000 Alfredo http://www.elwebmaster.net/?p=53

    s3Slider JQuery Plugin, con el que podemos crear atractivos slideshows con imágenes y texto. Es de uso muy sencillo, ideal para principiantes. Antes de adentrarte en la explicación podés ver un ejemplo.

    Uso:

    Descargar JQuery desde su página oficial, luego incluir la líbrería y el Javascript de s3Slider en el header de la página donde vamos a usarlo.

    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/s3Slider.js" type="text/javascript"></script>

    HTML

    <div id="s3slider">
    <ul id="s3sliderContent">
    <li class="s3sliderImage">
    <img src="#" />
    <span>Your text comes here</span>
    </li>
    <li class="s3sliderImage">
    <img src="#" />
    <span>Your text comes here</span>
    </li>
    <div class="clear s3sliderImage"></div>
    </ul>
    </div>

    CSS

    #s3slider {
    width: 400px; /* important to be same as image width */
    height: 300px; /* important to be same as image height */
    position: relative; /* important */
    overflow: hidden; /* important */
    }

    #s3sliderContent {
    width: 400px; /* important to be same as image width or wider */
    position: absolute; /* important */
    top: 0; /* important */
    margin-left: 0; /* important */
    }

    .s3sliderImage {
    float: left; /* important */
    position: relative; /* important */
    display: none; /* important */
    }

    .s3sliderImage span {
    position: absolute; /* important */
    left: 0;
    font: 10px/15px Arial, Helvetica, sans-serif;
    padding: 10px 13px;
    width: 374px;
    background-color: #000;
    filter: alpha(opacity=70); /* here you can set the opacity of box with text */
    -moz-opacity: 0.7; /* here you can set the opacity of box with text */
    -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
    opacity: 0.7; /* here you can set the opacity of box with text */
    color: #fff;
    display: none; /* important */
    top: 0;

    /*
    if you put
    top: 0; -> the box with text will be shown at the top of the image
    if you put
    bottom: 0; -> the box with text will be shown at the bottom of the image
    */
    }

    .clear {
    clear: both;
    }

    Luego inicializamos s3Slider y configuramos el tiempo en milisegundos que se mostrará cada imagen del slideshow

    $(document).ready(function() {
    $('#s3slider').s3Slider({
    timeOut: 4000
    });
    });

    Funciona en:

    • Firefox 2.x
    • Firefox 3.0.3
    • Opera 9.6
    • Safari 3.0.3
    • Google Chrome
    • Internet Explorer 6 y 7

    Ejemplo – Descarga (comprimida) – Descarga (no comprimida) – Descarga (con ejemplo)

    ]]>     http://www.elwebmaster.net/s3slider-slideshow-con-jquer/feed/ 1