Problem ze scrollerem zdjęć pomiędzy FF i Operą. Opcje

[dj.bobas]

Witajcie, mam następujący problem.
Napisałem ostatnio scroller na zrobionej przez siebie stronie. Scroller działa na takiej zasadzie, że po odpaleniu podstrony danego wykonawcy (strona dotyczy muzyki) pojawia się boczny div, w którym zrobiona jest galeria. Zdjęcia w niej są różnej wielkości. Zastosowałem pozycjonowanie relatywne, żeby scroller nie był umieszczony w innych miejscach w zależności od przeglądarki, lecz w tym samym.

Jednak coś jest nie tak. W przeglądarce FF scroller działa idealnie - zdjęcia przesuwają się w górę w ciągłym okresie czasu. W przeglądarce Opera zaś scroller działa źle - zdjęcia w szybkim tempie zjeżdżają w dół i się już nie pojawiają.

Nie wiem czym to może być spowodowane.

Proszę o jakiekolwiek sugestie.

strona dostępna pod adresem http://kolos.math.uni.lodz.pl/~lukusm/test...hp?podstr=site3 (od razu zaznaczam, że nie jest jeszcze dopracowana co do wyświetlania w różnych przeglądarkach)

Jeszcze może dla ułatwienia wkleję kod html, css i js dotyczący tej funkcjonalności.

Kod PHP (cały wczytywany do div id="content"):

[PHP] pobierz, plaintext 
echo('<h2 id="dane">');
		echo('Anouk');
	echo('</h2>');
	echo('<div id="dane">');
		echo('<table>');
			echo('<tr>');
				echo('<td class="first">');
				echo('Imię i nazwisko:');
				echo('</td>');
				echo('<td class="second">');
				echo('Anouk Teeuwen');
				echo('</td>');
			echo('</tr>');
			echo('<tr>');
				echo('<td class="first">');
				echo('Kraj pochodzenia:');
				echo('</td>');
				echo('<td class="second">');
				echo('Holandia, Haga');
				echo('</td>');
			echo('</tr>');
			echo('<tr>');
				echo('<td class="first">');
				echo('Wiek:');
				echo('</td>');
				echo('<td class="second">');
				echo('35 lat');
				echo('</td>');
			echo('</tr>');
			echo('<tr>');
				echo('<td class="first">');
				echo('Gatunek muzyki:');
				echo('</td>');
				echo('<td class="second">');
				echo('rock, pop, soul');
				echo('</td>');
			echo('</tr>');
			echo('<tr>');
				echo('<td class="first">');
				echo('Wytwórnia:');
				echo('</td>');
				echo('<td class="second">');
				echo('EMI');
				echo('</td>');
			echo('</tr>');
		echo('</table>');
	echo('</div>');
 
	echo('<div id="photoAnouk">');
		echo ('<img src="images/anouk/anouk.jpg" alt="Anouk" id="anouk" />');
	echo('</div>');
 
	echo('<div id="back"><a href="index.php?podstr=site3"> >> powrót << </a></div>');
 
	echo('<div id="bio">');
		include_once($podstrona.'Bio.php');
	echo('</div>');
 
	echo('<div id="imageScroller1">');
	echo('<img src="images/anouk/1.jpg" alt="" id="anoukno1" />');
	echo('<img src="images/anouk/2.jpg" alt="" id="anoukno2" />');
	echo('<img src="images/anouk/3.jpg" alt="" id="anoukno3" />');
	echo('<img src="images/anouk/4.jpg" alt="" id="anoukno4" />');
	echo('<img src="images/anouk/5.jpg" alt="" id="anoukno5" />');
	echo('<img src="images/anouk/6.jpg" alt="" id="anoukno6" />');
	echo('<img src="images/anouk/7.jpg" alt="" id="anoukno7" />');
	echo('</div>');
[PHP] pobierz, plaintext 

Kod css:

[PHP] pobierz, plaintext 
/* scroller anouk */
div#content #imageScroller1 {
	position: relative;
	width: 280px;
	height: 665px;
	overflow:hidden;
	background-color: white;
	border: 3px solid;
	left: 534px;
	top: -658px;
	margin-bottom: -658px;
}
 
div#content #imageScroller1 img,  div#content #imageScroller2 img, div#content #imageScroller3 img, div#content #imageScroller4 img{
	width: 260px;
	display: block;
	position: relative;
	left: 10px;
	top: 10px;
}
 
		/* zdjecia anouk */
div#content #imageScroller1 img#anoukno2 {
	/*top: 373px;*/
	top: 20px;
}
div#content #imageScroller1 img#anoukno3 {
	/*top: 556px;*/
	top: 30px;
}
div#content #imageScroller1 img#anoukno4 {
	/*top: 772px;*/
	top: 40px;
}
div#content #imageScroller1 img#anoukno5 {
	/*top: 1041px;*/
	top: 50px;
}
div#content #imageScroller1 img#anoukno6 {
	/*top: 1439px;*/
	top: 60px;
}
div#content #imageScroller1 img#anoukno7 {
	/*top: 1797px;*/
	top: 70px;
}
[PHP] pobierz, plaintext 

Kod java script:

[PHP] pobierz, plaintext 
function scrollAnoukPhotos() {
	var tabImg = document.getElementById('imageScroller1').getElementsByTagName('img');
	for (var i = 0; i<tabImg.length; i++) {
		imgHeight = tabImg[0].offsetHeight;
		if(tabImg[0].offsetTop <= -imgHeight) {
				img1poz = tabImg[1].offsetTop;
				img1height = tabImg[1].offsetHeight;
				img2poz = tabImg[2].offsetTop;
				img2height = tabImg[2].offsetHeight;
				img3poz = tabImg[3].offsetTop;
				img3height = tabImg[3].offsetHeight;
				img4poz = tabImg[4].offsetTop;
				img4height = tabImg[4].offsetHeight;
				img5poz = tabImg[5].offsetTop;
				img5height = tabImg[5].offsetHeight;
				img6poz = tabImg[6].offsetTop;
				img6height = tabImg[6].offsetHeight;
 
				pierwszeFoto = document.getElementById('imageScroller1').firstChild;
				usuwany = document.getElementById('imageScroller1').removeChild(pierwszeFoto);
				tab2img = document.getElementById('imageScroller1').getElementsByTagName('img');
				tabImg[0].style.top = img1poz+"px";
				tabImg[1].style.top = img2poz+"px";
				tabImg[2].style.top = img3poz+"px";
				tabImg[3].style.top = img4poz+"px";
				tabImg[4].style.top = img5poz+"px";
				tabImg[5].style.top = img6poz+"px";
				document.getElementById('imageScroller1').appendChild(usuwany);
				tabImg[6].style.top = img6poz + img6height + 10 + "px";
		}
		tabImg[0].style.top = (tabImg[0].offsetTop - 1) + "px";
		tabImg[1].style.top = (tabImg[0].offsetTop + 10) + "px";
		tabImg[2].style.top = (tabImg[0].offsetTop + 20) + "px";
		tabImg[3].style.top = (tabImg[0].offsetTop + 30) + "px";
		tabImg[4].style.top = (tabImg[0].offsetTop + 40) + "px";
		tabImg[5].style.top = (tabImg[0].offsetTop + 50) + "px";
		tabImg[6].style.top = (tabImg[0].offsetTop + 60) + "px";
	}
}
[PHP] pobierz, plaintext 

Mam nadzieję, że ktokolwiek będzie miał jakikolwiek pomysł, aby ten problem rozwiązać. Z GÓRY DZIĘKI.

Ten post edytował dj.bobas 8.08.2010, 11:54:40