Skip to content

Instantly share code, notes, and snippets.

@dirceu
Created July 23, 2010 21:44
Show Gist options
  • Save dirceu/488082 to your computer and use it in GitHub Desktop.
Save dirceu/488082 to your computer and use it in GitHub Desktop.
jQuery.noConflict(); // necessario para nao conflitar com o MooTools
// jQuery(document).ready faz com que a funcao callback seja executada
// assim que o DOM estiver pronto. Eh melhor que onload porque nao precisa
// esperar por imagens e outros assets demorados pra carregar.
jQuery(document).ready(function() {
var maxWidth = 905; // max width da barra de rolagem
var container = jQuery('#block-wrap'), // div com overflow:hidden
handler = jQuery('#tl-nav-current-bk'), // botao de rolagem
maxHandlerPos = maxWidth-55, // posicao maxima do botao
minHandlerPos = 35; // posicao minima do botao
// deixa o botao na posicao minima por default
handler.css('margin-left', minHandlerPos);
// transforma a barra de rolagem num objeto Slider da jQuery UI
jQuery('#tl-nav').slider({
min: 0,
max: maxWidth,
handle: '#tl-nav-current-bk',
slide: function (event, ui) {
// o botao de rolagem tem 180px, entao precisamos levar
// em consideracao essa medida ao setar as posicoes
var containerPos = ui.value-125, // 180/2 + 35
handlerPos = ui.value-90; // 180/2
if(ui.value < maxHandlerPos) { // o botao so se move ate certo ponto
// e a posicao minima nao pode ser menor que minHandlerPos
if(handlerPos < minHandlerPos) handlerPos = minHandlerPos;
// muda a margem pra mudar a posicao do botao, usando
// velocidade 0
handler.animate({'margin-left':handlerPos}, 0);
}
// faz o scroll no div com overflow:hidden
container.scrollLeft(containerPos);
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment