Hi all, I've done an horizontal scroll whiwh works with FF2, IE7, Safari3 but with Opera9 the list disappear! I reaaly don't understand what's happening. This is a simplified test code mostly generated with the inspector DOM :
--------------------------------------------------------------------------------------------------------- <HTML xmlns="http://www.w3.org/1999/xhtml";> <HEAD> <META content="text/html; charset=ISO-8859-1" http-equiv="Content- Type"/> <TITLE>jQuery mon album photo</TITLE> <style> #album {width: 800px; height: 700px; background-color: #cccccc;} #Nav {margin: auto; width: 180px;} #NavPrev {padding:0pt 0pt 0pt 3px; width:87px; float:left;} #NavPrev img {visibility:hidden; opacity:0;} #NavNext {padding:0pt 3px 0pt 0pt; width:87px; float:right; text- align:right;} #HiddenNav {margin:0pt; padding:0pt; width:540px;} ul {margin:0pt; padding:3px 0pt; width:180px; float:left; position:relative; list-style-type:none;} li {padding:3px; width:54px; height:54px; float:left;} li img {border:2px solid rgb(255, 255, 255); vertical-align:bottom;} </style> <SCRIPT type="text/javascript" src="jquery.js"></script> <SCRIPT type="text/javascript"> //jQuery(document).ready(function() { jQuery(window).load(function() { var $next = $("#NavNext img"); var $prev= $("#NavPrev img").css({visibility:"hidden"}).fadeTo("fast", 0); var index = 1; var wUL = $("#Nav ul").width(); $next.click(function(){ if (index < $("#HiddenNav ul").size()) { index += 1; if (index != 1) $prev.css({visibility:"visible"}).fadeTo("fast", 1); if (index == $("#HiddenNav ul").size()) $(this).fadeOut("fast"); $("#HiddenNav ul").animate({"right":"+="+wUL}, "slow"); } }); $prev.click(function(){ if (index > 1) { index -= 1; if (index != $("#HiddenNav ul").size()) $next.fadeIn("fast"); if (index == 1) $(this).fadeTo("fast", 0, function(){$ (this).css({visibility:"hidden"});}); $("#HiddenNav ul").animate({"right":"-="+wUL}, "slow"); } }); }); </script> </HEAD> <BODY> <DIV id="album"> <DIV id="Nav"> <DIV id="NavPrev"> <IMG src="img/MainLeft.png"/> </DIV> <DIV id="NavNext"> <IMG src="img/MainRight.png"/> </DIV> <DIV id="HiddenNav"> <UL> <LI><IMG src="thumbnail/EOS30D3037.jpg"/></LI> <LI><IMG src="thumbnail/EOS30D3045.jpg"/></LI> <LI><IMG src="thumbnail/EOS30D3058.jpg"/></LI> <LI><IMG src="thumbnail/EOS30D3061.jpg"/></LI> <LI><IMG src="thumbnail/EOS30D3225.jpg"/></LI> <LI><IMG src="thumbnail/EOS30D3229.jpg"/></LI> <LI><IMG src="thumbnail/EOS30D3242.jpg"/></LI> <LI><IMG src="thumbnail/EOS30D3246.jpg"/></LI> <LI><IMG src="thumbnail/EOS30D3258.jpg"/></LI> </UL> <UL> <LI><IMG src="thumbnail/EOS30D3272.jpg"/></LI> <LI><IMG src="thumbnail/EOS30D3273.jpg"/></LI> <LI><IMG src="thumbnail/EOS30D3322.jpg"/></LI> <LI><IMG src="thumbnail/EOS30D3367.jpg"/></LI> <LI><IMG src="thumbnail/EOS30D3370.jpg"/></LI> <LI><IMG src="thumbnail/EOS30D3393.jpg"/></LI> <LI><IMG src="thumbnail/EOS30D3402.jpg"/></LI> <LI><IMG src="thumbnail/EOS30D3429.jpg"/></LI> <LI><IMG src="thumbnail/EOS30D3434.jpg"/></LI> </UL> <UL> <LI><IMG src="thumbnail/EOS30D3465.jpg"/></LI> <LI><IMG src="thumbnail/EOS30D3475.jpg"/></LI> <LI><IMG src="thumbnail/EOS30D3487.jpg"/></LI> <LI><IMG src="thumbnail/EOS30D3490.jpg"/></LI> <LI><IMG src="thumbnail/EOS30D3497.jpg"/></LI> <LI><IMG src="thumbnail/EOS30D3503.jpg"/></LI> <LI><IMG src="thumbnail/EOS30D3514.jpg"/></LI> </UL> </DIV> </DIV> </DIV> </BODY> </HTML> --------------------------------------------------------------------------------------------------------- or you can check it at http://bb.public.free.fr/css/jquery/oNavTest.html Do you know how to solve it or what's the reason? bbp.
