Mas que Wordpress - Tutoriales, recursos web, JQuery y PHP, Wordpress , twitter y muchos recursos más » JQuery

Scroll con Jquery sin plugins

Damian — Tue, 27 Dec 2011 14:06:42 +0000

Uno de los post más consultados en mi blog es el de jQuery.ScrollTo , que no es ni más ni menos que un plugin para animar la pantalla en lugar de usar los aburridos y anticuados anchors de HTML. Como en dicho en montón de oportunidades no siempre me gusta usar plugin para realizar tareas sencillas.

En el caso de un scroll , si lo que quieren es animar la pantalla para volver a la parte superior de sus sitios webs no hay nada más sencillo para hacer que lo siguiente:

Por ejemplo si en el header a nuestro logo le agregamos la clase .top-page

En el footer podemos colocar un link, una imagen o lo que ustedes quieran como por ejemplo:

1	Click para subir

Por último agregamos el código jQuery encargado de animar nuestro anchor.

$('document').ready(function(){
$('.top').click(function() {
   var elementClicked = $(this).attr("href");
   var destination = $("."+elementClicked).offset().top;
   $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-20}, 500 );
   return false;
});
});

Ver Ejemplo Online

Validar email con Javascript sin un plugin

Damian — Mon, 07 Nov 2011 14:23:28 +0000

Todos saben que no me gusta instalar plugins de jQuery cuando tan solo requiero pequeñas funciones. Por ejemplo para validar un email no creo necesario instalar un plugin que realize validación de formularios sino más bien crear una pequeña función que valide dicho email y listo.

Con esta pequeña función pueden validad direcciones de email con ~~jQuery~~ Javascript.

function validateEmail($email) {
	var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
	if( !emailReg.test( $email ) ) {
		return false;
	} else {
		return true;
	}
}

Saludos!!

Update:Como bien comenta Franz en los comentarios no hay jQuery en este artículo. Eso me pasa por escribir apurado sobre un borrador que tenía preparado que en un principio iba a usar jQuery y luego no fue así. Gracias lectores por estar atentos!

Diferencia entre $(document).ready y $(window).load en jQuery

Damian — Thu, 03 Nov 2011 19:07:27 +0000

Hoy les voy a explicar la principal diferencia entre $(document).ready y $(window).load , funciones esenciales a la hora de usar jQuery en tus programas.

1
2
3

$(document).ready(function(){
//todo el código
});

El código que ven más arriba se suele usar la mayoría del tiempo y en casi todos lados lo mencionan como la mejor manera de ejecutar nuestro código después del que el DOM esta listo.

Entonces para que se necesita $(window).load() ?

Yo hasta ahora lo he utilizado para trabajar con imágenes. Cuando se necesita manipular imágenes para por ejemplo alinearlas o se necesita obtener el width y height de las mismas necesitaremos sí o sí utilizar $(window).load().
Con $(document).ready() no podrás hacer eso si el usuario no tiene cargadas las imágenes en la cache o en otras palabras tu código siempre fallaría con nuevos usuarios.

A diferencia de este último $(window).load() ejecutará el código una vez hayan cargado todas las imágenes. A simple vista no se observa diferencia ninguna en cuanto a tiempo, pero si alguna vez tuvieron que manipular imágenes cuando carga una página sabrán a que me refiero.

1
2
3

$(window).load(function(){
// Código ejecutado después de que se carguen la imágenes.
});

Saludos!!!

Convertir cadenas de texto en números en Javascript

Damian — Thu, 20 Oct 2011 13:24:12 +0000

Sencillas funciones que no por ello son menos importantes para poder convertir strings en int o floats. Aunque estas funciones son de Javascript las pueden emplear con jQuery o cualquier otro framework para convertir sus cadenas de texto en números y así poder restar, sumar o realizar cualquier otra operación que necesiten.

Convertir string a entero

var texto = '1234';
 
// text + 10 = 123410
 
var numero;
numero = parseInt(texto) +10;
 
//numero= 1244

String a decimal:

var texto = '1234.0987';
//texto + 10 = 1234.098710
 
var entero = parseInt(text); // entero = 1234
var decimal = parseFloat(text); // decimal = 1234.0987
//decimal + 10 = 1244.098710

Reducir el número de decimales:

1
2
3

var numero = 1234.0987;
 
numero = numero.toFixed(2); // numero = 1234.09

Contar o Limitar la cantidad de palabras con jQuery

Damian — Thu, 13 Oct 2011 14:02:47 +0000

Se acuerdan que el otro día creamos un plugin para limitar las letras de un textarea? Y que pasa si lo que necesitamos en limitar la cantidad de palabras? Aunque en principio no parezca de utilidad hay ocasiones donde necesitaremos hacerlo o simplemente necesitaremos contar la cantidad de palabras de un textarea para mostrarlo en un mensaje.

Contar la cantidad de palabras de un textarea

$('#textarea_id').keyup(function(){
     var palabras = $(this).val().split(/\b[\s,\.\-:;]*/).lenght;
     $('#contador').text('Has escrito en total '+ palabras +' palabras');
});

Lo que hacemos en cada vez que se levanta una tecla(keyup) comprobamos el valor del textarea y lo dividimos(split) en palabras mediante la regla de regex que prácticamente se encarga de separar las palabras por espacios, guiones ,etc. Una vez que tenemos todas las palabras con lenght obtenemos la cantidad.
Por último modificamos el campo contador con la cantidad de palabras de nuestro textarea.

Limitar la cantidad de palabras de un textarea

Para esto vamos a crear una nueva función

function limitar_palabras(texto, limite){
var palabras = texto.split(/\b[\s,\.\-:;]*/,limite);
texto=palabras.join(" ");
return texto;
}

En esta función añadimos la variable limite al .split y luego unimos el resultado con espacios usando .join.

Por lo que el código todo junto quedaría de la siguiente forma:

$(document).ready(function(){
    $('#textarea_id').keyup(function(){
        $(this).val(limitar_palabras($(this).val(),3));
    });
});
function limitar_palabras(texto, limite){
    var palabras = texto.split(/\b[\s,\.\-:;]*/,limite);
    texto=palabras.join(" ");
    return texto;
}

Facil y sencillo verdad? Porque no prueban a crear su propio plugin de jQuery con estos sencillos pasos? Saludos!!

Actualizado

Actualización

He cambiado el regex para que también detecte números como palabras . Ahora “-” esta “\-”.

63 Tutoriales de Diseño Web, jQuery, WordPress y un montón más

Damian — Fri, 07 Oct 2011 14:30:48 +0000

63 Tutoriales de Diseño Web, jQuery, WordPress y un montón más es la cantidad reunida hasta día de hoy en mi blog. Eso sin contar los “pequeños trucos o tips” que son demasiado cortos para contarlos como tutoriales.

Alguien quiere colaborar con un tutorial propio?

Saludos!!

Plugin jQuery para limitar caracteres en un campo de texto

Damian — Thu, 06 Oct 2011 15:36:02 +0000

[offtopic] Antes de empezar este artículo quiero dar mis condolencias a la Familia Jobs. Para mi Steve Jobs siempre fue un grande , incluso antes de enamorarme de sus productos y SO. Siempre recomiendo ver un discurso dado por el para los alumnos de Standford Bridge. Lo pueden encontrar en http://www.youtube.com/watch?feature=player_embedded&v=14v3kV47oZU [/offtopic]

Hoy les voy a enseñar 2 cosas. Como limitar los caracteres de un campo de texto ya sea un textarea o un input y como crear un plugin de Jquery.

Lo primero que necesitamos en un nuevo formulario dentro de una página HTML y le vamos a agregar un etiqueta span que será donde mostremos los caracteres que nos quedan con id=”counter”.

Ahora escribamos nuestra función para mostrar cuantos caracteres nos quedan.

1 2	var caracteres= 100; $("#counter").html("Te quedan "+ caracteres+" caracteres");

Creamos una función que en el evento keyup que compruebe que la cantidad de caracteres escritos no es mayor que el limite que establecimos anteriormente. En caso contrario borra el valor de campo que excede dicho limite:

$("#text").keyup(function(){
    if($(this).val().length > caracteres){
        $(this).val($(this).val().substr(0, caracteres));
}

Explicando un poco esta función vemos que cada vez que se levanta el dedo de un tecla obtenemos el length(cantidad) de caracteres del valor(val) de nuestro campo de texto y lo comparamos con la cantidad estipulada anteriormente.
Si es mayor el valor del campo es sustituido por el valor actual menos el limite estipulado. Es decir, con la función substr recortamos la cadena de texto desde el caracter 0 hasta 100 y el resultado sustituye el valor del campo de texto.

Ahora cambiemos la frase de nuestro counter.

1 2	var quedan = caracteres - $(this).val().length; $("#counter").html("Te quedan "+ quedan+" caracteres.");

Aquí solamente restamos el limite establecido menos la cantidad de caracteres de nuestro campo.

Y si queremos agregarle un toque de color podemos hacer lo siguiente:

if(quedan <= 10)
{
    $("#counter").css("color","red");
}
else
{
    $("#counter").css("color","black");
}

Si nos quedan menos de diez caracteres , nuestro mensaje se volvera rojo!

El script entero entonces queda de la siguiente forma:

$(document).ready(function()  {
    var caracteres = 220;
    $("#counter").html("Te quedan "+  caracteres+" caracteres.");
    $("#text").keyup(function(){
        if($(this).val().length > caracteres){
        $(this).val($(this).val().substr(0, caracteres));
        }
    var quedan = caracteres -  $(this).val().length;
    $("#counter").html("Te quedan "+  quedan+" caracteres.");
    if(quedan <= 10)
    {
        $("#counter").css("color","red");
    }
    else
    {
        $("#counter").css("color","black");
    }
    });
});

Pueden ver el ejemplo funcionando en http://jsfiddle.net/sa4HH/

Crear un Plugin jQuery para delimitar los campos de texto

Por lo general vamos a necesitar este código en más de una ocasión y para varios campos de texto, por lo que repetir todo una y otra vez no es aceptable. En este caso nos conviene crear un simple plugin de jQuery que será facil de aplicar.
Para ello siguiendo la lógica de jQuery vamos a crear la base de nuestro plugin que lo vamos a llamar “limitar”:
¡

(function($){
    $.fn.limitar = function(options) {
      defaults = {
        limite: 200,
        id_counter: false,
        clase_alert: false
     }
   var options = $.extend(defaults,  options);

Al declarar nuestro plugin limitar hemos creado unos valores por defecto que paso a explicar.

limite: Es el límite por defecto. En este caso 200 caracteres.
id_counter: Es el id del campo donde mostraremos el mensaje de caracteres faltantes. Por defecto es false, por lo que no mostraríamos ningún mensaje.
clase_alert: En lugar de cambiar el color si los caracteres son menos que diez vamos a asignarle un clase para así dar más libertad a la hora de aplicar estilo a este mensaje de alerta. Por defecto no se asigna ninguna clase ya que es false.

Ahora debemos terminar la función de nuestro plugin:

return this.each(function() {
    var caracteres = options.limite;
    if(options.id_counter != false)
    {
        $("#"+options.id_counter).html("Te quedan "+ caracteres +" caracteres.");
    }
    $(this).keyup(function(){
        if($(this).val().length > caracteres){
        $(this).val($(this).val().substr(0, caracteres));
        }
        if(options.id_counter != false)
        {
            var quedan =  caracteres - $(this).val().length;
            $("#"+options.id_counter).html("Te quedan "+ quedan +" caracteres");
            if(quedan <= 10)
            {
                $("#"+options.id_counter).addClass(options.clase_alert);
            }
            else
            {
                $("#"+options.id_counter).removeClass(options.clase_alert);
            }
        }
    });
});

Estamos replicando nuestra función del principio con la única diferencia que usamos los valores dentro del array options para dar más flexibilidad al código y miren que sin por ejemplo options.id_counter es false nunca mostraremos el mensaje.

El plugin entero que debemos guardar como jquery.limitar.js quedaría de la siguiente forma:

(function($){
    $.fn.limitar = function(options) {
      defaults = {
        limite: 200,
        id_counter: false,
        clase_alert: false
     }
   var options = $.extend(defaults,  options);
   return this.each(function() {
    var caracteres = options.limite;
    if(options.id_counter != false)
    {
        $("#"+options.id_counter).html("Te quedan "+ caracteres +" caracteres.");
    }
    $(this).keyup(function(){
        if($(this).val().length > caracteres){
        $(this).val($(this).val().substr(0, caracteres));
        }
        if(options.id_counter != false)
        {
            var quedan =  caracteres - $(this).val().length;
            $("#"+options.id_counter).html("Te quedan "+ quedan +" caracteres");
            if(quedan <= 10)
            {
                $("#"+options.id_counter).addClass(options.clase_alert);
            }
            else
            {
                $("#"+options.id_counter).removeClass(options.clase_alert);
            }
        }
    });
});
};
})(jQuery);

Para usarlo tan solo debemos llamarlo de la siguiente manera (no se olviden de crear la clase para dar estilo al mensaje de alerta):

Pueden ver el ejemplo funcionando en http://jsfiddle.net/V7Gs6/1/

Saludos!!!!!

Tabs en JQuery y reconocimiento de hashtags

Damian — Fri, 29 Oct 2010 22:37:58 +0000

Hace mucho que no pongo un tutorial de JQuery en la web, así que hoy voy a explicarles como se puede animar unas tabs (pestañas) con JQuery con unas pocas lineas de código y un poco de CSS.

Este tutorial es bastante sencillo y se me ocurrió hacerlo porque estoy trabajando en un artículo sobre como crear una aplicación para Twitter con PHP en el cual necesito hacer unas tabs bastante sencillas. Pero no nos adelantemos y vamos a ver como crear tabs con JQuery y CSS.

Lo primero que necesitamos es la estructura HTML :

Hay que tener en cuenta que vamos a mostrar contenido por defecto por lo que hay que aplicar la clase “active” a la pestaña activa y ocultar el contenido que no queremos mostrar con “display:none;”

 
<ul class="tabs">
    <li  class="active"><a href="#tab1">Home</a></li>
    <li><a href="#tab2">Galería</a></li>
    <li><a href="#tab3">Contacto</a></li>
</ul>
 
<div class="tab_container">
    <div id="tab1" class="tab_content">
        
    </div>
    <div id="tab2" class="tab_content"  style="display:none;">
       
    </div>
    <div id="tab3" class="tab_content"  style="display:none;">
       
     </div>
</div>

Aplicando estilo

De momento solo tenemos una lista y un par de divs. Vamos a aplicarle un poco de estilo con CSS:

ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 32px;
	border-bottom: 1px solid #999;
	border-left: 1px solid #999;
	width: 100%;
}
ul.tabs li {
	float: left;
	margin: 0;
	padding: 0;
	height: 31px;
	line-height: 31px;
	border: 1px solid #999;
	border-left: none;
	margin-bottom: -1px;
	overflow: hidden;
	position: relative;
	background: #e0e0e0;
}
ul.tabs li a {
	text-decoration: none;
	color: #000;
	display: block;
	font-size: 1.2em;
	padding: 0 20px;
	border: 1px solid #fff;
	outline: none;
}
ul.tabs li a:hover {
	background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  {
	background: #fff;
	border-bottom: 1px solid #fff;
}
.tab_container {
	border: 1px solid #999;
	border-top: none;
	overflow: hidden;
	clear: both;
	float: left; width: 100%;
	background: #fff;
}
.tab_content {
	padding: 20px;
	font-size: 1.2em;
}

Incluyendo JQuery

Incluimos JQuery como hacemos siempre.

1	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>

La magia de JQuery

Por último añadimos el script JQuery que será el encargado de darle vida a nuestras tabs con JQuery y CSS

$(document).ready(function()
{
 
	$("ul.tabs li").click(function()     //cada vez que se hace click en un li
       {
		$("ul.tabs li").removeClass("active"); //removemos clase active de todos
		$(this).addClass("active"); //añadimos a la actual la clase active
		$(".tab_content").hide(); //escondemos todo el contenido
 
		var content = $(this).find("a").attr("href"); //obtenemos atributo href del link
		$(content).fadeIn(); // mostramos el contenido
		return false; //devolvemos false para el evento click
	});
});

Como ven con unas pocas lineas de código tenemos tabs en jquery

Reconocer links con hashtags como twitter

Sacando un poco más de jugo a este script podemos añadir una función que detecte los hashtags en los links.
Por ejemplo si pasamos el link http://masquewordpress.com/ejemplos/tabs-en-jquery/#tab3 queremos que nos muestre el contenido de la tercera pestaña.
Con el siguiente código podemos conseguirlo:

  var hash = window.location.hash.substr(1); //recuperamos el hashtag del link
	var href = $('ul.tabs li a').each(function(){ //pasamos por todos los tabs
		var href = $(this).attr('href'); //recuperamos atributo href
		href=href.substr(1); //retiramos # 
		if(hash==href){ //comprobamos que el hash sea igual que el atributo de la pestaña
			$(".tab_content").hide();    //escondemos todo
			$("ul.tabs li").removeClass("active"); //desactivamos pestañas
			$(this).parent('li').addClass("active"); //activamos pestaña actual
			$('#'+hash).fadeIn(); // mostramos contenido requerido
		}											
	})

Todo el código javascript junto sería

$(document).ready(function()
{
	var hash = window.location.hash.substr(1);
	var href = $('ul.tabs li a').each(function(){
		var href = $(this).attr('href');
		href=href.substr(1);
		if(hash==href){
			$(".tab_content").hide();
			$("ul.tabs li").removeClass("active");
			$(this).parent('li').addClass("active");
			$('#'+hash).fadeIn();
		}											
	})
 
 
	$("ul.tabs li").click(function()
       {
		$("ul.tabs li").removeClass("active");
		$(this).addClass("active");
		$(".tab_content").hide();
 
		var content = $(this).find("a").attr("href");
		$(content).fadeIn();
		return false;
	});
});

Como siempre dejen sus dudas en los comentarios. Saludos!!!

Introducción a JQuery Template plugin jquery.tmpl.js

Damian — Wed, 13 Oct 2010 22:28:52 +0000

Hace poco el equipo de JQuery anuncio que el plugin de templates de Microsoft es ahora soportado oficialmente. Esto quiere decir que el propio equipo de JQuery se va a encargar de su desarollo y actualizaciones. A continuación les explico como integrarlo y usarlo de una forma sencilla.

Para este ejemplo vamos a utilizar mis últimos tweets en Twitter de manera que sirvan para rellenar el template que vamos a crear previamente.

1. El primer paso es integrar JQuery y el plugin de templates

1 2	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script src="jquery.tmpl.js"></script>

2. Creamos el template

<script id="tweets" type="text/x-jquery-tmpl">
	<li>
		<img src="${imgSource}" alt="${username}" />
		<h2> ${username} </h2>
		<p> ${tweet} </p>
		{{if geo}}
		<span> ${geo} </span>
		{{/if}}
	</li>
</script>

Cabe destacar que:

Nuestro template se encuentra dentro de las tags

<head> <style> div { background-color:#bca; width:100px; border:1px solid green; position:absolute; } </style> <script src="http://code.jquery.com/jquery-latest.min.js"></script> </head> <body> <button id="go">Run</button><button id="left">«</button> <button id="right">»</button> <div id="block">Hola!!</div> <script> $("#go").click(function(){ $("#block").animate({ width: "70%", opacity: 0.4, marginLeft: "0.6in", fontSize: "3em", borderWidth: "10px" }, 1500 ); }); $("#right").click(function(){ $("#block").animate({"left": "+=50px"}, "slow"); }); $("#left").click(function(){ $("#block").animate({"left": "-=50px"}, "slow"); }); </script> </body>

JQuery .fadeIn() y JQuery .fadeOut()

<head> <style> span { color:red; cursor:pointer; } div { margin:3px; width:80px; display:none; height:80px; float:left; } div#one { background:#f00; } div#two { background:#0f0; } div#three { background:#00f; } </style> <script src="http://code.jquery.com/jquery-latest.min.js"></script> </head> <body> <span id="boton">Hace Click aca…</span> <span id="boton2">O hace Click aca…</span> <div id="one"></div> <div id="two"></div> <div id="three"></div> <script> $("#boton").click(function () { $("div:hidden:first").fadeIn("slow"); }); $("#boton2").click(function () { $("div:block:first").fadeOut("slow"); }); </script> </body>

JQuery .show() y JQuery .hide()

<head> <style> div { background:yellow;width:100px;height:100px; } </style> <script src="http://code.jquery.com/jquery-latest.min.js"></script> </head> <body> <button class="1">Show it</button> <button class="2">Hide it</button> <div style="display: none">Hola!! <script> $(".1").click(function () { $("div").show("slow"); }); $(".2").click(function () { $("div").hide("slow"); }); </script> </body>

JQuery .slideUp() y JQuery .slideDown()

<head> <style> div { background:#3d9a44; margin:3px; width:80px; height:40px; float:left; } </style> <script src="http://code.jquery.com/jquery-latest.min.js"></script> </head> <body> <button>Up</button> <div></div> <div></div> <div></div> <div></div> <div></div> <script> $("button").click(function () { if ($("div:first").is(":hidden")) { $("div").slideDown("slow"); $("button").html("Up"); } else { $("div").slideUp(); $("button").html("Down"); } }); </script> </body>

Como seleccionar / deseleccionar todos los checkbox con JQuery

<head> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> function checkTodos (id,pID) { $( "#" + pID + " :checkbox").attr('checked', $('#' + id).is(':checked')); } </script> </head> <body> <div id="tipos_trabajo" style="display: block;"> <form id="search_form" action="busquedas.php" accept-charset="utf-8" method="post"> //Boton que se encarga de seleccionar/ deseleccionar los checkbox <input id="checkAll" onclick="checkTodos(this.id,'tipos_trabajo');" name="checkAll" type="checkbox" /> <ul> <li name="tipotrabajo"> <input class="check" type="checkbox" value="1" name="tipotrabajo[]"/> Caldereria </li> <li name="tipotrabajo"> <input class="check" type="checkbox" value="2" name="tipotrabajo[]"/> Electricidad </li> <li name="tipotrabajo"> <input class="check" type="checkbox" value="3" name="tipotrabajo[]"/> Redes </li> <li name="tipotrabajo"> <input class="check" type="checkbox" value="10" name="tipotrabajo[]"/> Carpinteria </li> <li name="tipotrabajo"> <input class="check" type="checkbox" value="15" name="tipotrabajo[]"/> Mecánica </li> </ul></form> </div> </body>

Placeholder para cajas de búsquedas que desaparece

<head> <style> #searchbox{color:#ccc;} </style> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script> $(document).ready(function(){ var texto="Introduce tu búsqueda"; $("#searchbox").val(texto).focus(function(){$(this).val('');}).blur(function(){ ($(this).val() === '')? $(this).val(texto) : null; }); }); </script> </head> <body> <input type="search" id="searchbox"></input> </body>

Bueno que les pareció hasta ahí? Si dejan algún ejemplo interesante en los comentarios hacemos una segunda versión de JQuery Playground con los que se le ocurran a ustedes.
Como siempre estoy abierto a sus dudas, sugerencias y críticas ( de estas últimas un poco menos )

Saludos!!