lion scrollbar

[edualbergaria 0]

olá pessoal,

 

sou novo com .js, então peço desculpas pela ignorância. (heheh)

 

estou fazendo uma página no meu site que carrega informações de um banco de dados. é uma página de agenda. porém gostaria de estilizar a barra de rolagem deste mural para que as informações da agenda não saiam do layout.

 

achei um plugin para estilizar, porém não consigo fazer ele funcionar, segue o link do plugin:

http://www.nikolaydyankov.com/lionbars/#

 

segui todos os passos, mas não sei o que significa o 4° passo:

 

Call .lionbars() on all elements that have scrollbars.

$('#box').lionbars();

 

como fazer isso?

 

alguém pode me ajudar?

abraços

[Diéssica 140]

Nesse caso

 $('#box').lionbars();

estamos chamando lionbars() (a scrollbar) no elemento com a div box (#box — código abaixo).

Essa função, por ser Javascript, deve ser chamada dentro da tag <script>.

 

<div id="box">
Elemento com lionbar
</div>

 

Aí é só adicionando os elementos que tu quer da mesma forma:

 

body

<div class="conteudo">
Conteúdo
</div>

 

head

<script="text/javascript">
 $('.conteudo').lionbars();
</script>

[edualbergaria 0]

olá, obrigado pela resposta.

 

fiz o que você me orientou, mas continua não funcionando.

 

será que é um erro no arquivo javascript?

 

vou tentar abaixar de novo.

 

obrigado

[Diéssica 140]

Como tu fez?

 

Baixou o arquivo Javascript e incluiu na página? Incluiu o CSS da barra de rolagem?

Se tu já fez isso, depois é só reler o Post #2.

 

O que tu pode ter esquecido também é do jQuery. Adiciona ele antes de </head> assim:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Ou então baixa e adiciona na página com um link pro arquivo no teu próprio servidor :)

 

Já tinha testado e funcionou, tenta rever os passos.

[edualbergaria 0]

realmente não funcionou, não sei o que é...

 

mas encontrei estas propriedades de css3

 

::-webkit-scrollbar {

width: 8px;

height: auto;

-webkit-border-radius: 16px;

}

::-webkit-scrollbar-track-piece {

background-color: #000;

-webkit-border-radius: 3px;

 

}

::-webkit-scrollbar-thumb:vertical {

background-color: #fff;

-webkit-border-radius: 20px;

}

 

funcionam bem no chrome, mas não rola no firefox, nem no ie

 

alguém conhece alguma que funcione nos outros 2?

 

abraço

[Diéssica 140]

Ué? Já desistiu?

 

Então...

Ainda não existe nenhuma solução crossbrowser pra personalização de scrollbar com CSS. Eu recomendo que tu vá estudando e testando outros códigos:

:seta: 10 jQuery Custom Scrollbar Plugins

:seta: jScrollPane

:seta: fleXscroll

:seta: Custom Scrollbar Plugin

 

Tenta estudar o que eu já te falei. Boa sorte :bye:

[edualbergaria 0]

heheh... é que to nisso há 3 dias e já to ficando com dor de cabeça.

 

heheheh

 

vou tentar mais um pouco.

 

inté