Problemas con jquery e IE usando show o toggle
Publicado: 25/02/2010
Ya sabemos que jquery es un framework excepcional, pero siempre tuve un inconveniente con sus funciones toggle y show, que básicamente son lo mismo.
Por si no sabes de que hablo la función show(), te muestra un elemento oculto y en cambio la función toggle() muestra u oculta el elemento según su estado actual.
En fin, mi problema con Internet Explorer 5,6,7 y 8 (malditos!!) era que al mostrar un elemento las tipografías se mostraban como si estuvieran pixeladas. Y no había forma de corregirla hasta que de casualidad un día me tope con un blog en donde para mi gran placer encontré la solución.
Básicamente la idea es detectar si se trata de este maldito browser y de ser así
retornar falso y quitar el atributo
filter. Nada mas sencillo y práctico.
Para ustedes el santo remedio ;=)$('#miBoton').click(function(){$('#elementoParaMostrar').toggle('fast',function(){ if($.browser.msie){ this.style.removeAttribute('filter');}); return false;});
Lo único que no probé es si la última versión de jquery (v1.4) resuelve este bug pero bueno, es una solución muy simple y muy difícil de encontrar.
Como siempre, espero sus sugerencias y consultas, hasta la próxima.
Lucas Ramos
Comentarios de este post
Camilo dice...
Publicado: 23/08/2010 - 12:42:59
“Hola Lucas, tengo este problema, pero con lo que vos indicás no tengo resultado, no se que puedo estar haciendo mal, pego mi código a ver si me podes dar una mano.
Gracias.
Código:
$(document).ready(function(){
$("#contNosotros2").css({display: "none"});
$(".boton2").click(function(evento){
$("#contNosotros").css({display: "none"});
$("#contNosotros2").fadeTo("slow", 1);
if($.browser.msie){
this.style.removeAttribute('filter');});
return false;
});
$(".boton1").click(function(evento){
$("#contNosotros2").css({display: "none"});
$("#contNosotros").fadeTo("slow", 1);
});
})
”Lucas Ramos dice...
Publicado: 23/08/2010 - 13:06:34
“Hola camilo:
por lo que veo en tu codigo, estas llamando esa excepcion fuera del efecto que en este caso es fadeTo.
El if en cuestion tiene que estar dentro del callback de la funcion fadeTo.
Ej:
$('#tuDiv').fadeTo('slow', 1, function(){
//aca va el if y cualquier cosa que queres que se ejecute cuando se termine la animacion fadeTo
});
En tu caso en vez de:
$("#contNosotros2").fadeTo("slow", 1);
if($.browser.msie){
this.style.removeAttribute('filter');});
return false;
});
Lo correcto seria:
$("#contNosotros2").fadeTo("slow", 1,function(){
if($.browser.msie){
this.style.removeAttribute('filter');
return false;
}
});
Comentario aparte te recomiendo veas dentro de la documentacion de jquery.com el efecto fadeIn, fadeOut y toggle.
Espero haberte ayudado.
Saludos
”Camilo dice...
Publicado: 25/08/2010 - 02:33:06
“Gracias Lucas, funciona 10 puntos, me diste una mano gigante !!
Una sola cosa, se puede evitar que se vea el cambio? es decir, cuando hago el click sobre el botón, muestra el div y por el 1 segundo se ve la tipografía pixelada y luego se corrige.
¿se puede hacer que no se vea esto?
Nuevamente te agradezo.
Saludos.
”Lucas dice...
Publicado: 26/08/2010 - 16:07:48
“Hola camilo, disculpa la demora de mi respuesta.
Te paso un link que nos va a servir para solucionar este problema de una buena vez.
http://www.kevinleary.net/jquery-fadein-fadeout-problems-in-internet-explorer/
Y este es la demo de ellos
http://www.kevinleary.net/wp-samples/ie-fade-problems.php
Espero te resulte util.
Salu2
”Fernando dice...
Publicado: 13/08/2011 - 12:52:38
“Hola Lucas, espero que despues de un año o mas veas este post por que recien hoy lo encontre y estuve toda la mañana probando y nada, en el chrome y en el firefox se ve de 10 y en el IE8 horrible, me podrias donde poner el script para que en el IE se vea igual?
Este es el codigo del banner con fade:
Muchas gracias de ante mano!
”Fernando dice...
Publicado: 13/08/2011 - 12:53:40
“Hola Lucas, espero que despues de un año o mas veas este post por que recien hoy lo encontre y estuve toda la mañana probando y nada, en el chrome y en el firefox se ve de 10 y en el IE8 horrible, me podrias donde poner el script para que en el IE se vea igual?
Este es el codigo del banner con fade:
Muchas gracias de ante mano!
”Fernando dice...
Publicado: 13/08/2011 - 12:54:33
“No se por que no se ve el script que pegue, aca va de vuelta:
”Fernando dice...
Publicado: 13/08/2011 - 12:59:43
“No se por que no se ve el script que pegue, aca va de vuelta:
”Fernando dice...
Publicado: 13/08/2011 - 13:32:54
“No se por que no se ve el script que pegue, aca va de vuelta:
”lucas dice...
Publicado: 13/08/2011 - 13:40:37
“hola fer, hace rato que no hago mantenimiento al proyecto de estudio div.
Escribime a mi gmail
(ramoslucasd@....)
Y veo si te puedo ayudar.
saludos
”Fernando dice...
Publicado: 13/08/2011 - 18:29:32
“Hola Lucas, gracias por la predisposicion, ahi te mande un mail....te lo envie a gmail, a hotmail y al de div jajaja por que no sabia a cual.
Abrazo
Fer
”Fernando dice...
Publicado: 13/08/2011 - 19:23:20
“Hola Lucas, gracias por la predisposicion, ahi te mande un mail....te lo envie a gmail, a hotmail y al de div jajaja por que no sabia a cual.
Abrazo
Fer
”Fernando dice...
Publicado: 13/08/2011 - 19:48:00
“Hola Lucas, gracias por la predisposicion, ahi te mande un mail....te lo envie a gmail, a hotmail y al de div jajaja por que no sabia a cual.
Abrazo
Fer
”