Spartan Code - Blog » jquery http://www.spartan-code.com/blog web development Thu, 29 Apr 2010 18:04:27 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 Usar Facebook Connect en su sitio con Mu http://www.spartan-code.com/blog/2009/10/29/usar-facebook-connect-en-su-sitio-con-mu/ http://www.spartan-code.com/blog/2009/10/29/usar-facebook-connect-en-su-sitio-con-mu/#comments Thu, 29 Oct 2009 12:54:06 +0000 Pirata21 http://www.spartan-code.com/blog/index.php/usar-facebook-connect-en-su-sitio-con-mu/ Facebook Connect  es la manera de hacer su aplicación más social.

Con él podrás acceder a:

Perfiles: nombre del usuario, fotos y mucho más.

Sociales: los amigos del usuario y las conexiones.

Integración: editoriales, páginas de canvas, profile box y tabs.

Esta guia guía es para el uso de la biblioteca Mu  JavaScript para acceder a la facebook en su sitio. Mu es una biblioteca muy ligera que puede utilizar Facebook Connect en su sitio junto con su biblioteca JavaScript favorita como Dojo, jQuery, MooTools, Prototype o YUI.

Requirements: Facebook Connect
Demo: http://mu.daaku.org/console/
License: License Free

]]> http://www.spartan-code.com/blog/2009/10/29/usar-facebook-connect-en-su-sitio-con-mu/feed/ 0 Crear un efecto realista Hover con jQuery http://www.spartan-code.com/blog/2009/09/11/crear-un-efecto-realista-hover-con-jquery/ http://www.spartan-code.com/blog/2009/09/11/crear-un-efecto-realista-hover-con-jquery/#comments Fri, 11 Sep 2009 10:12:04 +0000 Pirata21 http://www.spartan-code.com/blog/index.php/crear-un-efecto-realista-hover-con-jquery/ ¿Te gustaría crear un efecto realista Hover con jQuery ?

Añade un efecto hover a un conjunto de enlaces utilizando el efecto jQuery Animate. En pocas palabras, el JS añade el reflejo / sombra a cada <li>, a continuación, anima a la posición y la opacidad de estos elementos y los iconos de los links en el hover.Y. Stop () elimina cualquier acumulación de cola de pasar el ratón rápidamente adelante y atrás sobre la navegación.

Demo: http://adrianpelletier.com/sandbox/jquery_hover_nav/

]]> http://www.spartan-code.com/blog/2009/09/11/crear-un-efecto-realista-hover-con-jquery/feed/ 0 Diferencia entre Find y Filter en jQuery http://www.spartan-code.com/blog/2009/07/17/diferencia-entre-find-y-filter-en-jquery/ http://www.spartan-code.com/blog/2009/07/17/diferencia-entre-find-y-filter-en-jquery/#comments Fri, 17 Jul 2009 14:13:44 +0000 Pirata21 http://www.spartan-code.com/blog/index.php/diferencia-entre-find-y-filter-en-jquery/ Es muy común confundirse entre estos dos métodos al comenzar con jQuery, pero ambos realizan tareas muy distintas.Mientras .filter quita, de los elementos contenidos en el objeto $, los que no cumplan con el selector que se le indica, .find busca en los descendientes de los objetos seleccionados.$(“div.nav“).find(“a“) Encuentra los links dentro de cualquier divcon la clase css nav, en cambio:$(“a“).addClass(“.link“).filter(“[href^=http://]“).addClass(“.externo“); Agrega la clase “link” a todos los <a> y la clase “externo”, solo a los que poseen una valor para el atributo href que comienza con “http://”, Este es otro ejemplo clásico de jQuery. (Los corchetes se utilizan para buscar en atributos del HTML y el ^ indica el que la cadena buscada debe estar al comienzo del valor del atributo.)En general .filter se utiliza para trabajar con un subconjunto de otro conjunto sobre el ya realicé una acción, permitiéndonos encadenar varias sentencias en una como en el ejemplo.En cambio .find es un método muy poderoso que me sirve para navegar dentro del DOM por relaciones “descendiente de” entre elementos. Buscará en los elementos descendientes de los contenidos en $, sin tener en cuenta estos últimos.Por ejemplo, dado: 
<div id="padre">    <div id="hijo1">       <div id="nieto1"></div>    </div>    <div id="hijo2"></div> </div>

$(“#padre“).find(“div“) Encuentra “hijo1”, “hijo2” y “nieto1”, (y no el div “padre” contenido en el objeto $.)Este tipo de métodos denominados “transversales”, son los que nos ampliarán el campo de acción cuando excedamos las posibilidades de los selectores.Visto en varioNet

]]> http://www.spartan-code.com/blog/2009/07/17/diferencia-entre-find-y-filter-en-jquery/feed/ 0 Técnicas CSS3 que podemos conseguir con jQuery http://www.spartan-code.com/blog/2009/03/07/tecnicas-css3-que-podemos-conseguir-con-jquery/ http://www.spartan-code.com/blog/2009/03/07/tecnicas-css3-que-podemos-conseguir-con-jquery/#comments Sat, 07 Mar 2009 16:15:42 +0000 Pirata21 http://www.spartan-code.com/blog/index.php/tecnicas-css3-que-podemos-conseguir-con-jquery/ La gente de noupe nos muestra un excelente post en el que podemos ver alguna de las propiedades CSS3 que ya tenemos ganas de tener en nuestras manos y las alternativas jQuery con las que podemos obtenerlas actualmente.

1. border-radius

Quizas es la propiedad más nombrada (despues de opacity) de las que están a punto de llegar. Y me parece lógico ya que las soluciones actuales (sin javascript) son engorrosas y desmesuradas. Con jQuery Canvas Rounded Corner podremos mitigar esas ansias de dispone de esta propiedad.

CSS3

#rounded-box {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}

jQuery

$('#rounded-box').corners({ radio: 15, borderSize: 2 });

2. border-image

Otra propiedad muy solicitada por la comunidad de diseñadores. Para usarla actualmente, tendremos que recurrir a jQuery borderImage.js.

CSS3

.button{
	-moz-border-image: url("media/button1.png") 0 5;
	-webkit-border-image: url("media/butto1.png") 0 5;
}

jQuery

$('#buttons a, .button a').borderImage('url("media/button0.png") 0 5', 'media/button1.png', 'media/button2.png')

3.Multiple Backgrounds

Sin duda una propiedad que dará mucho juego y que ofrecerá la posibilidad de dejar de ver el &lt;body /&gt; como una pizarra en la que pintamos. Por el momento tenemos que conformarnos con jQuery MultipleBackground.

CSS3

#multiple-background-box {
background: url(top-bg.gif) top left no-repeat,
url(bottom-bg.gif) bottom left no-repeat,
url(middle-bg.gif) left repeat-y;
padding: 20px;
}

jQuery

$(function(){
  $('.marioBox').add_layer("#A4D3FF");
  $('.marioBox').add_layer("url('/images/mario_floor.gif') no-repeat bottom");
  $('.marioBox').add_layer("url('/images/mario_bush.gif') no-repeat 10px 167px");
  $('.marioBox').add_layer("url('/images/mario_pipe.gif') no-repeat 180px 183px");
  $('.marioBox').add_layer("url('/images/mario_cloud.gif') no-repeat 90px 93px");
  $('.marioBox').add_layer("url('/images/mario_cloud.gif') no-repeat 180px 53px");
  $('.marioBox').add_layer("url('/images/mario_cloud.gif') no-repeat 20px 73px");
  $('.marioBox').add_layer("url('/images/goomba.gif') no-repeat 70px 214px");
  $('.marioBox').add_layer("url('/images/mario.gif') no-repeat 180px 156px");
});

4. Box shadow y text-shadow

Se acabó el usar &lt;div /&gt; flotantes colocados debajo de otro para obtener una sombra, con la llegada de CSS3 esto será cosa del pasado… pero por el momento debemos resignarno y usar DropShadow o Text-Shadow para IE para conseguirlo.

CSS3

h3 { text-shadow: 2px 2px 2px #333; }

jQuery

$("h3").dropShadow({left: 2, top: 2, blur: 1, color: "#03f", swap: true});

5.Opacity

La propiedad CSS3 por excelencia, sin duda es la más mediática de todas las propiedades y con la que se han conseguido maravillas como Lightbox. De ahí que jQuery, sea capaz de usarla nativamente. Aunque plugins como Gradient permite más juego.

CSS3

div.L1 { background:#036; opacity:0.2; width:575px; height:20px; }
div.L2 { background:#036; opacity:0.4; width:575px; height:20px; }
div.L3 { background:#036; opacity:0.6; width:575px; height:20px; }
div.L4 { background:#036; opacity:0.8; width:575px; height:20px; }
div.L5 { background:#036; opacity:1.0; width:575px; height:20px; }

jQuery

$('#main').gradient({
		from:	'fefefe',
		to:		'cddcc3',
		direction:	'horizontal'
	});
]]> http://www.spartan-code.com/blog/2009/03/07/tecnicas-css3-que-podemos-conseguir-con-jquery/feed/ 0 Style Switcher con jQuery http://www.spartan-code.com/blog/2009/03/07/style-switcher-con-jquery/ http://www.spartan-code.com/blog/2009/03/07/style-switcher-con-jquery/#comments Sat, 07 Mar 2009 16:08:01 +0000 Pirata21 http://www.spartan-code.com/blog/index.php/style-switcher-con-jquery/ En Kelvinluck.com me he encontrado con una muy sencilla forma de hacer un style swither (o intercambiador de estilos) aprovechando la potencia de selección de jQuery. El ejemplo también utiliza cookies con lo que el estilo elegido por el visitante es almacenado para mostrarselo por defecto la próxima vez que visita la página.La aplicación del ejemplo es muy sencilla. Primero incluimos el fichero de jQuery.

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

Incluimos tanto el estilo que se mostrará la primera vez que el visitante acceda a la página como los estilos alternativos que deseemos.

<link rel="stylesheet" type="text/css" href="Estilos.css" title="Normal" media="screen" />

<link rel="alternate stylesheet" type="text/css" href="EstiloRojo.css" title="Rojo" media="screen" />

<link rel="alternate stylesheet" type="text/css" href="EstiloNegro.css" title="Negro" media="screen" />

Lo importante es asignarle un atributo “title” con un nombre que posteriormente utilizaremos para identificarlo.

Lo siguiente es crear los enlaces, que deben tener la clase “styleswitch” y el atributo “rel” con el nombre que aparece en el “title” del estilo al que vamos a pasar.

<ul>

<li><a href="Ejemplo.html" rel="Normal" class="styleswitch">Estilo 1</a></li>

<li><a href="Ejemplo.html" rel="Rojo" class="styleswitch">Estilo 2</a></li>

<li><a href="Ejemplo.html" rel="Negro" class="styleswitch">Estilo 3</a></li>

</ul>

Ahora tan sólo queda incluir el script de Kelvinluck.com, que se ayuda de un par de funciones de Quirksmode.

<script language="javascript">

/**

* Styleswitch stylesheet switcher built on jQuery

* Under an Attribution, Share Alike License

* By Kelvin Luck ( http://www.kelvinluck.com/ )

**/

(function($){

$(document).ready(function() {

 $('.styleswitch').click(function()

 {

 	switchStylestyle(this.getAttribute("rel"));

 	return false;

 });

 var c = readCookie('style');

 if (c) switchStylestyle(c);

});

function switchStylestyle(styleName) {

 $('link[@rel*=style][title]').each(function(i)

 {

 	this.disabled = true;

 	if (this.getAttribute('title') == styleName) this.disabled = false;

 });

 createCookie('style', styleName, 365);

}

})(jQuery);

// cookie functions http://www.quirksmode.org/js/cookies.html

function createCookie(name,value,days){

 if (days)	{

 	var date = new Date();

 	date.setTime(date.getTime()+(days*24*60*60*1000));

 	var expires = "; expires="+date.toGMTString();

 }

 else var expires = "";

 document.cookie = name+"="+value+expires+"; path=/";

}

function readCookie(name){

 var nameEQ = name + "=";

 var ca = document.cookie.split(';');

 for(var i=0;i < ca.length;i++)

 {

 	var c = ca[i];

 	while (c.charAt(0)==' ') c = c.substring(1,c.length);

 	if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);

 }

 return null;

}

function eraseCookie(name){

 createCookie(name,"",-1);

}

// /cookie functions

</script>

Ya tenemos realizado un intercambiador de estilos que recordará nuestra elección cada vez que carguemos la página.

]]> http://www.spartan-code.com/blog/2009/03/07/style-switcher-con-jquery/feed/ 0 Columnas de igual tamaño con jquery http://www.spartan-code.com/blog/2009/02/10/columnas-de-igual-tamano-con-jquery/ http://www.spartan-code.com/blog/2009/02/10/columnas-de-igual-tamano-con-jquery/#comments Tue, 10 Feb 2009 19:57:52 +0000 Pirata21 http://www.spartan-code.com/blog/?p=22 En cssnewbie me he encontrado una función para obtener columnas de igual tamaño. Cuando trabajamos con CSS, a veces puede resultar frustrande obtener columnas de igual tamaño. Un ejemplo de aplicación de la función sería:

1.- Supongamos que tenemos una estructura típica de HTML similar a ésta:

<div id="contenedor">
     <div id="navegacion">Lo que sea 1</div>
     <div id="contenido">Lo que sea 2</div>
</div>

Para que, independientemente del contenido que haya tanto en “navegacion” como en “contenido”, las dos columnas tengan la misma altura deberíamos…

2.- Añadir una clase a las columnas que tengan la misma altura.

<div id="contenedor">
     <div id="navegacion" class="columnas">Lo que sea 1</div>
     <div id="contenido" class="columnas">Lo que sea 2</div>
</div>

3.- Añadir tanto la librería como la función “equalHeight”creada en cssnewbie y la llamada a dicha función especificando los elementos que deseamos igualar en altura. En nuestro caso los dos div con la clase “columnas”.

<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script language="javascript">
function equalHeight(group) {
    tallest = 0;
    group.each(function() {
        thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}
$(document).ready(function() {
    equalHeight($(".columnas"));
});
</script>

Más información en “Equal Height Columns with jQuery”

]]> http://www.spartan-code.com/blog/2009/02/10/columnas-de-igual-tamano-con-jquery/feed/ 0 Pop Up con Jquery http://www.spartan-code.com/blog/2009/02/10/pop-up-con-jquery/ http://www.spartan-code.com/blog/2009/02/10/pop-up-con-jquery/#comments Tue, 10 Feb 2009 19:52:29 +0000 Pirata21 http://www.spartan-code.com/blog/?p=21 Abrir ventanas en pop-up es una práctica desaconsejada y en la actualidad, con la irrupción de los métodos para abrir ventanas modales, en muchos casos no es necesario. Eso es la teoría. En la práctica hay veces que necesitamos abrir un pop-up. A continuación un método para abrir pop-ups con jQuery. Todo enlace que tenga rel=”pop-up” se abrirá en ventana emergente.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script language="javascript">
$( document ).ready( function() {
	$("a[rel='pop-up']").click(function () {
      	var caracteristicas = "height=700,width=800,scrollTo,resizable=1,scrollbars=1,location=0";
      	nueva=window.open(this.href, 'Popup', caracteristicas);
      	return false;
 });
});
</script>
</head>
<body>
<p><a href="ventana.html" rel="pop-up">ABRIR POP UP</a></p>
</body>
</html>
]]> http://www.spartan-code.com/blog/2009/02/10/pop-up-con-jquery/feed/ 1 Efecto “Nudging” con jQuery http://www.spartan-code.com/blog/2009/01/03/efecto-nudging-con-jquery/ http://www.spartan-code.com/blog/2009/01/03/efecto-nudging-con-jquery/#comments Sat, 03 Jan 2009 22:55:51 +0000 Pirata21 http://www.spartan-code.com/blog/?p=14 En el blog de Intenta nos muestran como lograr un interesante efecto con jQuery para nuestros menús. Al posar el ratón sobre una opción de menú ésta se desplaza hacia la derecha con una animación. Es un efecto denominado “nudging”, que se podría traducir como dar con el codo al enlace.

Ejemplo Link Nudging

Para realizar el efecto, lo primero que tendríamos que hacer es enlazar en nuestro documento con la librería de jQuery.

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

Seguidamente construimos un menú al que deberemos añadir la clase “nudge” a cada uno de los enlaces:

<ul><li><a href="#" class="nudge">home</a></li><li><a href="#" class="nudge">acerca de nosotros </a></li>

<li><a href="#" class="nudge">servicios</a></li>

<li><a href="#" class="nudge">productos</a></li>

<li><a href="#" class="nudge">contacta con nosotros</a></li>

</ul>

Ahora tan sólo queda animar la propiedad “padding-left” tanto cuando estamos sobre una opción y cuando salimos de ella:

$(document).ready(function() { $('a.nudge').hover(function() { //mouse in$(this).animate({ paddingLeft: '35px' }, 400);

}, function() { //mouse out

$(this).animate({ paddingLeft: '15px' }, 400);

});

});

Yo he establecido un valor inicial de “padding-left” de 15 px y que es el valor al que ha de retornar la opción de menú al evento “mouse-out”. Cuando se está sobre la opción ésta se desplaza hasta un valor de 35 px. Para ambas acciones la velocidad es de 400 milisegundos. Lógicamente todas estos valores son modificables y se deberán ajustar a las pretensiones de cada uno.

Para mostrar un ejemplo un poco más completo. He realizado tres menús, ya con CSS, que incorporan el efecto.

Ejemplo 1:

Ejemplo 1 Demostracion
Descarga

Ejemplo 2:

Ejemplo 1 Demostracion
Descarga

Ejemplo 3:

Ejemplo 1 Demostracion
Descarga
]]> http://www.spartan-code.com/blog/2009/01/03/efecto-nudging-con-jquery/feed/ 0