código javascript num dá nem sinal de vida [RESOLVIDO]

eunix
(usa Debian)

Enviado em 19/11/2011 - 11:09h

Oi pessoal,

estou tentando personalizar a barra de rolagem de uma div, com as instruções dadas em um site http://livepipe.net/control/scrollbar. Vejo funcionar bunitinho no site, a barra rola bonitinho, sem crise, aí eu peguei os códigos em js, html e css, incorporei na minha página, abri no navegador e nada... Além disso, a tag "cursor: move;" do css faz que nem é com ela. Eu uso ubuntu 10.10 (consegui usar o 11.10 por quase um mês!), bluefish (não atualizado), com firefox 8, tudo bem atual, nos trinque.

Já usei o js em arquivo separado, junto, tentei alterar valores, baixei o código usado direto na página com o firebug, e esse primeiro identificador aí não tava no tutor da página... Mas ainda sim, não funcionou.

document.observe('dom:loaded',function(){

var scrollbar = new Control.ScrollBar('scrollbar_content','scrollbar_track');

$('scroll_down_50').observe('click',function(event){
scrollbar.scrollBy(-50);
event.stop();
});

$('scroll_up_50').observe('click',function(event){
scrollbar.scrollBy(50);
event.stop();
});

$('scroll_top').observe('click',function(event){
scrollbar.scrollTo('top');
event.stop();
});

$('scroll_bottom').observe('click',function(event){
//to animate a scroll operation you can pass true
//or a callback that will be called when scrolling is complete
scrollbar.scrollTo('bottom',function(){
if(typeof(console) != "undefined")
console.log('Finished scrolling to bottom.');
});
event.stop();
});

$('scroll_second').observe('click',function(event){
//you can pass a number or element to scroll to
//if you pass an element, it will be centered, unless it is
//near the bottom of the container
scrollbar.scrollTo($('second_subhead'));
event.stop();
});

$('scroll_third').observe('click',function(event){
//passing true will animate the scroll
scrollbar.scrollTo($('third_subhead'),true);
event.stop();
});

$('scroll_insert').observe('click',function(event){
$('scrollbar_content').insert('&lt;p><b>Inserted: ' + $('repeat').innerHTML + '</b>&lt;/p&gt;');
//you only need to call this if ajax or dom operations modify the layout
//this is automatically called when the window resizes
scrollbar.recalculateLayout();
event.stop();
});

});

Alguém pode me dar uma luz?
Agradecido desde já...

eunix
(usa Debian)

Enviado em 19/11/2011 - 11:12h

html:

<div id="scrollbar_container">
<div id="scrollbar_track"><div id="scrollbar_handle"></div></div>
<div id="scrollbar_content">...</div>
</div>


css:

#scrollbar_container {
position:relative;
width:500px;
}

#scrollbar_track {
position:absolute;
top:0;
rightright:0;
height:100%;
width:10px;
background-color:transparent;
cursor:move;
}

#scrollbar_handle {
width:10px;
background-color:#5c92e7;
cursor:move;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
opacity:0.9;
-moz-opacity:0.9;
}

#scrollbar_content {
overflow:hidden;
width:485px;
height:250px;
}

adri3d
(usa Arch Linux)

Enviado em 19/11/2011 - 12:45h

olhe o codigo fonte daquela pagina e vera

 <script src="/javascripts/all.js?1256410438" type="text/javascript"></script>

 

eu baixei esse codigo e fiz uma chama a ele assim

  <script src="all.js" type="text/javascript"></script>

 

e funcionou

eunix
(usa Debian)

Enviado em 20/11/2011 - 04:02h

Valeu mano, o tuto era em inglês eu devo ter deixado escapar alguma coisa...
Funcionou direitinho...