Publicado em 24 de mar.

[Resolvido] Banner rolante

Olá pessoal, mais um problema com o IE.

Bom o negócio é o seguinte preciso fazer um banner que role na página de acordo mexemos na barra de rolagem, até ai eu consegui fazer beleza e funciona nos dois navegadores com muito trabalho.

Porém eu quero que o banner só desça até determinada parte da página para ficar certinho com o layout da página.

ai fiz umas modificações no script que funcinam perfeitamente no firefox, MAS NO IE NÃO.

segue o script original:

/ DEFINIMOS OS OBJETOS navegador e janela QUE SERÁ USADO DIVERSAS VEZES /

var navegador =
{
ns6: (!document.all && document.getElementById),
ie4: (document.all),
ns4: (document.layers)
};

janela = {
}
janela.getLimiteSuperior = function ()
{

	if (navegador.ie4)
 return document.documentElement.scrollTop;
	return scrollY;
}
janela.getLimiteEsquerdo = function ()

{

	if (navegador.ie4)
 return document.documentElement.scrollLeft;
	return scrollX;
}

/**
* Retorna altura da área util da janela.

 * @return altura da área util da janela
 * @author Marcelo C. de Freitas
 * @timestamp 14/11/2003

*/
janela.getHeight = function ()
{

	if (navegador.ns4 || navegador.ns6)
 return window.innerHeight;
	else if (navegador.ie4)
 return document.body.clientHeight;
	else
 alert ("Navegador não suportado!");
} // function getHeight ()

/**
* Retorna largura da área util da janela.

 * @return largura da área util da janela
 * @author Marcelo C. de Freitas
 * @timestamp 14/11/2003
 */
janela.getWidth = function () {
	if (navegador.ns4 || navegador.ns6)
 return window.innerWidth;
	else if (navegador.ie4)
 return document.body.clientWidth;
	else
 alert ("Navegador não suportado!");
} // function getWidth ()

var navegador =

{
ns6: (!document.all && document.getElementById),
ie4: (document.all),
ns4: (document.layers)
};

/ CONSTRUIMOS A CLASSE PRINCIPAL DO SISTEMA /

/** Construtor da classe Painel
* @param id parâmetro ID do DIV ser representado. Se o DIV não for encontrado, não faz nada
* @author Marcelo Coraça e Freitas
* @timestamp 14/11/2003
*/
function Painel (id)
{
if (!this.getObjeto (id))
{

 alert ("Impossivel selecionar objeto "+id);
 return 0;
	} // if

	this.defineLocalizacaoAtual ();
	// para corrigir algum possivel bug do navegador:
	this.movePara (this.X, this.Y);

} // function Painel (id, distanciaDoTopo, slideTime)

/** Procura o objeto HTML
* @param id parâmetro id do objeto HTML

 * @return 1 se o objeto existir e for assimilado a this.objeto
 * @return 0 se o objeto não existir
 * @author Marcelo Coraça de Freitas
 * @timestamp 14/11/2003
 */
Painel.prototype.getObjeto = function (id)

{
if (!(tmp = document.getElementById (id)))

 return 0;
	this.objeto = tmp;

	// garante que o objeto possa flutuar:
	this.objeto.style.position = "absolute";
	return 1;
} // Painel.prototype.getObjeto = function (id)

/** Define a localização do painel e assimila a this.Y e this.X (ponto superior esquerdo do mesmo)
* @author Marcelo Coraça de Freitas
* @timestamp 14/11/2003
*/
Painel.prototype.defineLocalizacaoAtual = function ()
{
/*

	this.X = 0;
	tmp = this.objeto.style.left;
	for (i = 0; i < tmp.length - 3; i++)
 this.X = this.X*10 + tmp.charAt(i);
	this.Y = 0;
	tmp = this.objeto.style.top;

	for (i = 0; i < tmp.length - 3; i++)
	{
	//	alert (this.Y+" -- "+tmp.charAt(i));
 this.Y = this.Y*10 + (tmp.charAt(i));
	}
	*/

	this.X = (this.objeto.style.left) ? parseInt (this.objeto.style.left) : 0;
	this.Y = (this.objeto.style.top) ?parseInt (this.objeto.style.top) : 0;
	//alert (this.X+"x"+this.Y);

//	alert (eval ("1+2"));
} // Painel.prototype.defineLocalizacaoAtual = function ()

/** Define a distancia entre a parte superior do painel e a parte superior da página

 * @return distãncia (> 0 quando abaixo do limite superior da página, < 0 quando acima)
 * @author Marcelo Coraça de Freitas
 * @timestamp 14/11/2003
 */
Painel.prototype.getDistanciaAtualDoTopo = function ()

{

	this.defineLocalizacaoAtual ();
	return (this.Y - janela.getLimiteSuperior ());
} // Painel.prototype.getDistanciaAtualTopo = function ()

/** Define a distancia entre a parte superior do painel e a parte esquerda da página

 * @return distãncia (> 0 quando à direnta do limite da página, < 0 quando à esquerda)
 * @author Marcelo Coraça de Freitas
 * @timestamp 14/11/2003
 */
Painel.prototype.getDistanciaAtualDaEsquerda = function ()

{

	this.defineLocalizacaoAtual ();
	return (this.Y - janela.getLimiteEsquerdo ());
} // Painel.prototype.getDistanciaAtualDaEsquerda = function ()

/** Modifica a coordenada X do painel
* @param x coordenada futura

 * @return coordenada antiga
 * @author Marcelo Coraça de Freitas
 * @timestamp 14/11/2003
 */
Painel.prototype.setX = function (x)

{

	var old_x = this.X;
	this.X = x;
	this.objeto.style.left = this.X + 'px';
	return old_x;
} // Painel.prototype.setX = function (x)

/** Retorna valor de X atualizado

 * @return this.X
 * @author Marcelo Coraça de Freitas
 * @timestamp 14/11/2003
 */
Painel.prototype.getX = function ()

{

	this.defineLocalizacaoAtual ();
	return this.X;
} // Painel.prototype.getX = function ()

/** Retorna valor se X relativo à rolagem não atualizado

 * @return X relativo
 * @author Marcelo Coraça de Freitas
 * @timestamp 18/11/2003
 */
Painel.prototype.getXRelativo = function ()

{

	return (this.X - janela.getLimiteEsquerdo ());
} // Painel.prototype.getXRelativo = function ()

/** Modifica a coordenada Y do painel
* @param y coordenada futura

 * @return coordenada antiga
 * @author Marcelo Coraça de Freitas
 * @timestamp 14/11/2003
 */
Painel.prototype.setY = function (y)

{

	var old_y = this.Y;
	this.Y = y;
	this.objeto.style.top = this.Y + 'px';
	return old_y;
} // Painel.prototype.setY = function (y)

/** Retorna valor de Y atualizado

 * @return this.Y
 * @author Marcelo Coraça de Freitas
 * @timestamp 14/11/2003
 */
Painel.prototype.getY = function ()

{

	this.defineLocalizacaoAtual ();
	return this.Y;
} // Painel.prototype.getY = function ()

/** Retorna valor de Y relativo à rolagem não atualizado

 * @return Y relativo
 * @author Marcelo Coraça de Freitas
 * @timestamp 18/11/2003
 */
Painel.prototype.getYRelativo = function ()

{

	return (this.Y - janela.getLimiteSuperior ());
} // Painel.prototype.getYRelativo = function ()

Painel.prototype.getAltura = function ()

{

	return parseInt (this.objeto.style.height);
}

Painel.prototype.getLargura = function ()

{

	return parseInt (this.objeto.style.width);
}

/** Move o painel para posição absoluta
* @param x coordenada (em pixels) do lado esquerdo
* @param y coordenada (em pixels) do limite superior
* @author Marcelo Coraça de Freitas
* @timestamp 14/11/2003
*/
Painel.prototype.movePara = function (x, y)
{

	this.setX (x);
	this.setY (y);
} // Painel.prototype.movePara = function (x, y)

/** Move o painel para posição relativa
* @param ac_x acrecimo x
* @param ac_y acrecimo y
* @author Marcelo Coraça de Freitas
* @timestamp 14/11/2003
*/
Painel.prototype.move = function (ac_x, ac_y)
{

	this.defineLocalizacaoAtual ();
	this.movePara (this.X + ac_x, this.Y + ac_y);
} // Painel.prototype.move = function (ac_x, ac_y)

/* TODO: continuar barato da flutuação::

/** torna o painel flutuante e acompanhando a janela
* @param nomeObjeto nome do objeto (JavaScript) a ser usado
* @param distanciaDaEsquerda a distancia, em pixels, que o painel deve ficar do limite esquerdo da janela
* @param distanciaDoTopo a distancia, em pixels, que o painel deve ficar do topo
* @param intervaloParaAlinhar tempo que o painel levará para começar a escorregar na tela (em ms)
* @author Marcelo Coraça de Freitas
* @timestamp 14/11/2003
*/
Painel.prototype.flutuar = function (nomeObjeto, distanciaDaEsquerda, distanciaDoTopo, intervaloParaAlinhar)
{

	this.distanciaDaEsquerda = distanciaDaEsquerda;
	this.distanciaDoTopo = distanciaDoTopo;
	this.intervaloParaAlinhar = intervaloParaAlinhar;

	this.nomeObjeto = nomeObjeto;

	d = new Date ();
	this.ultimaInteracao = d.getTime ();

	window.setInterval ("Painel_flutuante ("+this.nomeObjeto+")", 10);
} // Painel.prototype.flutuar = function ()

	/** define se deve fazer o painel alinhar ou não
 * @return true caso sim e false caso não
 * @author Marcelo Coraça de Freitas
 * @timestamp 14/11/2003
 */
	Painel.prototype.iniciaAnimacao = function ()
	{
 this.defineLocalizacaoAtual ();

 d = new Date ();

 if (	this.getXRelativo () <= this.distanciaDaEsquerda + 1	&&
 this.getXRelativo () >= this.distanciaDaEsquerda - 1	&&
 this.getYRelativo () <= this.distanciaDoTopo + 1	&&
 this.getYRelativo () >= this.distanciaDoTopo - 1	)
 {
 this.ultimaInteracao = d.getTime ();
 return 0;
 }

 if (d.getTime () - this.ultimaInteracao < this.intervaloParaAlinhar)
 {
 return 0;
 }
 return 1;
	} // Painel.prototype.iniciaAnimacao = function ()

	/** Alinha o painel, animando-o.
 * @author Marcelo coraça de Freitas
 * @timestamp 18/11/2003
 */
	Painel.prototype.alinhar = function ()
	{
 d = new Date ();

 zX = this.distanciaDaEsquerda - this.getXRelativo ();
 zY = this.distanciaDoTopo - this.getYRelativo ();

 regX = parseInt (Math.abs (((zX - this.getXRelativo ()) / (janela.getWidth () / 3))));
 regY = parseInt (Math.abs (((zY - this.getYRelativo ()) / (janela.getHeight () / 3))));

 moveX = (zX > 1) ? ((zX % 10) + 1) : ((zX < 1) ? ((zX % 10) - 1) : 0);
 moveY = (zY > 1) ? ((zY % 10) + 1) : ((zY < 1) ? ((zY % 10) - 1) : 0);

 moveX *= (regX > 1) ? regX + 1: 1;
 moveY *= (regY > 1) ? regY + 1: 1;

 this.move (moveX, moveY);
	} // Painel.prototype.alinhar = function ()

/** Esconde painel
* @author Martcelo Coraça de Freitas
* @timestamp 14/11/2003
*/
Painel.prototype.esconde = function ()
{
this.objeto.style.visibility = "hidden"
} // Painel.prototype.esconde = function ()

/** Torna o painel visivel
* @author Marcelo Coraça de Freitas
* @timestamp 14/11/2003
*/
Painel.prototype.mostra = function ()
{
this.objeto.style.visibility = "visible"

} // Painel.prototype.mostra = function ()

/** Escuta movimentos da janela para animar o painel;
 * @param obj painel a ser animado
 * @author Marcelo Coraça de Freitas
 * @timestamp 18/11/2003
 */
function Painel_flutuante (obj)

{
if (obj.iniciaAnimacao ()){

 obj.alinhar ();
	}

} // Painel_flutuante (obj)

E ESSE É O SCRIPT MODIFICADO NAS LINHAS 15 A 20...