weird scroll behaivour on chrome/ie

[genia]

hello,
i have a weird problem with jquery tools - scrollable - http://flowplayer.org/tools/scrollable/index.html

the scrolling works perfect on FF but on chrome or ie the first run acts weird without the animation.and only on the second time it works as it should.

take a look:
http://joovoo.net/yahav3/gallery.php

any suggestions on how to solve this?

[jscheuer1]

I think it's partly because of the direction rtl of the page. Anyways, I found that if I reversed some things it worked out. In the order in which they appear in the page's source code, first change the .items div selector's float to left:

<style type="text/css">
.scrollable {
    
	position:relative;
	overflow:hidden;
	width: 904px;
	height:260px;
    margin-top:112px;
    margin-bottom:25px;
}
.scrollable .items {
   	width:20000em;
	position:absolute;
}
.items div {
	float:left;
	width:904px;
}
.scrollable img {
	float:right;
	padding:0px;
	border:1px solid #000;
	width:126px;
	height:126px;
}
</style>

Next, reverse the order of the .items child divisions (last is now first, first is now last - I'm only assuming this will work with more than two, should though):

<div class="scrollable">   
<div class="items">
<div>
<a href="#"><img src="gal_images/p15.jpg"/></a>
</div>
<div>
<a href="#"><img src="gal_images/p01.jpg"/></a>
<a href="#"><img src="gal_images/p02.jpg"/></a>
<a href="#"><img src="gal_images/p03.jpg"/></a>
<a href="#"><img src="gal_images/p04.jpg"/></a>
<a href="#"><img src="gal_images/p05.jpg"/></a>
<a href="#"><img src="gal_images/p06.jpg"/></a>
<a href="#"><img src="gal_images/p07.jpg"/></a>
<a href="#"><img src="gal_images/p08.jpg"/></a>
<a href="#"><img src="gal_images/p09.jpg"/></a>
<a href="#"><img src="gal_images/p10.jpg"/></a>
<a href="#"><img src="gal_images/p11.jpg"/></a>
<a href="#"><img src="gal_images/p12.jpg"/></a>
<a href="#"><img src="gal_images/p13.jpg"/></a>
<a href="#"><img src="gal_images/p14.jpg"/></a>
</div>
</div>
</div>

Next reverse the the navigation links (the prev link becomes the next link and visa versa, and then their order on the page is reversed):

<a class="prev browse left">next</a>
<a class="next browse right">prev</a>

Finally, after initializing the scroller, shift it immediately to its end which is now really the beginning -

Replace the redundant*:

<script>
 $(document).ready(function(){
$(function() {
	$(".scrollable").scrollable();

})});
</script>

with:

<script>
$(function(){
	$(".scrollable").scrollable();
	$(".scrollable").data('scrollable').end(0);
});
</script>

*I say redundant because:

$(document).ready(function(){

and:

$(function(){

mean the same thing. The latter is shorthand for the former.

[genia]

jscheuer1, Thank you ver very very much.
changing the order of the divs and scrolling the scroller to the end after the page loads solved it.
(if u r intersted you can see the changes at the same link.)

thank you very much again.