salve a tutti questo è il mio problema:
ho uno scroll menu verticale (trovato qui )che al movimento del mouse verso l'alto sul box che lo contiene,scorre all'indietro la lista di opzioni,piu lunga della grandezza del box che la contiene,mentre verso il basso,in avanti
ma
quando scorri verso il menu verso il basso,tende a far coincidere la fine del menu con l'offset top del box che la contiene,lasciando il box apparentemente vuoto(bruttissimo)
dato che non sono riuscito a trovare una documentazione molto esauriente sull'insieme edll'argomento,vorrei che qualcuno piu capace di me mi illuminasse,o magari mi offrisse uno spiraglio di soluzione...sto ammattendo...
lo script:
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Background color, mouseover and mouseout
var colorOver = '#31b8da';
var colorOut = '#1f1f1f';
//Padding, mouseover
var padLeft = '15px';
var padRight = '5px';
//Default Padding
var defpadLeft = $('#menu li a').css('paddingLeft');
var defpadRight = $('#menu li a').css('paddingRight');
//Animate the LI on mouse over, mouse out
$('#menu li').click(function () {
//Make LI clickable
window.location = $(this).find('a').attr('href');
}).mouseover(function (){
//mouse over LI and look for A element for transition
$(this).find('a')
.animate( { paddingLeft: padLeft, paddingRight: padRight}, { queue:false, duration:100 } )
.animate( { backgroundColor: colorOver }, { queue:false, duration:200 });
}).mouseout(function () {
//mouse oout LI and look for A element and discard the mouse over transition
$(this).find('a')
.animate( { paddingLeft: defpadLeft, paddingRight: defpadRight}, { queue:false, duration:100 } )
.animate( { backgroundColor: colorOut }, { queue:false, duration:200 });
});
//Scroll the menu on mouse move above the #sidebar layer
$('#box2').mousemove(function(e) {
//Sidebar Offset, Top value
var s_top = parseInt($('#box2').offset().top);
//Sidebar Offset, Bottom value
var s_bottom = parseInt($('#box2').height() + s_top);
//Roughly calculate the height of the menu by multiply height of a single LI with the total of LIs
var mheight = parseInt($('#menu li').height() * $('#menu li').length);
//I used this coordinate and offset values for debuggin
$('#debugging_mouse_axis').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
$('#debugging_status').html(Math.round(((s_top - e.pageY)/100) * mheight / 2));
//Calculate the top value
//This equation is not the perfect, but it 's very close
var top_value = Math.round(( (s_top - e.pageY) /100) * mheight / 2);
//Animate the #menu by chaging the top value
$('#menu').animate({top: top_value}, { queue:false, duration:2000});
});
});
</script>
<style>
#box2 {
overflow:hidden;
background-color:#eee;
}
#menu {
position:relative;
list-style:none;
padding-top:10px;
padding-bottom:10px;
margin:0px;
top:0px;
position:relative;
height:100%;
width:100%;
}
#menu li {
width:100%;
padding-top:1px;
text-align:left;
display:block;
cursor:hand;
cursorointer;
}
#menu li a {
background:url() repeat #1f1f1f;
width:100%;
color:#ddd;
font-family:helvetica, arial, verdana;
font-size:9px;
font-weight:900;
display:inline;
padding:5px;
text-decoration:none;
}
</style>
esempio di tag html coinvolti:
<body>
<div id="cont">
<div id="box2" >
<ul id="menu">[*]uno[*]due[/list]
</div>
</div>
</body>
Rispondi quotando