Barra de Rolagem Jquery

[Videres 3]

Boa tarde pessoas,

A bronca é a seguinte, estou tentando criar uma div com barra de rolagem personalizada o negocio ta tenso.

 

Já tentei ver direto no CSS:

 

scrollbar-arrow-color:#000000;
scrollbar-3dlight-color:#000000;
scrollbar-highlight-color:#FF0000;
scrollbar-face-color:#FFFFFF;
scrollbar-shadow-color:#0000FF;
scrollbar-darkshadow-color:#FFFF00;
scrollbar-track-color:#00FF00;

 

Mas so funfa no IE...

 

Agora estou tentando com jquery com o uso da biblioteca jScrollPane.

Já importei as bibliotecas:

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.em.js"></script>
<script type="text/javascript" src="js/jScrollPane.js"></script>

 

Mas estou com dificuldade para construir o restante, estou pesquisando a um tempo e ainda não encontrei uma explicacao fileuzis...

 

Já fui na referencia tentei fazer algo e n consegui:

$(document).ready(function(){
$('#contentpf').jScrollPane();


}); 

 

talvez devido ao meu pouco de conhecimento de jquery.

 

 

Se alguem puder me ajudar fico agradecido, caso descubra algo estarei postando aqui como resolvi..

 

abraço

[Ted k' 126]

Tem como colocar online para ver se existe algum erro de chamada nesse JS?

[Videres 3]

Tem como colocar online para ver se existe algum erro de chamada nesse JS?

 

 

Oi Ted,

Pow consegui resolver a bronca da barra de rolagem...

Estava fazendo toda a chamada correta, a bronca era que n tinha criado as divs com a barra de rolagem.. digamos q eu estava com todo o codigo pronto mas n tinha onde aplicar.

 

Resolvi da Seguinte forma.

 

 

  //Import das bibliotecas.
   <link href="css/jScrollPane.css" type="text/css" rel="stylesheet" />

   <script type="text/javascript" src="js/jquery.js"></script>   
   <script type="text/javascript" src="js/jquery.mousewheel.js"></script>
   <script type="text/javascript" src="js/jScrollPane.js"></script>


    <script type="text/javascript">
	$(function() {

		$('#content').jScrollPane(); //aplicando as funcoes de barra de rolagem na div '#content'...

	});


   </script>

 

Tratamento das barras nas Divs:

 

<div class="principal"> 
       <div tabindex="0" style="height: 496px; width: 507px;" class="jScrollPaneContainer jScrollPaneScrollable" >
       	<div  id="content" class="scroll-pane">


           	<h3 class="titulo_content">Apresentação </h3>

               <p class="text_content">
                   Text text text 
                   ...........................

               </p>

           </div>  

           <div style="height: 0px;" class="jScrollCap jScrollCapTop"></div>

           <div style="width: 10px; height: 496px; top: 0px; " class="jScrollPaneTrack">
               <div style="width: 10px; height: 25px; top: 0px; " class="jScrollPaneDrag">
                   <div style="width: 10px;" class="jScrollPaneDragTop"></div>
                   <div style="width: 10px;" class="jScrollPaneDragBottom"></div>
               </div>
           </div>
           <div style="height: 0px;" class="jScrollCap jScrollCapBottom"></div>


   	</div>

   </div>

 

CSS:

 

 

.jScrollPaneContainer {
position: relative;
overflow: hidden;
z-index: 1;
}

.jScrollPaneTrack {
position: absolute;
cursor: pointer;
right: 0;
top: 0;
width:50px;
height: 100%;

background: #f8cc97;
z-index:5;
}
.jScrollPaneDrag {
position: absolute;
background: #673514;
cursor: pointer;
overflow: hidden;
}
.jScrollPaneDragTop {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
.jScrollPaneDragBottom {
position: absolute;
bottom: 0;
left: 0;
overflow: hidden;
}
a.jScrollArrowUp {
display: block;
position: absolute;
z-index: 1;
top: 0;
right: 0;
text-indent: -2000px;
overflow: hidden;

height: 9px;
}
a.jScrollArrowUp:hover {

}

a.jScrollArrowDown {
display: block;
position: absolute;
z-index: 1;
bottom: 0;
right: 0;
text-indent: -2000px;
overflow: hidden;

height: 9px;
}
a.jScrollArrowDown:hover {

}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {

}

 

Fiz dessa maneira... atraves de muitas pesquisas... asuhsauhsau

N sei se é da melhor forma.. mas aqui ta funfando perfeitamente....

 

Vlws pela força Ted... Deixei ai o Codigo bem mastigadinho caso alguem apareça com a mesma dificuldade.. asuhasuhsauhasuhsa

 

Ah! Minha bronca foi mais no finalzinho, pq n criava as div's que iriam forma as barras de rolagem.

 

 

abraço