1 reply to this topic

[possamai]

Boa Tarde pessoal!

Achei um código na net, e arrumei ele pra minha necessidade. No FF ele funciona certinho, mais não sei pq diabos o IE não ta pegando o tamanho do conteúdo da DIV corretamente.
Segue o código:

var boxHeight = 300; //$('scroller').style.height.replace('px','')
var repeatHeight = $('scroller').scrollHeight;
var stopScroll = 0;
var x;

if (repeatHeight > boxHeight) {
	$('scroller').innerHTML = $('scroller').innerHTML + $('scroller').innerHTML;
}


function scrollMe() {
	clearTimeout(x);
	$('teste').innerHTML = $('scroller').scrollTop + " " + repeatHeight + " - " + boxHeight;
	
	if (stopScroll == 1) {
		return;
	}
	
	$('scroller').scrollTop = $('scroller').scrollTop + 1;
	
	if ($('scroller').scrollTop <= repeatHeight) {
		x = setTimeout("scrollMe()",40)
	
	} else {
		$('scroller').scrollTop = 0;
		x = setTimeout("scrollMe()",40);
	}
}

x = setTimeout("scrollMe()", 1000)

E aqui é minha div com o conteúdo.

<div id="teste">
	teste
</div>
<div onmouseover="stopScroll = 1;" onmouseout="stopScroll = 0; scrollMe();" id="scroller">
	<div align="center">
		<!-- Logo Garagens-->
		<div class="item_propaganda_garagem" style="border:1px solid #987243;">
			LISTA DE GARAGENS
		</div>
		<!-- Logo Garagens-->
	</div>
	
	<div align="center">
		<!-- Logo Garagens-->
		<div class="item_propaganda_garagem" style="border:1px solid #987243;">
			2
		</div>
		<!-- Logo Garagens-->
	</div>
	<div align="center">
		<!-- Logo Garagens-->
		<div class="item_propaganda_garagem" style="border:1px solid #987243;">
			3
		</div>
		<!-- Logo Garagens-->
	</div>
	<div align="center">
		<!-- Logo Garagens-->
		<div class="item_propaganda_garagem" style="border:1px solid #987243;">
			4
		</div>
		<!-- Logo Garagens-->
	</div>
	<div align="center">
		<!-- Logo Garagens-->
		<div class="item_propaganda_garagem" style="border:1px solid #987243;">
			5
		</div>
		<!-- Logo Garagens-->
	</div>
	<div align="center">
		<!-- Logo Garagens-->
		<div class="item_propaganda_garagem" style="border:1px solid #987243;">
			6
		</div>
		<!-- Logo Garagens-->
	</div>
	

</div>
&lt;script type="text/javascript" src="inc/roller.js"></script>

Bom.. criei uma DIV id=teste, pra verificar o pq tava dando errado. (Ele pulava a rolagem). E reparei que no IE, quando colocado um tanto de conteúdo maior, ele só pega o scrollHeight como 380, e por isso colocando mais conteúdo ele não rola inteiro. Com a quantidade de conteúdo que eu postei aqui a cima, o FF reconhece como 457 pixels enquanto o IE só reconhece 380.. independente se eu colocar mais ou não.

Sabem o que pode estar acontecendo?

Desde já agradeço a atenção.
Anderson Possamai




========== EDITANDO ===========
Só para vocês verem o que está acontecendo. Olhem:
FF:
 ff.JPG   101.84KB   3 downloads

IECA:
 ieca.JPG   99.46KB   3 downloads

Edição feita por: possamai, 13/07/2009, 11:41.

[possamai]

Eae pessoal!!! Tudo blzinha!

Despois de muitas tentativas e mudanças no código, consegui (aparentemente) fazer funcionar esse código ae emcima.

Pelo que vi.. o erro no IE, era porque ele não conseguia pegar o valor corretamente da div "SCROLLER", pois dentro dela havia várias divs internamente.
Funciono depois que fiz uma pequena alteração, colocando as divs internar, dentro de uma tabela sem tamanho. Isto é, a tabela aumenta conforme a quantidade das divs internar, e pelo que testei no IE 7, funcionou!

Não testei no IE 6, mais acredito que também funcionará.

Obrigado a todos, mesmo sem terem ajudado..
Espero que essa minha dúvida/resolução, ajude a quem precisar!

A idéia desse meu código é fazer um sistema de banners deslizantes, sem usa a tag <marquee> que já está em desuso, e não é aceita pelo W3C.


=-=-=-=-=-= EDIT =-=-=-=-=-=
Esqueci de colocar o código pra mostrar como ficou:

<div onmouseover="stopScroll = 1;" onmouseout="stopScroll = 0; scrollMe();" id="scroller">
	<table width="195" border="0">
		<tr>
			<td>
			
	<div align="center">
		<!-- Logo Garagens-->
		<div class="item_propaganda_garagem" style="border:1px solid #987243;">
			LISTA DE GARAGENS
		</div>
		<!-- Logo Garagens-->
	</div>

	... Conteúdo Variável ...
			
			</td>
		</tr>
	</table>
</div>

=-=-=-=-=-==-=-=-=-=-==-=-=

Até mais.
Possamai

Edição feita por: possamai, 13/07/2009, 11:43.