Barra de rolagem

Drackula · Agosto 17, 2006

Eu tenho uma barra de rolagem em um DIV que está funcionando bem na página, mas na hora que eu tento colocar outra barra na mesma página dá um erro e as duas deixam de funcionar.

Teria alguma forma de usar o mesmo script para as duas barras de rolagem?

Segue abaixo a página e o script.

<html>

<head>

<title>Teste</title>

#content {POSITION: absolute}

</STYLE>

</head>

A onda de calor que atingiu o país durante este inverno fez cair a umidade relativa do ar nos últimos dias. Segundo informou o Inmet <br>

<br>

(Instituto Nacional de Meteorologia), a menor umidade do Estado de São Paulo desta terça-feira (25) foi de 18%, registrada em Presidente Prudente (565 km a oeste de São Paulo).

Umidades relativas do ar abaixo de 20% caracterizam "nível de alerta", segundo informaram os meteorologistas do Inmet.

<br>

Na capital, o CGE (Centro de Gerenciamento de Emergências) da prefeitura registrou umidade mínima de 17% em Capela do Socorro (zona sul), nesta terça. Nas regiões de Perus (zona norte), Vila Prudente (zona leste) e Campo Limpo (zona sul), a umidade ficou em 19%.

Medição feita por aparelhos do aeroporto <br>

<br>

de Ribeirão Preto (314 km a norte de São Paulo) indicaram nesta terça um índice de umidade de 12%. Segundo o Inmet, a precisão dos aparelhos instalados nos aeroportos é menor que as dos institutos de meteorologia.

Os índices de umidade relativa do ar deverão subir no fim de semana, com a chegada de uma frente fria vinda do Sul do país. O Inmet prevê queda acentuada de temperatura em São Paulo e na maior parte do Estado. Também há previsão de chuvas.

</div></div>

A onda de calor que atingiu o país durante este inverno fez cair a umidade relativa do ar nos últimos dias. Segundo informou o Inmet <br>

<br>

(Instituto Nacional de Meteorologia), a menor umidade do Estado de São Paulo desta terça-feira (25) foi de 18%, registrada em Presidente Prudente (565 km a oeste de São Paulo).

Umidades relativas do ar abaixo de 20% caracterizam "nível de alerta", segundo informaram os meteorologistas do Inmet.

<br>

Na capital, o CGE (Centro de Gerenciamento de Emergências) da prefeitura registrou umidade mínima de 17% em Capela do Socorro (zona sul), nesta terça. Nas regiões de Perus (zona norte), Vila Prudente (zona leste) e Campo Limpo (zona sul), a umidade ficou em 19%.

Medição feita por aparelhos do aeroporto <br>

<br>

de Ribeirão Preto (314 km a norte de São Paulo) indicaram nesta terça um índice de umidade de 12%. Segundo o Inmet, a precisão dos aparelhos instalados nos aeroportos é menor que as dos institutos de meteorologia.

Os índices de umidade relativa do ar deverão subir no fim de semana, com a chegada de uma frente fria vinda do Sul do país. O Inmet prevê queda acentuada de temperatura em São Paulo e na maior parte do Estado. Também há previsão de chuvas.

</div></div>

</body>

</html>

O script abaixo está gravado em um arquivo com o nome scroll.js

var upH = 5; // Height of up-arrow

var upW = 8; // Width of up-arrow

var downH = 5; // Height of down-arrow

var downW = 8; // Width of down-arrow

var dragH = 5; // Height of scrollbar

var dragW = 8; // Width of scrollbar

var scrollH = 180; // Height of scrollbar

var speed = 4; // Scroll speed

// And now... go to the bottom of the page...

// Browser detection

var dom = document.getElementById ? true:false;

var nn4 = document.layers ? true:false;

var ie4 = document.all ? true:false;

var mouseY; // Mouse Y position onclick

var mouseX; // Mouse X position onclick

var clickUp = false; // If click on up-arrow

var clickDown = false; // If click on down-arrow

var clickDrag = false; // If click on scrollbar

var clickAbove = false; // If click above scrollbar

var clickBelow = false; // If click below scrollbar

var timer = setTimeout("",500); // Repeat variable

var upL; // Up-arrow X

var upT; // Up-arrow Y

var downL; // Down-arrow X

var downT; // Down-arrow Y

var dragL; // Scrollbar X

var dragT; // Scrollbar Y

var rulerL; // Ruler X

var rulerT; // Ruler Y

var contentT; // Content layer Y;

var contentH; // Content height

var contentClipH; // Content clip height

var scrollLength; // Number of pixels scrollbar should move

var startY; // Keeps track of offset between mouse and span

// Mousedown

function down(e){

if((document.layers && e.which!=1) || (document.all && event.button!=1)) return true; // Enables the right mousebutton

getMouse(e);

startY = (mouseY - dragT);

// If click on up-arrow

if(mouseX >= upL && (mouseX <= (upL + upW)) && mouseY >= upT && (mouseY <= (upT + upH))){

clickUp = true;

return scrollUp();

}

// Else if click on down-arrow

else if(mouseX >= downL && (mouseX <= (downL + downW)) && mouseY >= downT && (mouseY <= (downT + downH))){

clickDown = true;

return scrollDown();

}

// Else if click on scrollbar

else if(mouseX >= dragL && (mouseX <= (dragL + dragW)) && mouseY >= dragT && (mouseY <= (dragT + dragH))){

clickDrag = true;

return false;

}

else if(mouseX >= dragL && (mouseX <= (dragL + dragW)) && mouseY >= rulerT && (mouseY <= (rulerT + scrollH))){

// If click above drag

if(mouseY < dragT){

clickAbove = true;

clickUp = true;

return scrollUp();

}

// Else click below drag

else{

clickBelow = true;

clickDown = true;

return scrollDown();

}

// If no scrolling is to take place

else{

return true;

}

// Drag function

function move(e){

if(clickDrag && contentH > contentClipH){

getMouse(e);

dragT = (mouseY - startY);

if(dragT < (rulerT))

dragT = rulerT;

if(dragT > (rulerT + scrollH - dragH))

dragT = (rulerT + scrollH - dragH);

contentT = ((dragT - rulerT)*(1/scrollLength));

contentT = eval('-' + contentT);

moveTo();

// So ie-pc doesn't select gifs

if(ie4)

return false;

}

function up(){

clearTimeout(timer);

// Resetting variables

clickUp = false;

clickDown = false;

clickDrag = false;

clickAbove = false;

clickBelow = false;

return true;

}

// Reads content layer top

function getT(){

if(ie4)

contentT = document.all.content.style.pixelTop;

else if(nn4)

contentT = document.contentClip.document.content.top;

else if(dom)

contentT = parseInt(document.getElementById("content").style.top);

}

// Reads mouse X and Y coordinates

function getMouse(e){

if(ie4){

mouseY = event.clientY + document.body.scrollTop;

mouseX = event.clientX + document.body.scrollLeft;

}

else if(nn4 || dom){

mouseY = e.pageY;

mouseX = e.pageX;

}

// Moves the layer

function moveTo(){

if(ie4){

document.all.content.style.top = contentT;

document.all.ruler.style.top = dragT;

document.all.drag.style.top = dragT;

}

else if(nn4){

document.contentClip.document.content.top = contentT;

document.ruler.top = dragT;

document.drag.top = dragT;

}

else if(dom){

document.getElementById("content").style.top = contentT + "px";

document.getElementById("drag").style.top = dragT + "px";

document.getElementById("ruler").style.top = dragT + "px";

}

// Scrolls up

function scrollUp(){

getT();

if(clickAbove){

if(dragT <= (mouseY-(dragH/2)))

return up();

}

if(clickUp){

if(contentT < 0){

dragT = dragT - (speed*scrollLength);

if(dragT < (rulerT))

dragT = rulerT;

contentT = contentT + speed;

if(contentT > 0)

contentT = 0;

moveTo();

timer = setTimeout("scrollUp()",25);

}

return false;

}

// Scrolls down

function scrollDown(){

getT();

if(clickBelow){

if(dragT >= (mouseY-(dragH/2)))

return up();

}

if(clickDown){

if(contentT > -(contentH - contentClipH)){

dragT = dragT + (speed*scrollLength);

if(dragT > (rulerT + scrollH - dragH))

dragT = (rulerT + scrollH - dragH);

contentT = contentT - speed;

if(contentT < -(contentH - contentClipH))

contentT = -(contentH - contentClipH);

moveTo();

timer = setTimeout("scrollDown()",25);

}

return false;

}

// reloads page to position the layers again

function reloadPage(){

location.reload();

}

// Preload

function eventLoader(){

if(ie4){

// Up-arrow X and Y variables

upL = document.all.up.style.pixelLeft;

upT = document.all.up.style.pixelTop;

// Down-arrow X and Y variables

downL = document.all.down.style.pixelLeft;

downT = document.all.down.style.pixelTop;

// Scrollbar X and Y variables

dragL = document.all.drag.style.pixelLeft;

dragT = document.all.drag.style.pixelTop;

// Ruler Y variable

rulerT = document.all.ruler.style.pixelTop;

// Height of content layer and clip layer

contentH = parseInt(document.all.content.scrollHeight);

contentClipH = parseInt(document.all.contentClip.style.height);

}

else if(nn4){

// Up-arrow X and Y variables

upL = document.up.left;

upT = document.up.top;

// Down-arrow X and Y variables

downL = document.down.left;

downT = document.down.top;

// Scrollbar X and Y variables

dragL = document.drag.left;

dragT = document.drag.top;

// Ruler Y variable

rulerT = document.ruler.top;

// Height of content layer and clip layer

contentH = document.contentClip.document.content.clip.bottom;

contentClipH = document.contentClip.clip.bottom;

}

else if(dom){

// Up-arrow X and Y variables

upL = parseInt(document.getElementById("up").style.left);

upT = parseInt(document.getElementById("up").style.top);

// Down-arrow X and Y variables

downL = parseInt(document.getElementById("down").style.left);

downT = parseInt(document.getElementById("down").style.top);

// Scrollbar X and Y variables

dragL = parseInt(document.getElementById("drag").style.left);

dragT = parseInt(document.getElementById("drag").style.top);

// Ruler Y variable

rulerT = parseInt(document.getElementById("ruler").style.top);

// Height of content layer and clip layer

contentH = parseInt(document.getElementById("content").offsetHeight);

contentClipH = parseInt(document.getElementById("contentClip").offsetHeight);

document.getElementById("content").style.top = 0 + "px";

}

// Number of pixels scrollbar should move

scrollLength = ((scrollH-dragH)/(contentH-contentClipH));

// Initializes event capturing

if(nn4){

document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);

window.onresize = reloadPage;

}

document.onmousedown = down;

document.onmousemove = move;

document.onmouseup = up;

}

Obrigado,

Humberto

Drackula · Agosto 19, 2006

Ninguém sabe como poderei fazer isso?

Alex Hiroshi · Agosto 20, 2006

O script está usando ids para referenciar as divs com barras. Cada id deve ser único, pois se existir mais de um, o script não vai conseguir identificar qual id e/ou objeto ele tem que pegar.

No script você vai encontrar várias partes com document.getElementById(".."). Cada "..." é um id que deve ser único. Tente diferencias os ids, caso for tentar adicionar duas barras de rolagem.

Drackula · Agosto 21, 2006

Valeu pela dica, mas não funcionou também.No Script são feitas várias referências diretas aos IDs dos DIVs, alterando os IDs da segunda barra de rolagem, terei de fazer um novo script com as referências para esses novos IDs.

Entrar

Arquivado

Barra de rolagem

Recommended Posts

Drackula 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Drackula 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alex Hiroshi 7

Compartilhar este post

Link para o post

Compartilhar em outros sites

Drackula 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Girls From Your Town - Anonymous Casual Dating - No Selfie

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante