Postagens
Female
aqui está meu código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#dm-box-secretarias {position:relative; width:215px; height:160px; overflow:hidden;}
#dm-box-secretarias .dm-conteudo-secretarias {position:absolute; height:100%; margin-top:0;}
#dm-box-secretarias .dm-conteudo-secretarias > ul { list-style:none; width:215px; margin-top: 10px;}
#dm-box-secretarias .dm-conteudo-secretarias > ul li{ height:30px;}
#dm-box-secretarias .dm-conteudo-secretarias > ul.dm-itens-secretarias li a{font:12px/12px Arial, Helvetica, sans-serif;color:#000; border-bottom:1px dotted #999;display:block; text-decoration:none; background:url(dm-arrow-mini-bullet.png) no-repeat left; padding-left:10px; }
.dm-bg-next {background:url(dm-arrow-down.png) no-repeat;list-style:none;position:absolute;margin-left:80px; margin-top:-20px;}
.dm-bg-prev {background:url(dm-arrow-up.png) no-repeat;list-style:none;position:absolute;margin-left:80px;margin-top:-180px;}
.dm-prev, .dm-next {color:#fff;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
window.boxHeight = $(".dm-conteudo-secretarias > ul").height();
window.boxLiHeight = $(".dm-conteudo-secretarias > ul li").height();
window.boxQtdLi = (($(".dm-conteudo-secretarias > ul li").length));
window.boxMaxHeight = boxLiHeight * boxQtdLi;
if(boxQtdLi <= 6) {
$('.dm-next').css('display','none');
$('.dm-prev').css('display','none');
} // pra aparecer as setinhas somente qndo tiver mais de 6 itens
$('.dm-next').bind('click', function(){
var deslocamento = parseInt($('.dm-conteudo-secretarias > ul').css("margin-top")); // atribui o valor da margin-top à variavel deslocamento
$('.dm-conteudo-secretarias > ul').animate({'margin-top' : deslocamento - 2*boxLiHeight}, "easeOutBounce", function(){
window.boxAnimating = false; // pra descer de 2 em 2 itens
});
//if que eu nao consegui
if(deslocamento >= boxMaxHeight) {
alert("deslocamento")
}
});
$('.dm-prev').bind('click', function(){
var deslocamento = parseInt($('.dm-conteudo-secretarias > ul').css("margin-top")); // atribui o valor da margin-top à variavel deslocamento
if(deslocamento === 10)// para parar de rolar qndo voltar tudo
return;
$('.dm-conteudo-secretarias > ul').animate({'margin-top' : deslocamento + 2*boxLiHeight}, "easeOutBounce", function(){
window.boxAnimating = false; // para subir de 2 em 2 itens
});
});
});
</script>
</head>
<body>
<div id="dm-box-secretarias">
<div class="dm-conteudo-secretarias">
<ul class="dm-itens-secretarias">
<li> <a href="#"> dfsd </a> </li>
<li> <a href="#"> fsdfs </a> </li>
<li> <a href="#"> sdfffffff </a> </li>
<li> <a href="#"> sdfsdfsfdf </a> </li>
<li> <a href="#"> Osdf </a> </li>
<li> <a href="#"> fgdfgdfgdgdfg </a> </li>
<li> <a href="#"> dfgdfgfg </a> </li>
<li> <a href="#"> fggdfgfdgd </a> </li>
<li> <a href="#"> fgdgdfgdf </a> </li>
<li> <a href="#"> dfgdgdfg </a> </li>
<li> <a href="#"> Odfgggg </a> </li>
<li> <a href="#"> dfgggdfgdfgdfg </a> </li>
<li> <a href="#"> dfgdfgrred </a> </li>
</ul>
</div>
</div>
<ul>
<li class="dm-bg-prev"><a href="#" title="Anteriores" class="dm-prev">Volta</a></li>
<li class="dm-bg-next"><a href="#" title="Próximos" class="dm-next">Próximos</a></li>
</ul>
</body>
</html>
alguem sabe como resolver?
desde ja obrigado =]
