[jQuery] An horizontal scroll disappear with Opera 9
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.