PNG transparentes en IE6 con DD_belatedPNG

Algo bastante común con los PNGs transparentes es que ie6 no los muestre correctamente. Gracias a DD_belatedPNG nos podemos olvidar de la mayoría de problemas que nos causan en cuestión de segundos.

Es bastante sencillo de implementar.

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('.png_bg'); //EXAMPLE
</script>
<![endif]-->

Personalmente he probado muchísimos “png fix” y el actual es el único que ha cumplido medianamente con mis espectactivas. Su peso es de ~7kb comprimido, vistas al alternativas y los resultados nada mal.

Algunas de las cualidades de DD_belatedPNG son:

  • Emplear PNG de 24-bit con transparencia como fondo mediante la propiedad background-image de CSS
  • Posicionar esas imagenes mediante background-position o repetirlas con background-repeat
  • No usa AlphaImageLoader con lo que no encontraremos problemas con el z-index
  • Responde a element.style y a la pseudoclase :hover
  • Es muy sencillo de implementar y pesa muy poco

Web : http://dillerdesign.com/

Share



Pirobox – Jquery Plugin para simular Lightbox

Pirobox es un plugin de JQuery que permite crear galerías de imágenes transitables con el efecto lightbox.

Pirobox, ejemplo theme blanco.

Pirobox, ejemplo theme blanco.

Lo he utilizado en varios proyectos, es sencillo de utilizar y bastante personalizable. Trae por defecto 2 estilos, en blanco y en negro. Además permite tener dentro o fuera la navegación entre las diferentes imágenes de la galería. Personalmente le encuentro dos inconvenientes, su peso (14Kb pack) y la cantidad de código necesaria para organizar las galerías.

Web : www.pirolab.it

Share



Easy Tooltip, plugin de jquery

EasyTooltip es un plugin para JQuery muy simple y sobre todo muy ligero para añadir tooltips a tus diseños web.

Para los que no sepan que es un tooltip, decir que es información que se despliega al pasar el ratón por encima de un link.

Solamente pesa 2kb sin comprimir y comprimido con Online YUI Compressor menos de 1kb.

Pluging JQuery Easy Tooltip

Las opciones de EasyTooltip son pocas pero funcionales 😀

  • xOffset – Indica la distancia del eje x a la que se va a posicionar el tooltip del puntero del ratón. (En píxeles). El valor por defento es 10.
  • yOffset – Indica la distancia del y a la se va a posicionar el tooltip del puntero del ratón. (En píxeles). El valor por defento es 25.
  • tooltipId – Si deseas asignar un identificador a tu tooltip puedes añadírselo. Así podrás tener varios tooltips en la misma página y con estilos diferentes añadiendo definiciones css al identificador en cuestión.. El valor por defento es “easyTooltip”.
  • clickRemove – Por defecto el tooltip se oculta cuando dejamos de seleccionar el elemento pero también podemos agregar la opción de que desaparezca al clickar sobre el elemento. El valor por defento es false.
  • content – Por defecto EasyTooltip captura el contenido del atributo title del elemento. Para asignarle un contenido personalizadebemos añadir la opción al llamar al tooltip. Usa esta opción para personalizar el contenido del tooltip. El valor por defento es “” (vacío).
  • useElement – Se puede asignar contenido de una capa indicándole el identificador. Resulta muy útil cuando quieres añadir código HTML complejo. La mejor manera de usar esta opción es crear un elemento estático en HTML, ocultarlo con css (display:none;) y llamarlo desde el pluging.

Ahora toca verlo en acción :

Si deseas descargarlo puedes hacerlo desde la página oficial cssglobe.com o directamente clickando AQUÍ.

En mi juego Kobox he decidido cambiar mi antiguo tooltip “wz_tooltip” por EasyTooltip principalmente porque ahora utilizo JQuery, pesa solamente 1kb y es muy sencillo de adaptar.

He realizado unas cuantas modificaciones para adaptar el código a mis necesidades, podéis ver un ejemplo AQUÍ.

Share



Funcioncita para evitar datos de la caché en Ajax

Partiendo de que internet explorer guarda en caché las peticiones Ajax, es preferible añadir a cada petición un valor aleatorio. De este modo lograremos obtener un valor siempre válido y no proveniente de la cache.

ejemplo de función (min y max indica el intervalo de valores)

function semilla(min,max){
  num = max - min;
 aleat = Math.random() * num;
 aleat = Math.floor(aleat);

 return parseInt(min) + aleat;
}

ahora simplemente en las llamadas pedimos una semilla aleatoria

$("#prueba1").load("peticion_ajax.php?precio=chistorra&semilla="+semilla(1,1000));

Es un detalle que jode bastante puesto que te puedes volver loco buscando el porque en un navegador te da valores válidos y en otro no da valores actualizados xD

Share



Quitándome el miedo con Ajax

Bueno hasta el no había necesitado utilizar Ajax(Asynchronous JavaScript And XML) para nada. Tenía una especie de sensación que me recorría todo el cuerpo cada vez que pensaba en ponerme con ello y siempre acababa dejándolo para otro día.

Hoy por fin, por mis santos co***** me ha apetecido y me he puesto al lío.

He comenzado buscando información acerca de su estructura y funcionamiento, algo que ya me había mirado con anterioridad.
Y he generado un código, por lo que he visto, bastante estandar.

Vamos a validar un nick de usuario, que no se encuentre repetido.
El ejemplo es bastante simple, consta de un formulario con un campo de texto que pide un nick y un botón que al pulsarlo comprueba si se encuentra en uso.

Comenzamos creando el objeto necesario para tal menester.
Para ello vamos a desarrollar una función.

/* función constructora del objeto request */
function createXMLHttpRequest() {
if (window.ActiveXObject) {
/* si es interné explóre  */
return new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
/* si no es interné explóre  */
return new XMLHttpRequest();
}else{
/* mal comenzamos si no permite crear el objeto */
alert('No existe la posibilidad de AJAX');
}
}

/* generamos la variable por eso de tenerla global */
var xmlHttp;

/* creamos la función que coprobará si el nick ya existe o no */
function comprueba_nick(){
/* generamosla dirección a la que vamos a enviar los datos a validar, en este caso es la página validar.php en la que deberemos tener un código que nos devuelva si es un nick que se encuentra en uso o no. Por ejemplo: 'Nick Disponible' / 'Nick en Uso' */
var nick=document.getElementById("nick").value;
var url = "validar.php?nick="+ escape(nick);
/* creamos el objeto desde nuestra función constructora */
xmlHttp = createXMLHttpRequest();
/* enviamos una llamada a la dirección y le especificamos que queremos la respuesta por GET, también admite por POST y PUT */
xmlHttp.open("GET", url);
/* comprobamos que nos llegan los datos para ello, hemos creado una función llamada Completado */
xmlHttp.onreadystatechange = Completado;
/* ya hemos terminado, cerramos el chiringuito */
xmlHttp.send(null);
}

/* la función Completado nos informa cuando el estado de la petición se ha completado. Existen cinco estados posibles: 0 (sin iniciar), 1 (cargando), 2 (cargado), 3 (en proceso), 4 (completado)</span>
function Completado() {
if (xmlHttp.readyState == 4) {
/* se ha completado, ahora vamos a informar de que el nick es correcto, cargamos un div mismamente con la respuesta, o podemos sustituir el código por un     alert(xmlHttp.responseText); */
document.getElementById("cnick").innerHTML=xmlHttp.responseText;
}
}

El formulario html sería algo así:

Validando un Nick con AJAX:

<input id="nick" name="nick" type="text">
<div name="cnick"</div>;

<input id="manolete" value="Comprobar" onclick="comprueba_nick();" type="button">

El archivo PHP, no lo pongo, pero debería de tener una estructura, para este caso, similar a esto:
1º – comprobamos que piden datos
2º – conectamos a la base de datos
3º – buscamos un nick que sea igual
4º – si lo encontramos respondemos con un echo mismamente ‘Nick en Uso’
5º – si no lo encontramos respondemos ‘Nick Disponible’

Resumiendo quedaría algo así :

<script language="JavaScript" type="text/javascript">
function createXMLHttpRequest() {
if (window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
return new XMLHttpRequest();
}else{
alert('No existe la posibilidad de AJAX');
}
}

var xmlHttp;

function comprueba_nick(){
var nick=document.getElementById("nick").value;
var url = "validar.php?nick="+ escape(nick);

xmlHttp = createXMLHttpRequest();

xmlHttp.open("GET", url);

xmlHttp.onreadystatechange = Completado;
xmlHttp.send(null);
}

function Completado() {
if (xmlHttp.readyState == 4) {
document.getElementById("cnick").innerHTML=xmlHttp.responseText;
}
}
</script>

Validando un Nick con AJAX:

<input id="nick" name="nick" type="text">
<div name="cnick"</div>

<input id="manolete" value="Comprobar" onclick="comprueba_nick();" type="button">

Ahora que sabes todo esto intenta crear una llamada en ajax para insertar el usuario sin recargar la página 😀

Bueno, tras aprender los conceptos básicos del tema (aprendo muy deprisa), me he metido con una librería enfocada a multitud de tareas con javascript, la librería se llama Jquery y no tiene mala pinta. También he oído que existe un tal Prototype, pero de momento me quedo con esta.
Tras leer la Documentación Ajax Jquery he creado un código bastante simple para la parráfada anterior, mejor que lo comprobéis con vuestros propios ojos … xD
Si no tienes mucha idea hay que tomarse el asunto con mucha calma.

/* te descargas la librería, la posicionas donde te salga, yo la he puesto en la misma ubicación del documento. Para incorporala a la página con la siguiente instrucción es más que suficiente (recuerda adaptar la ruta a donde la posiciones) */
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
/* no voy a explicar gran cosa ya que en la documentación viene bastante clarito, lástima del inglés xD
El símbolo "$" indica la creación de eventos y demás para dicha librería. La nomenclatura utilizada es muy parecida a la de CSS. El método ".bind" nos permite crear un evento al objeto al que hacemos mención, en este caso, al botón "manolete". Indicamos en que tipo de evento va a saltar, "Click" y que queremos hacer, yo he creado la función directamente ahí 😀
lo que hace esa función/bloque_de_acciones es cargar mediante el evento ".load" una página, la librería se encarga de crear el objeto y recibir los datos ... etc ... etc ... Por lo que cuando se clicke en el botón html tendremos el mismo resultado que antes, se cargará en la capa cnick la respuesta obtenida*/

$("#manolete").bind('click', function(){ $("#cnick").load("validar.php?nick="+$("#nick").attr("value"))});
</script>

En fin quedaría algo así, fíjate bien ya que he quitado el onClick del botón “manolete”, puesto que lo hacemos desde Jquery.

//Validar un usuario con Ajax#
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$("#manolete").bind('click', function(){ $("#cnick").load("validar.php?nick="+$("#nick").attr("value"))});
</script>

Validando un Nick con AJAX:

<input id="nick" name="nick" type="text">
<div name="cnick">

<input id="manolete" value="Comprobar" type="button">
</div>

Share