Puente Cromático » javascript

Interruptor para cambiar el tamaño de fuente con jQuery

Ezequiel M. — Wed, 20 Jan 2010 19:45:44 +0000

En este tutorial usaremos jQuery para crear un pequeño script que cambie el tamaño de la fuente al presionar un botón. Vamos a crear una sencilla interfaz con 3 botones, un texto y un poco de jQuery, uno de los frameworks javascript mas fáciles de usar.

La estructura xHtml y CSS

Antes que nada, debes establecer la llamada al archivo CSS y JS en el head del documento, para este ejemplo uso la versión 1.3.2 de jQuery.

En el “Body” tenemos el div “Botones” que contiene en su interior tres divs llamados “Boton” que alternarán el tamaño de la tipografía del texto cada vez que se haga click sobre ellos. Como podrás ver “Texto grande” y “Texto chico” tienen unas ID que se llaman “aumentar” y “disminuir”, esas ID son las que vamos a usar en el script para determinar cuando cambiar el tamaño tipográfico usando el condicional If/Else.

En el CSS, debemos especificar un tamaño de fuente para el “Body” que será el “Texto normal” y también crear las clases “grande” y “chica” con sus respectivos font-size.


Texto Grande
Texto Normal
Texto Chico


Titulo del texto

In tempus lacus justo. Ut varius sagittis odio, et pretium metus mattis
at. Vivamus eleifend convallis nunc non scelerisque. Nulla tincidunt neque sed tortor
venenatis viverra. Nulla adipiscing rhoncus elit, fermentum cursus nisi ornare sit amet.
 Nunc sit amet neque ut lacus adipiscing gravida vel sit amet ante.
In tempus lacus justo. Ut varius sagittis odio, et pretium metus mattis at.
Vivamus eleifend
convallis nunc non scelerisque. Nulla tincidunt neque sed tortor venenatis viverra.
Nulla adipiscing rhoncus elit, fermentum cursus nisi ornare sit amet. Nunc sit amet
neque ut lacus adipiscing gravida vel sit amet ante.

body{
font-size:12px;
background-color:#FFFAE6;
font-family:Arial, Helvetica, sans-serif;
}
#cuadro{
border:1px solid #CCCCCC;
width:700px;
}
/*Botones*/
#botones{
border:1px solid #CCCCCC;
padding:10px;
float:left;
margin-bottom:10px;
margin-right:30px;
}
.boton{
border:1px solid #FFFFCC;
background-color:#003366;
color:#FFFFFF;
font-size:14px;
float:left;
margin-right:10px;
padding:6px;
}
/*Tamaños de tipografías*/
.grande{
font-size:16px;
}
.chica{
font-size:9px;
}
/*Efecto de boton activo y hover*/
.seleccion{
font-weight:800;
}
.sobre{
background-color:#CC0000;
cursor:pointer;
}

El Script jQuery

El script en si es muy sencillo de entender, lo único que hace es agregar y quitar las clases “grande” y “chica” que están activas sobre el “Body”.

$(document).ready(function(){
$('#botones .boton').click(function(){ /*al hacer click en un botón*/
$('body').removeClass();    /*borre todas las clases*/
if(this.id == 'aumentar'){   /*si la clase botón tiene el ID aumentar*/
	$('body').addClass('grande');  /*cargue desde el CSS la clase grande*/
	}
else if(this.id == 'disminuir'){ /*si el ID es disminuir*/
	$('body').addClass('chica'); /*cargue la clase chica*/
}
$('#botones .boton').removeClass('seleccion'); /*elimine la negrita del boton*/
    $(this).addClass('seleccion');/*agregue la negrita al botón activo*/
 });
});

/*EFECTO HOVER*/
$(document).ready(function() {
  $('#botones .boton').hover(function() {
    $(this).addClass('sobre'); /*agregue efecto hover*/
  }, function() {
    $(this).removeClass('sobre');  /*quite efecto hover*/
  });
});

Resultado

En el siguiente enlace esta el ejemplo funcional del script. Con un poco de astucia se lo puede mejorar agregando botones y combinándolo con nuevas ideas.

Ver el ejemplo

Recursos complementarios

Descarga el framework jQuery

Además de poder descargar el framework, el sitio oficial tiene infinidad de recursos y tutoriales interesantes.

Ordena tus hojas de estilos

Stylenet es una herramienta online que ordena hojas de estilos CSS.

Zoom en imágenes con ImgBox

Ezequiel M. — Thu, 12 Nov 2009 16:15:42 +0000

ImgBox es un pluguin jQuery que añade a tus imágenes un suave efecto de zoom al ser maximizadas. Un pluguin fácil de usar y muy customizable.

Una de las ventajas de ImgBox es que al hacer click sobre una miniatura el script simula un popup y no es bloqueado por los anti-popups de los navegadores. Otra de las ventajas es que se puede abrir muchas imágenes a la vez, es liviano y funciona con IE6.

Su funcionamiento es sencillo, después de definir el Doctype y la llamada a los Scripts y archivos CSS en el header, debemos crear una clase o un ID para los enlaces de las miniaturas, en este caso usamos una clase con el nombre zoom.

Luego hay que llamar al enlace que tiene la clase zoom a través del siguiente script, y añadirle la función imgbox en la que se definen las propiedades a gusto.

En la pagina del autor se puede descargar el pluguin comprimido en un archivo .ZIP*, en el se incluye un ejemplo funcional mas detallado y listo para usar.

DEMO
Descargar ImgBox

Post Aleatorios con Newsticker en Wordpress

Ezequiel M. — Sun, 28 Jun 2009 04:46:57 +0000

Newsticker fue recomendado hace un tiempo por Xiberneticos, un script JQuery que permite crear cajas animadas con noticias breves, esto desencadeno este post donde voy a fusionar Newsticker con Wordpress.

El efecto logrado es similar al que se puede ver en los post aleatorios de la sidebar del theme actual de Puente Cromático. A continuación vamos a crear los archivos newsticker.php, newsticker.css, newsticker.js, vamos a agregar algunas funciones a functions.php y descargaremos el framework jQuery.

Configurando el Header

En el header necesitamos poner los enlaces a los archivos .js, .css y una función llamada jQuery.noConclict() que se encarga de evitar el conflicto con los otros scripts jQuery que usa Wordpress.

newsticker.php

Hacemos una consulta a la base de datos y obtenemos los Post del blog en orden aleatorio (orderby=rand), los artículos pasan al bucle While mostrando los resultados a traves de las funciones de Wordpress. Para mostrar los Thumbnail implemente un script creado por Metacortex, el cual toma las imágenes directamente de la BD sin necesidad de estar cargándolas con un campo personalizado.



have_posts()) : $my_query->the_post();?>
	
    
	
	Categoría:

newsticker.css

Basicamente es el CSS que trae Newsticker, solo modifique el tamaño de las imagenes.

body{
	font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
}
#listticker{
	height:200px;
	width:400px;
	overflow:hidden;
	border:solid 1px #DEDEDE;
	padding:6px 10px 14px 10px;;
}
#listticker li{
	border:0; margin:0; padding:0; list-style:none;
}

#listticker li{
	height:60px;
	padding:5px;
	list-style:none;
}
#listticker a{
	color:#000000;
	margin-bottom:
}
#listticker .news-title{
	display:block;
	font-weight:bold;
	margin-bottom:4px;
	font-size:11px;
}
#listticker .news-text{
	display:block;
	font-size:11px;
	color:#666666;
}
#listticker img{
	float:left;
	margin-right:14px;
	padding:4px;
	border:solid 1px #DEDEDE;
	width:50px;
	height:50px;
}

newsticker.js

Para que el script no genere conflictos en wordpress, hay que modificar el identificador “$” agregandole un nombre único, en este caso le puse $e. Esta variable se define en la primera linea con el valor de jQuery.noConflict();.

var $e = jQuery.noConflict();
$e(document).ready(function(){

	var first = 0;
	var speed = 700;
	var pause = 3500;

		function removeFirst(){
			first = $e('ul#listticker li:first').html();
			$e('ul#listticker li:first')
			.animate({opacity: 0}, speed)
			.fadeOut('slow', function() {$e(this).remove();});
			addLast(first);
		}

		function addLast(first){
			last = ''+first+'';
			$e('ul#listticker').append(last)
			$e('ul#listticker li:last')
			.animate({opacity: 1}, speed)
			.fadeIn('slow')
		}

	interval = setInterval(removeFirst, pause);

});

El archivo jQuery y la modificación de functions.php

Hay que agregar estas lineas de código al principio del archivo functions.php para poder llamar las imágenes automaticamente. Este script puede devolverlas en 3 tamaños, en este caso vamos a usar “mini” para tomar las miniaturas creadas por Wordpress. No es necesario cambiar la configuración de las mismas desde el panel del blog, ya que en newsticker.css les puse dimensiones fijas.

 get_the_ID(),
          'post_type'      => 'attachment',
          'numberposts'    => 1,
          'post_mime_type' => 'image'
         )));
        {
          if(!empty($images)) { //Solo añadí esta línea
              foreach( $images as $image ) {
                if($tamano == 'mini') {
                $imagen = wp_get_attachment_image( $image->ID, 'thumbnail' );
                } if($tamano == 'medio') {
                $imagen = wp_get_attachment_image( $image->ID, 'medium' );
                } if($tamano == 'grande') {
                $imagen = wp_get_attachment_image( $image->ID, 'full' );
                }
                echo $imagen;
              }
          } // y su respectivo cierre
        }
      }
?>

Por ultimo se necesita el archivo jQuery que se puede descargar desde este enlace. Al ser un archivo .txt, se debe remplazar la extensión a .js o copiamos el texto y creamos el archivo .js con cualquier editor web.

Colocamos jquery-1.3.2.js y newsticker.js dentro de la carpeta js del theme, si no existe hay que crearla. Los archivos newsticker.php y newsticker.css van en la raiz del theme donde se encuentra functions.php, index.php, sidebar…

Llamando a Newsticker desde el Theme

Para ver a Newsticker en cualquier parte del blog, hay que usar la función include con la ruta a newsticker.php.

Nota:
Los archivos aleatorios se dejan de visualizar una ves que se termina el While. Esto no es un problema para los blogs que tienen muchos post. Seria muy bueno si alguien puede colaborar con un poco de código, este script puede ser muy útil para todos los bloggers.

23 Menús desplegables gratuitos

Ezequiel M. — Tue, 19 May 2009 04:12:54 +0000

Menu css

Javascript.. CSS… Ajax.. hay tantas formas de crear menúes desplegables, pero no es una tarea nada sencilla, sobre todo porque hay que tener en cuenta las compatibilidades con los navegadores.

Por eso, tener un menu desplegable css gratis al alcance es como ahorrar un dia de trabajo. Con 23 alternativas a mano, además de aprender el desarrollo web, se optimiza. Estos menús desplegables css son muy atractivos y customizables, funcionan a la perfección en todos los navegadores y la mayoría usan jQuery.

jQuery Multi Level CSS Menu #1

Con un toque de jQuery y mucho css, este menu de sencillo diseño muestra su poder con un efecto de Fade.

jQuery Multi Level CSS Menu #1

jQuery Multi Level CSS Menu #2

Menu css

Un bonito Slide que se abre y contrae automáticamente al pasar el el puntero por alguno de los enlaces..

jQuery Multi Level CSS Menu #2

All Levels Navigation Menu

Menu multinivel css

Menú multi nivel vertical muy logrado con efecto fade muy customizable, podes modificar el tiempo de delay y otros parámetros.

Puente Cromático » javascript

Interruptor para cambiar el tamaño de fuente con jQuery

Titulo del texto

Zoom en imágenes con ImgBox

Post Aleatorios con Newsticker en Wordpress

23 Menús desplegables gratuitos

Organiza tu código HTML, CSS y Javascript