WillxD » JavaScript

Miniaturas con jQuery

WillxD — Tue, 04 Aug 2009 05:32:10 +0000

Gracias a jQuery podemos crear grandiosos efectos sin la necesidad de utilizar tanto código. Esta vez les explicaré un efecto de "miniaturas" usando CSS y jQuery. El cual lo podemos usar en distintos proyectos como en galerías de imágenes y otro que se les ocurra (ya depende de su imaginación).

1) XHTML

Comenzamos creando la base para aplicar el efecto de miniaturas. Solo creamos una simple lista, con algunas imágenes.

<ul class="mini"> 
	<li><img src="mini1.jpg" alt="" /></li> 
	<li><img src="mini2.jpg" alt="" /></li> 
	<li><img src="mini3.jpg" alt="" /></li> 
	<li><img src="mini4.jpg" alt="" /></li> 
	<li><img src="mini5.jpg" alt="" /></li> 
	<li><img src="mini6.jpg" alt="" /></li> 
</ul>

2) CSS

Una vez que acabamos con la base, pasamos a aplicarle los estilos. Debemos enfocarnos en la posición de las imágenes y de las listas, ya que estas serán la base para aplicarle los efectos con jQuery.

ul.mini {
	height:140px; width:840px; /* Definimos el Tamaño de nuestra lista */
	margin:10px; /* mantener espaciado de los demás elementos de tu web */
	padding:30px; /* para no tener problema al momento de agrandar la imagen de la miniatura */
	list-style: none; /* Importante! para que no salgan los estilos de las listas */
}
ul.mini li {
	margin: 5px;
	float: left;/* alineación de la lista */
	position: relative; /* importante para aplicar el centrado vertical */
	width: 130px;height: 130px; /* Definimos el tamaño de las miniaturas de la lista */
}
ul.mini li img {
	width: 120px; height: 120px; /* tamaño las imagenes en miniatura */
	border: 1px solid #ccc; /* borde de las imágenes */
	padding: 5px; /* teníamos 120px de Ancho/Alto + 10px Ancho/Alto(padding) da los 130px del tamaño de la lista*/
	background: #f0f0f0;
	position: absolute;/* importante definir la posición absoluta */
	left: 0; top: 0;/* posición por defecto */
	-ms-interpolation-mode: bicubic; /* hack IE para la la escala bicúbica */
}
ul.mini li img.hover {
	background:url(miniatura.png) no-repeat center center; /* Un PNG de fondo que le da un efecto de sombra */
	border: none;
}

3) jQuery

El efecto se basa principalmente en cambiar la posición y aumentar el tamaño de la lista a un tamaño mayor (de preferencia al tamaño de la imágen), pues así cuando pasamos encima de las imágenes, éstas se agrandarán según el tiempo que le apliquemos en el código de jQuery.

$("ul.mini li").hover(function() {
	$(this).css({'z-index' : '10'}); // aumentamos el z-index para que quede encima de los demás elementos
	$(this).find('img').addClass("hover").stop()
		.animate({
			marginTop: '-110px', marginLeft: '-110px', // centramos los thumbnail verticalmente
			top: '50%', left: '50%', // Posicionamos a la mitad
			width: '180px', height: '180px',  padding: '20px' // EL tamaño del thumbnail
		}, 400);// Tiempo que demora en hacer el efecto
 
	// Regresando a su posición inicial
	} , function() {
	$(this).css({'z-index' : '0'});// regresamos el z-index a cero
	$(this).find('img').removeClass("hover").stop()
		.animate({
			marginTop: '0', marginLeft: '0',// Posición incial
			top: '0', left: '0', 
			width: '120px', height: '120px', padding: '5px' // Tamaño inicial de la miniatura
		}, 400);// Tiempo que demora en hacer el efecto
});

Demo - Miniaturas con jQuery

Menu Desplegable jQuery (I)

WillxD — Fri, 29 May 2009 13:26:35 +0000

jQuery es una grandiosa librería JavaScript con la cual podemos hacer infinidad de cosas.

Veamos como hacer un Menú desplegable con jQuery en tan solo 5 líneas de código:

Primero debemos tener un fichero HTML con la siguiente estructura:

<div id="menu1">
	<h1>Articulos</h1>
	<ul>
		<li><a href="#">Noticias</a></li>
		<li><a href="#">Tecnologia</a></li>
		<li><a href="#">Wordpress</a></li>
	</ul>
	<h1>Recursos</h1>
	<ul>
		<li><a href="#">Brushes</a></li>
		<li><a href="#">Pattern</a></li>
		<li><a href="#">Texturas</a></li>
		<li><a href="#">Vectores</a></li>
	</ul>
	<h1>Tutoriales</h1>
	<ul>
		<li><a href="#">CSS</a>
		<li><a href="#">Java</a></li>
		<li><a href="#">Javascript</a></li>
	</ul>
</div>

En el CSS:

#menu1{
	width:200px;
	margin:auto;
	margin-top:100px;
}
 
#menu1 h1{
	color:#b66737;
}
 
#menu1 ul{
	display:none; /* Importante! esto hace que las listas esten ocultas */
}
 
#menu1 a{
	color:#b66737;
	font-size:12px;
}

Y ahora las 5 líneas de código que harán un sencillo pero grandioso menú desplegable:

  $(document).ready(function(){
		$("#menu1 h1").mouseover(function(){
			$(this).next("#menu1 ul").slideDown(500).siblings("#menu1 ul").slideUp("slow");
		});
	});

Demo:Menu Desplegable jQuery (I)
Enlace:Descargar Menu Desplegable jQuery (I)

Ultimo Tweet con jQuery

WillxD — Thu, 21 May 2009 22:44:57 +0000

Con la utilidad de la API de Twitter, que es un excelente servicio de microblogging, podemos crear nuestras propias aplicaciones.
Veamos como con la ayuda de la jQuery y la función "$. GetJSON" poder mostrar en nuestra web el último "Tweet" enviado desde nuestro twitter.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="relative_time.js"></script>
 
<script type="text/javascript">
$(document).ready(function() {
var tutwitter = "willxd";
	$.getJSON("http://twitter.com/statuses/user_timeline/"+ tutwitter +".json?count=1&callback=?", function(json){
 		var lastTweet = json[0].text;
		var tweetTime = json[0].created_at;
		var tweetTime = relative_time(json[0].created_at);
		$("#twittexto").html(lastTweet);
		$("#twittiempo").html(tweetTime);
	});
});
 
</script>

Ahora lo que debemos hacer es cambiar en la variable "tutwitter" a tu cuenta de Twitter. Y crear en tu web los siguientes "divs"

<div id="twittexto"></div> // Texto del tweet
<div id="twittiempo"></div> // Hace cuanto escribiste el tweet

Demo: Ultimo Tweet con jQuery
Enlace: Descargar Ultimo Tweet con jQuery

Ocultar Link con jQuery

WillxD — Tue, 31 Mar 2009 00:29:45 +0000

Con jQuery podemos ocultar un vínculo dentro de otro vínculo con tan solo algunos pasos.

En realidad lo que hace es que si hacemos 1 click nos envía al primer link, pero si damos doble click sobre el enlace, este nos muestra el enlace oculto.

Veamos, primero creamos un enlace normal:

<a href="http://google.com">Búscalo en Google</a>

Ahora le asignamos un ID para nuestro código jQuery.

<a id="linkoculto" href="http://google.com">Búscalo en Google</a>

Ahora usaremos jQuery, lo que hace el siguiente código es que se retrase medio segundo en rederigir al enlace, para tener tiempo suficiente para dar doble click:

$("a#linkoculto").click(function(){
  var timeout = setTimeout(function() {
    location.href=$("a#linkoculto").attr("href");
  }, 500);
  return false;
});

Ahora lo que haremos será definir el link oculto, al cual redireccionará siempre y cuando demos doble click.

$("a#linkoculto").dblclick(function(){
  location.href="http://youtube.com";
});

Corregir CSS en Internet Explorer

WillxD — Mon, 30 Mar 2009 01:47:36 +0000

IE7.js es una librería Javascript que permite hacer que tanto Internet Explorer 5 como Internet Explorer 6 sean compatible con los estándares, lo que hace es corregir los problemas de selectores de CSS y corrigiendo los PNG transparentes.

Entre los puntos que corrige esta librería tenemos:

HTML

PNGs transparentes
Doble margen
Contenido sin scroll

Selectores CSS

parent > child
:hover
:active
:first-child
[attr]
[attr="value"]
[attr*="value"]

CSS

Soporta hojas de estilo importadas.
Preserva la cascada de la hoja de estilo.
background-image
overflow:visible
cursor
position
display
max-height
max-width
min-height
min-width

Utilizando la Libreria IE7

Para utilizar esta excelente librería lo que debemos hacer es colocar el siguiente código dentro del header de nuestra página.

Y listo ahora nuestra web se visualizará correctamente tanto en IE6 como en IE5 .

Podemos descargar la librería desde acá

También esta disponible la versión de compatibilidad para el nuevo IE8, solo debemos colocar el código siguiente:

Esquinas redondeadas con jQuery

WillxD — Wed, 04 Feb 2009 21:25:22 +0000

jQuery Corners es un plugin que nos permite crear esquinas redondeadas de una manera muy fácil, sin necesidad de imágenes o de estar maquetando |-) . Simplemente definimos una clase y se aplica a un elemento HTML.

Primero necesitas descargar jQuery y jQuery corners.

Luego en el HTML hacemos el llamado de los "js" dentro de las etiquetas "head"

1 2	<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.corner.js"></script>

Luego definimos la clase que creara las esquinas redondeadas:

1
2
3

<script>$(document).ready( function(){
  $('.redondeados').corners();
});script>

Ahora lo aplicamos a la etiqueta DIV:

1
2
3

<div class="redondeados">
	El contenedor con las esquinas redondeadas.
</div>

Bueno esa es solo la aplicación más simple, pero puedes configurarlo a tus medidas =P , más información en su sitio oficial.

Detectar navegador con JavaScript

WillxD — Sat, 24 Jan 2009 04:49:00 +0000

Despúes de días sin postear nada por varios motivos U.u les traigo este código JavaScript que encontré y me fue de gran ayuda.

Hay veces tenemos la necesidad de saber cual es el navegador que está usando el usuario para poder mostrar su respectivo estilo o correcciones que pudiera haber con los diferentes navegadores (sobre todo IE 6 xD).

Acá les dejo las condicionales que les ayudarán que tipo de navegador está usando el usuario, ya es solo su trabajo adaptarla a sus necesidades.

//Detectando si es Safari
var is_safari = navigator.userAgent.toLowerCase().indexOf('safari/') > -1;  
if (is_safari ) alert('Su navegador es Safari');
 
//Detectando si es Chrome
var is_chrome= navigator.userAgent.toLowerCase().indexOf('chrome/') > -1;  
if (is_chrome) alert('Su navegador es Google Chrome');
 
//Detectando si es Firefox
var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox/') > -1;  
if (is_firefox ) alert('Su navegador es Firefox');
 
//Detectando Cualquier version de IE
if ('\v'=='v') alert('Su navegador es Internet Explorer !');
 
//Detectando si es IE6
var is_ie6 = (window.external && typeof window.XMLHttpRequest == "undefined");  
if (is_ie6 ) alert('Su navegador es Internet Explorer 6');