Problem with image scroller (between FF and Opera)

Hello everybody.

My name is Luc (Lodz, Poland), that’s my first post on this forum so please be lenient a little.

I have a problem with my JS script. I wrote a little sidebar with simple image scroller. Under Firefox everything is O.K. Images go up smoothly and every image that goes outside the scrollbar div top value is being removed from the beginning of images list and placed at the end of images queue.

Problem is with Opera: under that browser scroller doesn’t work properly. Images aren’t going smoothly up, but they goes down fastly and disappear.

I looked for solution a few days but I have no idea what’s going on with this script. ?

Below is my code (html, css and JS – maybe someone find solution). Thanks. ?

[code=php]
echo(‘<h2 id=”dane”>’);
echo(‘Anouk’);
echo(‘</h2>’);
echo(‘<div id=”dane”>’);
echo(‘<table>’);
echo(‘<tr>’);
echo(‘<td class=”first”>’);
echo(‘Name and surname:’);
echo(‘</td>’);
echo(‘<td class=”second”>’);
echo(‘Anouk Teeuwen’);
echo(‘</td>’);
echo(‘</tr>’);
echo(‘<tr>’);
echo(‘<td class=”first”>’);
echo(‘Nationality:’);
echo(‘</td>’);
echo(‘<td class=”second”>’);
echo(‘Holandia, Haga’);
echo(‘</td>’);
echo(‘</tr>’);
echo(‘<tr>’);
echo(‘<td class=”first”>’);
echo(‘Age:’);
echo(‘</td>’);
echo(‘<td class=”second”>’);
echo(’35 lat’);
echo(‘</td>’);
echo(‘</tr>’);
echo(‘<tr>’);
echo(‘<td class=”first”>’);
echo(‘Music:’);
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?subsite=site3″> >> powrót << </a></div>’);

echo(‘<div id=”bio”>’);
include_once($subpage.’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>’);
[/code]

CSS for div#imageScroller

[code=php]
/* 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;
}
[/code]

JS code:

[code=php]
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”;
}
}
[/code]

Also in #JavaScript _↴