Banner flutuante não aparece no IE

ndecastro · Janeiro 26, 2008

Pessoal eu estou com o seguinte problema, eu desenvolvi um banner flutuante, que aparece se movimenta pela tela e depois some, o problema que ela não aparece no IE, ele faz tudo que tem que fazer, só que simplesmente não aparece no IE, deêm uma olhada no código, ele é meu grandinho, mas está legivel.

Este código é tudo quase meu, com exceção dos fadeIn e fadeOut que eu encontrei em site na net, eu creio que o problema seja justamente ai!!!

CODE

<html>
<head>

	<title>Guia e Turismo</title>

	<style type="text/css">

		/* Configuração padrão do banner */

		.est_banner_flutuante{

			z-index:3;

			position:absolute;

			top:0px;

			left:0px;

			width:200px;

			height:210px;

			opacity: 0;

			filter:alpha(opacity=0);

		}

		/* Ajuste para o conteudo */

		#modelo{

			position:absolute;

			top:10px;

		}

		#galeria{

			position:absolute;

			top:10px;

		}

		#fechar{

			float:right;

			font-size:10px;

		}

		/* Configuração para quando o banner estiver parado */

		.parado{

			z-index:3;

			position:absolute;

			opacity: 75;

			filter:alpha(opacity=75,FinishOpacity=15, Style=1);

			width:200px;

			height:210px;

		}

	</style>

	<script type="text/javascript">

		//Função para controlar o banner flutuante (movimentação, aparerição, e todos os outros efeitos

		var tempo;

		var parado = false;

		//Alterando o conteudo do banner flutuante

		var mostrando='galeria';

		var ocultar='modelo';

		function banner_flutuante(){

			//Fazendo o banner aparecer depois 5 segundos

			setTimeout(function(){

				fadeIn('banner_flut',0,1);

			},5000);

			//iniciando a movimentação do banner flutuante depois de 5 segundos e meio

			setTimeout(function(){

				tempo = setInterval('movimento()',50);

			},5500);

			//alterando o conteudo do banner a cada 10 segundos

			setInterval(function(){

				//algoritmo de troca

				var prov = ocultar;

				ocultar = mostrando;

				mostrando = prov;

				//alterando o conteudo

				document.getElementById(mostrando).style.visibility = 'visible';

				document.getElementById(ocultar).style.visibility = 'hidden';

			},10000);

			//Fazendo o banner desaparecer depois de 1 minuto

			setTimeout(function(){

				if (!parado){

					parar();

				}

			},60000);

		}
 
		//variaveis usadas no processo de aparição e movimentação do banner

		var topo = 0;

		var esquerda = 0;

		var aumenta_topo = true;

		var aumenta_lateral = true;
 
		//função para movimentação do banner

		function movimento(){

			//verificando se a variavel "topo" é igual 800, se for ele alterada o valor da variavel "aumenta_topo" para falso

			if (topo==600){

				aumenta_topo = false;

			}else if (topo==0){

				aumenta_topo = true;

			}

			//verificando se a variavel "esquerda" é igual 600, se for ele alterada o valor da variavel "aumenta_esquerda" para falso

			if (esquerda==600){

				aumenta_lateral = false;

			}else if (esquerda==0){

				aumenta_lateral = true;

			}

			//verificando o valor da variavel "aumenta_topo"

			//se ela for verdadeira, a variavel "topo" recebe mais 10, senão perde 10

			if (aumenta_topo){

				topo += 1;

			}else{

				topo -= 1;

			}

			//verificando o valor da variavel "aumenta_esquerda"

			//se ela for verdadeira, a variavel "esquerda" recebe mais 10, senão perde 10

			if (aumenta_lateral){

				esquerda += 2;

			}else{

				esquerda -= 2;

			}
 
			//atribuindo os valores de posicionamento do banner flutuante

			document.getElementById('banner_flut').style.top = topo;

			document.getElementById('banner_flut').style.left = esquerda;

		}
 
		//Faz aparecer o objeto

		function fadeIn(id, time) {

			target = document.getElementById(id);

			alpha = 0;

			timer = (time*1000)/100;

			var i = setInterval(

					function() {

						if (alpha >= 100)

							clearInterval(i);

						setAlpha(target, alpha);

						alpha += 2;

					}, timer);

		}
 
		//Faz sumir o objeto

		function fadeOut(id, time) {

			target = document.getElementById(id);

			alpha = 100;

			timer = (time*1000)/100;

			var i = setInterval(

					function() {

						if (alpha <= 0)

							clearInterval(i);

						setAlpha(target, alpha);

						alpha -= 2;

					}, timer);

		}
 
		//Altera o valor alpha do objeto

		function setAlpha(target, alpha) {

			target.style.filter = "alpha(opacity="+ alpha +")";

			target.style.opacity = alpha/100;

		}
 
		//Reposicionando o banner quando ele for fechado

		function parar(){

			//parando o banner

			clearInterval(tempo)

			fadeOut('banner_flut',0,1);

			parado = true;

			//reposicionando o banner

			document.getElementById('banner_flut').style.top = 10;

			document.getElementById('banner_flut').style.left = 805;

			//escondendo o botaõ fechar

			document.getElementById('fechar').style.visibility = 'hidden';

			fadeIn('banner_flut',0,1);

			//passando a novo estilo do banner

			document.getElementById('banner_flut').className = 'parado';

		}

	</script>

</head>

<body onLoad="banner_flutuante();">

	<!-- Banner flutuante -->

	<div id="banner_flut" class="est_banner_flutuante">

	<div id="fechar"><a href="java script:parar();" title="Fechar o banner">Fechar<a></div>

	<!-- Imagem 1 -->

	<div id="modelo">

		<img src="#" width="200px" height="200px">

	</div>

	<!-- Imagem 2 -->

	<div id="galeria">

		<img src="#" width="200px" height="200px">

	</div>

</div>

</body>

</html>

Obrigado!

inforsis · Janeiro 26, 2008

ndecastro, Bom Dia!

Se você poder postar um link também auxilia o pessoal para analisar o problema.

Então como você dissi que existe a possibilidade do problema estar na parte do fade in/fade out... Estou movendo o tópico para seção de JavaScript/DHTML o pessoal pode te dar um auxilio a mais. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Webstandards: CSS / XML / XHTML/ HTML http://forum.imasters.com.br/public/style_emoticons/default/seta.gif JavaScript/DHTML

Sopiseiro · Janeiro 26, 2008

Ola amigo naum tive tempo de olhar o seu codigo a fundo, mas vai um conselho tente trabalhar com opacity e filter em ambientes separados, tipo identifique o navegador do usuario e depois trabalhe com o efeito apenas para esse navegador, com vi o seu esta trabalhando com ambos ao mesmo tempo.

ndecastro · Janeiro 26, 2008

Vou tentar identificar o browser, para depois aplicar o estilo, será que pode resolver o problema?

Esse é o link para a página com o codigo acima.

http://geocities.yahoo.com.br/cleyton_cm/

Obrigado até agora.

ndecastro · Janeiro 28, 2008

Sopiseiro, eu fiz o que você falou, mas não adiantou, continua o problema.

Abaixo está a parte do código que eu alterei.

CODE

function setAlpha(target, alpha) {
	var nome = navigator.appName;

	if (nome == "Microsoft Internet Explorer"){

		target.style.filter = "alpha(opacity="+ alpha +")";

	}else{

		target.style.opacity = alpha/100;

	}

}

No link que eu postei anteriormente já está com essa alteração.

Sopiseiro · Fevereiro 1, 2008

Pessoal eu estou com o seguinte problema, eu desenvolvi um banner flutuante, que aparece se movimenta pela tela e depois some, o problema que ela não aparece no IE, ele faz tudo que tem que fazer, só que simplesmente não aparece no IE, deêm uma olhada no código, ele é meu grandinho, mas está legivel.

Este código é tudo quase meu, com exceção dos fadeIn e fadeOut que eu encontrei em site na net, eu creio que o problema seja justamente ai!!!

CODE

<html>
<head>

<title>Guia e Turismo</title>

<style type="text/css">

/* Configuração padrão do banner */

.est_banner_flutuante{

z-index:3;

position:absolute;

top:0px;

left:0px;

width:200px;

height:210px;

opacity: 0;

filter:alpha(opacity=0);

}

/* Ajuste para o conteudo */

#modelo{

position:absolute;

top:10px;

}

#galeria{

position:absolute;

top:10px;

}

#fechar{

float:right;

font-size:10px;

}

/* Configuração para quando o banner estiver parado */

.parado{

z-index:3;

position:absolute;

opacity: 75;

filter:alpha(opacity=75,FinishOpacity=15, Style=1);

width:200px;

height:210px;

}

</style>

<script type="text/javascript">

//Função para controlar o banner flutuante (movimentação, aparerição, e todos os outros efeitos

var tempo;

var parado = false;

//Alterando o conteudo do banner flutuante

var mostrando='galeria';

var ocultar='modelo';

function banner_flutuante(){

//Fazendo o banner aparecer depois 5 segundos

setTimeout(function(){

fadeIn('banner_flut',0,1);///ERRRRRRRRRRRRRROOOOOOOOO AQUIIIIIIII

},5000);

//iniciando a movimentação do banner flutuante depois de 5 segundos e meio

setTimeout(function(){

tempo = setInterval('movimento()',50);

},5500);

//alterando o conteudo do banner a cada 10 segundos

setInterval(function(){

//algoritmo de troca

var prov = ocultar;

ocultar = mostrando;

mostrando = prov;

//alterando o conteudo

document.getElementById(mostrando).style.visibility = 'visible';

document.getElementById(ocultar).style.visibility = 'hidden';

},10000);

//Fazendo o banner desaparecer depois de 1 minuto

setTimeout(function(){

if (!parado){

parar();

}

},60000);

}

//variaveis usadas no processo de aparição e movimentação do banner

var topo = 0;

var esquerda = 0;

var aumenta_topo = true;

var aumenta_lateral = true;

//função para movimentação do banner

function movimento(){

//verificando se a variavel "topo" é igual 800, se for ele alterada o valor da variavel "aumenta_topo" para falso

if (topo==600){

aumenta_topo = false;

}else if (topo==0){

aumenta_topo = true;

}

//verificando se a variavel "esquerda" é igual 600, se for ele alterada o valor da variavel "aumenta_esquerda" para falso

if (esquerda==600){

aumenta_lateral = false;

}else if (esquerda==0){

aumenta_lateral = true;

}

//verificando o valor da variavel "aumenta_topo"

//se ela for verdadeira, a variavel "topo" recebe mais 10, senão perde 10

if (aumenta_topo){

topo += 1;

}else{

topo -= 1;

}

//verificando o valor da variavel "aumenta_esquerda"

//se ela for verdadeira, a variavel "esquerda" recebe mais 10, senão perde 10

if (aumenta_lateral){

esquerda += 2;

}else{

esquerda -= 2;

}

//atribuindo os valores de posicionamento do banner flutuante

document.getElementById('banner_flut').style.top = topo;

document.getElementById('banner_flut').style.left = esquerda;

}

//Faz aparecer o objeto

function fadeIn(id, time) {

target = document.getElementById(id);

alpha = 0;

timer = (time*1000)/100;

var i = setInterval(

function() {

if (alpha >= 100)

clearInterval(i);

setAlpha(target, alpha);

alpha += 2;

}, timer);

}

//Faz sumir o objeto

function fadeOut(id, time) {

target = document.getElementById(id);

alpha = 100;

timer = (time*1000)/100;

var i = setInterval(

function() {

if (alpha <= 0)

clearInterval(i);

setAlpha(target, alpha);

alpha -= 2;

}, timer);

}

//Altera o valor alpha do objeto

function setAlpha(target, alpha) {

target.style.filter = "alpha(opacity="+ alpha +")";

target.style.opacity = alpha/100;

}

//Reposicionando o banner quando ele for fechado

function parar(){

//parando o banner

clearInterval(tempo)

fadeOut('banner_flut',0,1);

parado = true;

//reposicionando o banner

document.getElementById('banner_flut').style.top = 10;

document.getElementById('banner_flut').style.left = 805;

//escondendo o botaõ fechar

document.getElementById('fechar').style.visibility = 'hidden';

fadeIn('banner_flut',0,1);

//passando a novo estilo do banner

document.getElementById('banner_flut').className = 'parado';

}

</script>

</head>

<body onLoad="banner_flutuante();">



<div id="banner_flut" class="est_banner_flutuante">

<div id="fechar"><a href="java script:parar();" title="Fechar o banner">Fechar<a></div>



<div id="modelo">

<img src="#" width="200px" height="200px">

</div>



<div id="galeria">

<img src="#" width="200px" height="200px">

</div>

</div>

</body>

</html>

Obrigado!

Ola jovem vi o seu codigo se ainda naum encontrow o erro ai vai

O problema esta na sua funcao FadeIn...

Quando o IE chama a funcao a sua variavel "timer" dah valor zero portanto o setinterval soh eh chamado 1 vez ficando assim a camada invisivel, no FF ele interpreta o Zero com o tempo para aparecer novamente jah o IE naum...Ele soh chama a si mesmo 1 vez...

dica substitua a variavel timer por um valor tipo 1 vai ficar igual a sua ideia ou simplismente passa um valor diferente de zero para a funcao...

arrumando isso tudo vai ficar ok...

Lembrando que o mesmo erro vai acontecer no FadeOut...

Entrar

Arquivado

Banner flutuante não aparece no IE

Recommended Posts

ndecastro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

inforsis 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Sopiseiro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

ndecastro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

ndecastro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Sopiseiro 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

printf iniciante básico

JAVA - Orientação para Invalidar Sessão

JAVA - Ajuda em Paginação

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante