Jump to content


Thais Baio's Content

There have been 2 items by Thais Baio (Search limited from 27/04/2023)


Ordernar por                Order  

#1014750 Qndo Acaba O Conteúdo O "Scroll" Continua Rolando

Posted by Thais Baio on 11/11/2011, 15:10 in Javascript / DOM / AJAX / ECMAScript

qndo acaba o conteúdo o "scroll" continua rolando...como resolver isso?

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 =]



#1005681 Combo Box Estilo Do Site Peixe Urbano E Clickon

Posted by Thais Baio on 24/11/2010, 14:11 in HTML, CSS e Metodologias

Olá, alguém saberia me dizer como é feito o combo box (acho que é isso) que existe no site www.peixeurbano.com.br e www.clickon.com.br no topo, onde está escrito "As melhores Ofertas em São Paulo". Aí quando clica na setinha do lado de São Paulo ou em "ver mais cidades" aparece tipo um submenu.

Alguém sabe como isso é feito? Dá pra fazer só com div?? Alguém pode me ensinar a fazer??

Desde já obrigado!!!

=]

ninguem sabe????




IPB Skin By Virteq