Este script lo he creado por la necesidad de hacer “bonitos” los input del tipo submit, ya que por ahora, todos son de sistema y cada navegador pone el suyo, pues bien, con el script jquey.submitCSS.js podemos hacer botones pero con input del tipo submit. En ejemplo que os muestro más a bajo he jugado con capas para modificar vía CSS las imágenes de fondo, lo he hecho para tener más de un botón de otro color de fondo. Si queréis poner vuestras própias imágenes tendréis que jugar con los estilos.

El script es el siguiente:

/*
 * jQuery submitCSS v1.0
 * http://dixso.net/
 *
 * Copyright (c) 2010 Julio De La Calle Palanques
 * Date: 2010-02-04 12:34:00 - (Jueves, 04 Feb 2010)
 *
 */
function submitCSS(){
	$("input[type=submit]").each(function(){
		if($(this).hasClass("submitCSS")){
			var theclass = $(this).parent().parent("div").attr("class");
			if(theclass != "btnSubmitCSS"){
				$(this).wrap("<div class='btnSubmitCSS'><div></div></div>");
			}
		}
	});
	isIE = !$.support.opacity,
	isIE6 = isIE && !window.XMLHttpRequest
	if (isIE6) {
		$(".btnSubmitCSS").mouseover(function() {
			$(this).addClass("btnSubmitCSS-ie6");
		}).mouseout(function() {
			$(this).removeClass("btnSubmitCSS-ie6");
		});
	}
}

El script necesita una hoja de estilos para añadir estilos al input:

/**************************************************************************
submitCSS 20100204@JCP
***************************************************************************/
#btn-1 .btnSubmitCSS					{background:url(../imagenes/btn-left-gris.gif) no-repeat 0 0;}
#btn-1 .btnSubmitCSS div				{background:url(../imagenes/btn-right-gris.gif) no-repeat right top;}
#btn-2 .btnSubmitCSS					{background:url(../imagenes/btn-left-amarillo.gif) no-repeat 0 0;}
#btn-2 .btnSubmitCSS div				{background:url(../imagenes/btn-right-amarillo.gif) no-repeat right top;}
#btn-3 .btnSubmitCSS					{background:url(../imagenes/btn-left-rojo.gif) no-repeat 0 0;}
#btn-3 .btnSubmitCSS div				{background:url(../imagenes/btn-right-rojo.gif) no-repeat right top;}
.btnSubmitCSS							{padding-left:12px;}
.btnSubmitCSS div						{padding-right:18px; padding-left:6px;}
.btnSubmitCSS, .btnSubmitCSS div		{height:32px; float:left; display:block; line-height:28px; text-decoration:none; color:#FFF; cursor:pointer; font-weight:bold;}
.btnSubmitCSS div input 				{background:none; color:#FFF; border:none; width:auto; float:left; height:32px; padding:0; font-family:Verdana, Geneva, sans-serif; display:block; font-size:11px; cursor:pointer; font-weight:bold; margin:-3px 0 0 0;}
#container .btnSubmitCSS-active,
#container .btnSubmitCSS:hover			{background-position:bottom left;}
#container .btnSubmitCSS-active div,
#container .btnSubmitCSS:hover div	 	{background-position:bottom right;}

Para que el script funcione tenéis que añadir la clase ’submitCSS’ al input submit.

<input type="submit" class="submitCSS" value="Esto es un boton submit" />

Para finalizar, tenéis que inicializar el script:

<script language="javascript" type="text/javascript">
	$(document).ready(function(){
		submitCSS();
	});
</script>

Este script funciona para todos los navegadores, lo único a tener en cuenta es que cada navegador interpreta una tipografía diferente al igual que el tamaño, por lo demás todo perfecto.

Ejemplo: aquí.
Descarga: aquí.

Con este pequeño script podemos igualar la altura de los elementos que queramos:

function equalHeight(group) {
    tallest = 0;
    group.each(function() {
        thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}

Inicializamos el script y le indicamos la clase que tendrán los elementos:

$(document).ready(function(){
	//Igualamos la altura de los elementos
	equalHeight($(".igualarAltura"));
});

Podéis ver un simple ejemplo: aquí.

Este script nos ayudará cuando maquetemos nuestras hojas de estilos y veamos que cada navegador interpretan cosas que no deberían ser así, muy común en IE, sobretodo en la versión 6.

Antes de nada, se necesita la librería jQuery para hacer funcionar el script.

¿Qué hace el script?
- Comprueba primero si el fichero de las css de cada navegador existe, si no existe, el script no se ejecuta, eto sirve para que el script no compruebe el navegador ni la versión del usuario.

¿Que ganamos con todo esto?
Rapidez en la ejecución del script, es decir, solo añadirá la hoja de estilos que tengamos en el directorio /css/browsers/.

- Detecta el navegador Internet Explorer 8.0

Script para comprobar rutas de ficheros físicos:

function file_exists (url) {
    var req = this.window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
    if (!req) {throw new Error('XMLHttpRequest not supported');}
    req.open('HEAD', url, false);
    req.send(null);
    if (req.status == 200){
        return true;
    }
    return false;
}

Especificamos a jQuery los navegadores (Útil para diferenciar Safari de Chrome).

var userAgent = navigator.userAgent.toLowerCase();
jQuery.browser = {
	version: (userAgent.match( /.+(?:rv|it|ra|ie|me)[\/: ]([\d.]+)/ ) || [])[1],
	chrome: /chrome/.test( userAgent ),
	safari: /webkit/.test( userAgent ) && !/chrome/.test( userAgent ),
	opera: /opera/.test( userAgent ),
	msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
	mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
};

Ejecutamos las condiciones si el fichero existe o no, si existe, comprobamos la versión del navagador del usuario y añadimos la hoja de estilos.

//Ejecutamos las condiciones si el fichero existe o no.
$(document).ready(function(){
	jQuery.each(jQuery.browser, function(i, val) {
		if(file_exists("css/browsers/ie8.css") ){
			if(i=="msie" && jQuery.browser.version.substr(0,3)=="8.0"){
				$('head').append('<link rel="stylesheet" href="css/browsers/ie8.css" type="text/css" />');
			}
		}
		if (file_exists("css/browsers/ie7.css")){
			if(i=="msie" && jQuery.browser.version.substr(0,3)=="7.0"){
				$('head').append('<link rel="stylesheet" href="css/browsers/ie7.css" type="text/css" />');
			}
		}
		if (file_exists("css/browsers/ie6.css")){
			if(i=="msie" && jQuery.browser.version.substr(0,3)=="6.0"){
				$('head').append('<link rel="stylesheet" href="css/browsers/ie6.css" type="text/css" />');
			}
		}
		if (file_exists("css/browsers/mozilla.css")){
			if($.browser.mozilla){
				$('head').append('<link rel="stylesheet" href="css/browsers/mozilla.css" type="text/css" />');
			}
		}
		if (file_exists("css/browsers/opera.css")){
			if($.browser.opera){
				$('head').append('<link rel="stylesheet" href="css/browsers/opera.css" type="text/css" />');
			}
		}
		if (file_exists("css/browsers/safari.css")){
			if($.browser.safari){
				$('head').append('<link rel="stylesheet" href="css/browsers/safari.css" type="text/css" />');
			}
		}
		if (file_exists("css/browsers/chrome.css")){
			if($.browser.chrome){
				$('head').append('<link rel="stylesheet" href="css/browsers/chrome.css" type="text/css" />');
			}
		}
	});
});

Hojas de estilos predefinidas en el script:
Internet Explorer 8.0 – ie8.css
Internet Explorer 7.0 – ie7.css
Internet Explorer 6.0 – ie6.css
Mozilla Firefox – mozilla.css
Chrome – chrome.css
Opera – opera.css
Safari – safari.css

Nota:
- Navegadores que soporta: IE8, IE7, IE6, Mozilla Firefox, Safari, Opera, Google Chrome
- El script comprobará los ficheros en el directorio ‘css/browsers/nombre_del_navegador.css’.

Podéis ver el ejemplo aquí.
Descargar script: aquí.

Con este pequeño script podremos ocultar el email contra los spammers.

$(function() {
	$('a.email').each(function(){
		e = this.rel.replace('(arroba)','@'); //Remplaza el texto '(arroba)' por '@'.
		this.href = 'mailto:' + e;
		$(this).text(e);
	});
});

Añadimos la clase al tag href y substituimos el ‘@’ por el que queramos, en este caso ‘(arroba)’.
Ejemplo: aquí.

Este post es la segunda parte del primer post, ya que se ha mejorado el script.

Mejoras implementadas:
- El script añade automáticamente las capas, no hace falta insertar el código en cada página.
- Se carga el contenido por Ajax.
- Podemos pasarle parámetros de anchura de la capa.

//Variable que almacena la posición del scroll, por defecto tiene valor 0.
scrollCachePosition = 0;
function popupCssShow (URL, width, height) { //Parámetros: URL (URL, Anchura de la capa, Altura de la capa)
	if (typeof document.body.style.maxHeight === "undefined") {//Añade la propiedad maxHeight para IE6.
		$("body","html").css({height: "100%", width: "100%"});
	}
	//La capa 'cssBackground' ocupa toda la pantalla para darle una opacidad.
	//La capa 'cssPopupContainer' es la capa madre del PopUp.
	if (!$("#cssBackground").length>0) {
		$("body").append("<div id=\"cssBackground\"></div><div id=\"cssPopupContainer\"><div id=\"cssPopup\"></div></div>"); //Añade las capas en la página.
	}
	if (width!=undefined) {
		$("#cssPopup").css("width",width);
	}
	if (height!=undefined) {
		$("#cssPopup").css("height",height);
		$("#cssPopup").css("overflow","auto");
	}
	$("#cssBackground").slideDown("slow"); //Efecto jQuery
	scrollCachePosition = $(window).scrollTop();
	window.top.scroll(0,0);
	$("#cssPopup").load(URL,function(){
		//$("#cssPopupContainer").center(); //Si activamos esta línea y desactivamos la de abajo nos centrará el PopUp en el medio de la pantalla.
		$("#cssPopupContainer").css("top",50);
		ancho=$(window).width();
		$("#cssPopupContainer").slideDown("fast", function () {
			anchopopup=$("#cssPopup").width();
			$("#cssPopupContainer").css("width",ancho);
		});
	});
}

function popupCssHide () {
	$("#cssPopupContainer").slideUp("fast", function () {
		$("#cssBackground").fadeOut("fast",function () {
			$("#cssBackground").remove(); //Elimina la capa 'cssBackground'.
			$("#cssPopupContainer").remove(); //Elimina la capa 'cssPopupContainer'.
		});
	});
	if (scrollCachePosition > 0) {
		window.top.scroll(0,scrollCachePosition); //Vuelve a la posición donde estaba el scroll.
		//Reseteamos la variable scrollCachePosition a 0 para poder ejecutar el script tantas veces como sea necesario.
		scrollCachePosition = 0;
	}
}

La hoja de estilos quedaría de la siguiente manera:

#cssBackground 		{height:100%; width:100%; background-color:#000; display:none; position:fixed; top:0; left:0; z-index:100; float:left; opacity:0.65;}
#cssPopup 			{margin:0 auto;}
#cssPopupContainer 	{position:absolute; display:none; z-index:101; width:100%;}

Para que IE6 haga la opacidad y la posición fija tendremos que insertar álgún hack en un condicional en el ‘head’:

<!--[if lt IE 7]>
<style type="text/css" media="all">
	#cssBackground {_position:absolute !important; filter:alpha(opacity=65);}
</style>
<![endif]-->

Para que IE7 haga la opacidad insertamos lo siguiente con un condicional en el ‘head’:

<!--[if IE 7]>
<style type="text/css" media="all">
	#cssBackground {filter:alpha(opacity=65);}
</style>
<![endif]-->

Según la URL que venga añadirá un fichero u otro:
Estructura del PopUp:

<?
if ($_GET['page']=="pagina-1") {
	include ("includes/pagina-1.php");
}elseif ($_GET['page']=="pagina-2") {
	include ("includes/pagina-2.php");
	}
?>

Si le pasamos page=pagina-1 incluirá el fichero pagina-1.php tal y como lo pongo en la condición de arriba.

Para llamar al popup sería de la siguiente forma:

<a href="javascript:void(0);" onclick="popupCssShow('popup.php?page=pagina-1', 460);" title="Abrir PopUp">Abrir PopUp</a>

También le pasamos el parámetro ‘460′ para que nos habrá la ventana a ‘460px’.

Podéis ver un ejemplo aquí.
Descarga del ejemplo aquí.

Nota:
Para que os funcione tenéis que alojar el directorio en vuestro servidor o en local, ya que el ejemplo utilizo php para abrir un fichero u otro.

Versión mejorada del script: aquí.

Star Rating es un plugin de jQuery para votar/puntuar cosas.
Aquí tienes unos ejemplos.

Se implementación es relativamente fácil, añadimos las librerías javascript en el head:

<script language="javascript" type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery-ui-1.7.1.min.js"></script>
<script language="javascript" type="text/javascript" src="ui.stars.min.js"></script>

Ahora, la hoja de estilos:

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

Configuración del script:

<script type="text/javascript">
	$(function(){
		$("#ratings").children().not(":radio").hide(); //Escondemos todo el contenido exceptuando los radios.
		$("#ratings").stars({
			oneVoteOnly: true, //Este parámetro sirve para que una vez pulsada alguna estrella haga el submit.
			split: 2, //Dividimos las estrellas en medios
			callback: function(ui, type, value)
			{
				$.post("ratings.php", {rate: value}, function(data) //Fichero donde procesamos las votaciones.
				{
					$("#ajax_response").html(data); //Capa donde cargamos el contenido en Ajax.
				});
			}
		});
	});
</script>

El contenido html:

<form id="ratings" action="ratings1.php" method="post">
    <input type="radio" name="rate" value="0.5" id="rate1" />
    <input type="radio" name="rate" value="1" id="rate2" />
    <input type="radio" name="rate" value="1.5" id="rate3" />
    <input type="radio" name="rate" value="2" id="rate4" />
    <input type="radio" name="rate" value="2.5" id="rate5" />
    <input type="radio" name="rate" value="3" id="rate1" />
    <input type="radio" name="rate" value="3.5" id="rate2" />
    <input type="radio" name="rate" value="4" id="rate3" />
    <input type="radio" name="rate" value="4.5" id="rate4" />
    <input type="radio" name="rate" value="5" id="rate5" />
    <input type="submit" value="Enviar" />
</form>

<br style="clear:both" />
<p id="ajax_response"></p>

- Ejemplo: aquí.
- Más ejemplos: aquí.
- Descarga: aquí.

Cuando se utiliza una tabla, todas las columnas de este cuadro tiene la misma altura. Antiguamente esto no era un problema en absoluto ya que se maquetaba con tablas, pero ahora, con el aumento de las hojas de estilos (CSS) ahora es algo más complicado.

Añadimos en el head la librería jQuery y el plugin EqualHeights:

<script type="text/javascript" language="javascript" src="javascript/jquery-1.2.6.min.js"></script>
<script type="text/javascript" language="javascript" src="javascript/transBG.jquery.plugin.js">

Ponemos los estilos:

<style type="text/css">
	body{color:#FFFFFF; font-family:Arial, Helvetica, sans-serif; font-size:12px;}
	#container {margin:0 auto; width:980px; padding-top:10px;}
	h1 {color:#000; font-size:18px;}
	h2 {color:#000; font-size:14px; padding-bottom:5px;}
	.container { float:left; clear:left; width:100%; padding:0 0 2em; }
	.box { float:left; width:24%; margin-right:1%; background-color:#FF0000; }
	.box p { margin:.5em; padding:0; }
</style>

Y añadimos el selector:

<script language="javascript" type="text/javascript">
	$(function(){ $('#mismaAltura').equalHeights(); });
</script>

La capa con la id=mismaAltura hará el efecto.

Y por último el código html:

        <h2>Columnas sin igual alturas</h2>
        <div class="box"><p>A - Lorem ipsum dolor sit amet</p></div>
        <div class="box"><p>B - consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
        <div class="box"><p>C</p></div>
        <div class="box"><p>D - Ut enim ad minim</p></div>
        <br clear="all" /><br />
        <h2>Columnas con la misma altura</h2>
        <div class="container" id="mismaAltura">
            <div class="box"><p>A - Lorem ipsum dolor sit amet</p></div>
            <div class="box"><p>B - consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
            <div class="box"><p>C</p></div>

            <div class="box"><p>D - Ut enim ad minim</p></div>
        </div>

Ejemplo: aquí.
Descarga: aquí.

Este plugin nos ayudará a modificar el botón del input file ya que los navegadores no lo permiten, de momento.

Primero añadimos la librería jQuery y la del dicho plugin.

<script language="javascript" type="text/javascript" src="../../common/jquery-1.3.2.min.js"></script>
<script language="javascript" type="text/javascript" src="javascript/jquery.filestyle.pack.js"></script>

Llamamos al input con la clase ‘inputFile’ y lo iniciamos:

	$(function() {
		 $(".inputFile").filestyle({
			 image: "imagenes/examinar.gif", //Ruta de la imagen (botón).
			 imageheight:24, //Height de la imagen.
			 imagewidth: 96, //Widht de la imagen.
			 width: 250 //Tamaño del input.
		 });
	});

Le damos un pequeño estilo:

.inputFile {
	border:#bbb solid 1px;
	height:20px;
}

Ejemplo: aquí.
Más ejemplos: aquí.
Descarga del plugin: aquí.

Un tooltip es una herramienta de ayuda visual patentada por Microsoft, que funciona al situar o pulsar con el ratón sobre algún elemento gráfico, mostrando una ayuda adicional para informar al usuario de la finalidad del elemento sobre el que se encuentra.

Crear un tooltip usando jQuery es muy sencillo, lo primero es añadir los estilos que queremos que tenga nuestro tooltip:

	#capaHelp {
		display:none;
		background:url(imagenes/tooltip.png) no-repeat top left;
		width:622px;
		padding:20px 10px 0 20px;
		height:82px;
		color:#000;
		font-weight:bold;
		margin:-100px 0 0 185px;
		position:absolute;
		z-index:101;
	}
	#capaContenido {
		padding:2px 25px 0 0;
		float:left;
		font-size:12px;
		color:#FFF;
		font-weight:bold;
		position:absolute;
	}

La capa ‘capaHelp’ es la capa contenedora del tooltip por eso la posicionamos donde queremos que aparezca y finalmente sobreposicionamos la capa con un z-index.

Añadimos el efecto con jQuery:

$(function() {
	$("#icoHelp").mouseover(function(event) {
		$("#capaHelp").slideToggle();
	});
	$("#icoHelp").mouseout(function(event) {
		$("#capaHelp").slideToggle();
	});
});

La id ‘icoHelp’ tendrá el evento mouseover y mouseout con un efecto ’slideToggle’ de jQuery.
Como ya he dicho antes, este script es bastante simple pero si más no muy bonito, aquí tenéis más scripts sobre tooltips en jQuery.

Ejemplo: aquí.
Descarga: aquí.