Arquivo da categoria: jQuery

Animação com jQuery, não funciona como esperado no IE7 IE8.

Bom isso não é um espanto para desenvolvedor web nenhum :D,  todos sabemos o quanto as simples três letras juntas ie6/ie7/ieX são sinonimo de problemas talvez no ie18 seja algo correto! Nossa radicalizeiiiii!!!!! hihihiHAihaHAIaH … bom parece que o ie9 já implenenta até HTML5. Uau! -_-

Evangelizando.

Isso não tem nada a ver com o bug, pode pular para o próximo tópico ;).

É por isso que eu digo, use Firefox, use o Chrome use algo atualizado e seja feliz! Já discuti muito com amigos web-dev’s sobre a questão dos navegadores da raça ieX e o que geralmente dá mais discussão é ele o ie6, pois todos dizem que tem que funcionar no ie6, e eu digo que o ie6 só atrasa com a evolução dos padrões e das novas tecnologias web que podem e vão surgir, justamente porque este navegador não suporta nem as tecnologias básicas de desenvolvimento web como CSS/JS, tipos de imagens etc.

O problema em usar o método da jQuery .animate().

A função .animate() em sua descrição já diz tudo: “.animate(): Executa uma animação personalizada de um conjunto de regras CSS”, com este métodos pode-se desenvolver animações incríveis(exemplos, exemplos e mais exemplos.) para seu site sem a necessidade de utilizar FLASH.

Quando tenta-se utilizar a propriedade ‘position’ dentro das regras de animação no método .animate(), podemos nos deparar com um erro de javascript no navegador ie7/8, indicando um erro em nosso framework jQuery, apontando que a propriedade em questão não é reconhecida pela jQuery, mas como nós sabemos quem não consegue reconhecer a tag é o navegador, achei um post muito interessante onde os web-dev’s falavam sobre a questão da falha da animação no ie7.

Solução

Se o problema é utilizar a propriedade ‘position’ dentro do código js, ex:

$(‘#topicos_desta_secao li’).hover(function(){
$this = $(this);
var bottom = ‘-45px’; //valor default para subir.
if( $this.css(‘height’) == ‘320px’ ){bottom = ‘-115px’;}
$this.css(‘cursor’, ‘pointer’).find(‘p’).stop().find(‘.first’).hide().end().animate({position:’absolute’, bottom: bottom}, {queue:false, duration:300});

.,…..

Não as utilizem, pois o motor de JS do ie7/8 não reconhecem essa propriedade corretamente. A solução é colocar a propriedade ‘position’ dentro da regra CSS do elemento que se quer animar.

.topicos_solucoes li p {
position:absolute;
left:0;
bottom:-178px; color:white;
background-color:#4d4d4d;
height:100%;
padding:30px 10px 0 10px;
}

Simples!!!!

E sem mais blah’s… “é isso ae pessoal”

1 comentário

Arquivado em bugs, css, jQuery, xhtml

Workaround(remendo) para o bug do jQuery fonte ClearType no IE´cas da vida

Hoje no trabalho me deparei com um novo bug (novo pra min neh =P ),  um estranho bug que faz com que a fonte do texto de um elemento fique zuada no IEca7. ~

Fontes Cleartype.

Cleartype é um tipo de fonte usada no Windows e IE7 que implementa uma técnica especifica de render chamada subpixel rendering para aumentar a resolução de fontes renderizadas pelos monitores de LCD, legal né, bom para os windows users da vida!

jQuery, Cleartypes IE7 e o bug.

Bom agora que você sabe algo sobre as fontes, vou explicar o que acontece com elas e o javascript(jQuery). Quando usamos a função .fadeIn()/.fadeOut()/.fadeTo() do jQuery para criar um efeito de esmaecimento em algum elemento ou nó do XHTML, essas funções da jQuery fazem uma chamada a uma função do núcleo de bibliotecas do javascript especifica do navegador em uso, no caso aqui, o MSIE7, a função do núcleo javascript chamada é setElementOpacity que por sua vez cria um filtro, para gerar uma opacidade em CSS  usando aquele filtro da Microsoft(DXImageTransform.Alpha ) o mesmo que tenta fazer o remendo do PNG no IEca6, ai já viu né esse filtro ai é “pobrema!” esse filtro faz com que o navegar dispense a fonte Cleartype e use a fonte padrão após o efeito e isso zua com a fonte.  Bom se você não entendeu o bug, leia na integra essa matéria que você concerteza irá entender. Veja um exemplo do bug aqui.

O remendo(workaround).

O remendo para este problema são 2:

O primeiro e mais simples é definir uma cor de fundo para o elemento que recebe o .fadeIn/Out/To() do jQuery.

background-color:#fff;

O segundo é um pouco mais complicado e faz parte da resolução do problema em nivel de javascript, consistem em remover o atributo “filter” do elemento, assim:

document.getElementById('elemento').style.removeAttribute('filter')

Um programador jQuery Benjamin Michael Novakovic criou uma função que pode ser usada para resolver o problema e o com as funções fadeIn() e fadeOut(), já um outro programador Jonathan fez o resto do serviço e implementou também a função fadeTo().

jQuery.fn.fadeIn = function(speed, callback) {
return this.animate({opacity: 'show'}, speed, function() {
if (jQuery.browser.msie)
this.style.removeAttribute('filter');
if (jQuery.isFunction(callback))
callback();
});
};

jQuery.fn.fadeOut = function(speed, callback) {
return this.animate({opacity: 'hide'}, speed, function() {
if (jQuery.browser.msie)
this.style.removeAttribute('filter');
if (jQuery.isFunction(callback))
callback();
});
};

jQuery.fn.fadeTo = function(speed,to,callback) {
return this.animate({opacity: to}, speed, function() {
if (to == 1 && jQuery.browser.msie)
this.style.removeAttribute('filter');
if (jQuery.isFunction(callback))
callback();
});
};

Bom é isso ai espero que ajude você com esse problema.

4 Comentários

Arquivado em bugs, Javascript, jQuery