Barra De Rolagem Personalizada

Bittencourt · January 7, 2004

Será que alguém sabe como se faz uma barra de rolagem personalizada, como esta da AMBEV.

http://www.ambev.com.br/respsocial/alfabetizacao

Té Mais!!!!

Reginaldo ASP · January 7, 2004

Aí está a DHTML ... Exatamente a mesma; é só copiar e colar...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Untitled Document</title>

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

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

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

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

var dragH = 11; // Height of scrollbar

var dragW = 12; // Width of scrollbar

var scrollH = 180; // Height of scrollbar

var speed = 12; // Scroll speed

var navegador = new DetectaNavegador();

var clickUp, clickDown, clickDrag, clickAbove, clickBelow = false;

var timer = setTimeout("",500);

var upL, upT, downL, downT, dragL, dragT, rulerL, rulerT, contentT, contentH, contentClipH, scrollLength, startY;

var mouseY, mouseX;

var pageWidth, pageHeight = null;

function DetectaNavegador(){

this.ver=navigator.appVersion;

this.agent=navigator.userAgent;

this.dom=document.getElementById?1:0;

this.opera5=(navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?1:0;

this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;

this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;

this.ie4=(document.all && !this.dom && !this.opera5)?1:0;

this.ie=(document.all)?1:0;

this.mac=this.agent.indexOf("Mac")>-1;

this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;

this.ns4=(document.layers && !this.dom)?1:0;

this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5);

this.oculta = (this.ie || this.dom)? "hidden" : "hide";

this.mostrar = (this.ie || this.dom)? "visible" : "show";

}

function modifica(id,t,l,v) {

if(navegador.ns4) gaveta_mapa = document.layers[id];

if(navegador.ie6) gaveta_mapa = document.all[id].style;

with(gaveta_mapa) {

top = t

left = l

visibility = v;

}

function alinhaScroll() {

pageWidth = (navegador.ie)? document.body.offsetWidth : innerWidth;

if(pageWidth<800) { pageWidth = 800; }

pageHeight = (navegador.ie)? document.body.scrollHeight : document.height;

var posLeft = (pageWidth/2)+138;

var posTop1 = (pageHeight/2) - (90) -18;

var posTop2 = (pageHeight/2) - (90) -18;

var posTop3 = (pageHeight/2) - (90) +171;

var posTop4 = (pageHeight/2) - (90) -8;

modifica('bgscroll',posTop1,posLeft,navegador.mostrar);

modifica('up',posTop2,posLeft,navegador.mostrar);

modifica('down',posTop3,posLeft,navegador.mostrar);

modifica('drag',posTop4,posLeft,navegador.mostrar);

modifica('ruler',posTop4,posLeft,navegador.mostrar);

modifica('contentClip',posTop2,posLeft-295,navegador.mostrar);

}

function down(e){

if((navegador.ns4 && e.which!=1) || (navegador.ie && event.button!=1)) return true;

getMouse(e);

startY = (mouseY - dragT);

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

clickUp = true;

return scrollUp();

}

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

clickDown = true;

return scrollDown();

}

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(mouseY < dragT){

clickAbove = true;

clickUp = true;

return scrollUp();

}

else{

clickBelow = true;

clickDown = true;

return scrollDown();

}

else{

return true;

}

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();

if(navegador.ie)

return false;

}

function up(){

clearTimeout(timer);

clickUp = false;

clickDown = false;

clickDrag = false;

clickAbove = false;

clickBelow = false;

return true;

}

function getT(){

if(navegador.ie)

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

else if(navegador.ns4)

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

else if(navegador.dom)

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

}

function getMouse(e){

if(navegador.ie){

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

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

}

else if(navegador.ns4 || navegador.dom){

mouseY = e.pageY;

mouseX = e.pageX;

}

function moveTo(){

if(navegador.ie6){

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

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

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

}

else if(navegador.ns4){

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

document.ruler.top = dragT;

document.drag.top = dragT;

}

else if(navegador.dom){

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

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

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

}

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;

}

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;

}

function reloadPage(){

location.reload();

alinhaScroll();

}

function eventLoader(){

alinhaScroll();

if(navegador.ie){

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

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

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

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

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

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

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

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

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

}

else if(navegador.ns4){

upL = document.up.left;

upT = document.up.top;

downL = document.down.left;

downT = document.down.top;

dragL = document.drag.left;

dragT = document.drag.top;

rulerT = document.ruler.top;

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

contentClipH = document.contentClip.clip.bottom;

}

else if(navegador.dom){

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

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

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

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

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

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

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

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

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

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

}

if(contentClipH > contentH) {

modifica('bgscroll',0,0,navegador.oculta);

modifica('up',0,0,navegador.oculta);

modifica('down',0,0,navegador.oculta);

modifica('drag',0,0,navegador.oculta);

modifica('ruler',0,0,navegador.oculta);

}

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

if(navegador.ns4){

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

}

window.onresize = ajusta;

document.onmousedown = down;

document.onmousemove = move;

document.onmouseup = up;

}

function ajusta() {

if(navegador.ns4){

reloadPage();

} else {

eventLoader();

}

window.onload = eventLoader;

</script>

<style>

.corBg {

background-color: #478C45;

}

.corScroll {

background-color: #377308;

}

.tituloBg {

background-image: url(http://www.ambev.com.br/images/respsocial/img_tit_bg_respsocial.gif);

background-color: #478C45;

}

.imgDirBg1 {

background-image: url(http://www.ambev.com.br/images/respsocial/alfabetizacao/img_dir_1.gif);

background-color: #478C45;

background-repeat: no-repeat;

}

.imgDirBg2 {

background-image: url(http://www.ambev.com.br/images/respsocial/alfabetizacao/img_dir_2.gif);

background-color: #478C45;

background-repeat: no-repeat;

}

#content {

position: absolute;

overflow: visible;

}

#ruler {cursor: hand;}

#down {cursor: hand;}

#up {cursor: hand;}

.tit1 { font-family : Verdana, Arial; font-size : 10px; font-weight : bold; color : White; text-decoration : none; }

.tit1:hover { font-family : Verdana, Arial; font-size : 10px; font-weight : bold; color : White; text-decoration : underline; }

.tit2 { font-family : Verdana, Arial; font-size : 11px; font-weight : bold; color : White; text-decoration : none; }

.tit3 { font-family : Verdana, Arial; font-size : 12px; font-weight : bold; color : White; text-decoration : none; }

.tit4 { font-family : Verdana, Arial; font-size : 13px; font-weight : bold; color : White; text-decoration : none; }

.tit5 { font-family : Verdana, Arial; font-size : 14px; font-weight : bold; color : White; text-decoration : none; }

.txt1 { font-family : Verdana, Arial; font-size : 8px; color : White; text-decoration : none; };

.txt1 A { font-family : Verdana, Arial; font-size : 8px; color : White; };

.txt2 { font-family : Verdana, Arial; font-size : 9px; color : White; text-decoration : none; };

.txt2 A { font-family : Verdana, Arial; font-size : 9px; color : White; };

.txt3 { font-family : Verdana, Arial; font-size : 10px; color : White; text-decoration : none; };

.txt3 A { font-family : Verdana, Arial; font-size : 10px; color : White; };

.txt4 { font-family : Verdana, Arial; font-size : 11px; color : White; text-decoration : none; };

.txt4 A { font-family : Verdana, Arial; font-size : 11px; color : White; };

.txt5 { font-family : Verdana, Arial; font-size : 12px; color : White; text-decoration : none; };

.txt5 A { font-family : Verdana, Arial; font-size : 12px; color : White; };

.txt6 { font-family : Verdana, Arial; font-size : 13px; color : White; text-decoration : none; };

.txt6 A { font-family : Verdana, Arial; font-size : 13px; color : White; };

.txt7 { font-family : Verdana, Arial; font-size : 14px; color : White; text-decoration : none; };

.txt7 A { font-family : Verdana, Arial; font-size : 14px; color : White; };

.menu1 {

font-family : HelveticaNeue, Verdana, Arial;

font-size : 12px;

font-weight : bold;

color : White;

text-decoration : none;

}

.menu1:hover { color : #0072D4; text-decoration : none; }

.legalInformation {

font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;

font-size : 10px;

color : #828282;

font-weight : normal;

}

.busca{

@if(ns4) {

font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;

font-size : 8pt;

border-color : #828282 #E4E4E4 #E4E4E4 #828282;

width : 80px;

height : 15px;

border-width : 1px 1px 1px 1px;

}}

</style>

</head>

<body>

</DIV>

<TR>

A AmBev aderiu ao Programa de Alfa<font size="1">be<font color="#000000">taaaaaaaaaaaaaaização

Solidária no dia 4 de abril de 2001 e, desde então, está patrocinando

a implantação do projeto em cinco municípios das regiões Norte e Nordeste

do Brasil.<BR>

Estes municípios estão localizados próximos a unidades de produção da

companhia e foram selecionados por apresentarem taxas de analfabetismo

superior a 21%. São eles: Maués (AM), Simão Dias (SE), Maragogipe (BA)

e Anori (AM).<BR>

Em quatro anos, o Alfabetização Solidária já conseguiu alfabetizar 1,5

milhão de brasileiros. Este resultado, associado ao seu impacto sobre

a sociedade, educação e </font></font><font color="#000000">desenvolvimento

do país, foram alguns dos fatores que levaram a AmBev a apoiar o programa.<br>

Para maiores informações:<br />

<a href=http://www.alfabetizacao.org.br target=_blank>www.alfabetizacao.org.br</a>

</font> </TD>

</TR>

</TABLE>

</DIV>

</body>

</html>

Bittencourt · January 8, 2004

Fala Reginaldo!!!

Acho que eu não fui específico ao postar o tópico. Eu quero saber o que eu uso deste código para fazer a minha barra de rolagem funcionar e onde eu coloco cada um deles.

Veja a minha pagina teste

Quando você clicar no menu na palavra MISSÃO, vai surgir uma pagina no centro chamada missao.htm que eu puxei por iframe. Como eu faço para esta pagina ter a barra de rolagem igual a da AMBEV???

Acho que este codigo não é o da barra, pois tem detecção de navegador, scripts de fontes e outras coisas. O da barra de rolagem está aqui. Eu só não sei onde eu coloco isto nas paginas

Desculpa ae não ter dado mais informações.

Té Mais!!!

diraol · January 8, 2004

cara....... faz assim.............

desabilita a scroll do iframe......... ai você usa o código de scroll q foi passado......... ou você também pode usar o scroll q o jissa postou no tópico fixo SCRIPTS......... pega o link ai na minha assinatura.....................

é isso q você precisa??? se não for é só falar.......

Reginaldo ASP · January 8, 2004

Na verdade essa barra não é do iframe; na verdade ela é gerada dentro de um layer (camada)

você pode ver o nome da layer e alterar o tamanho, e até o conteúdo, incluindo tabelas e tudo mais.

Acho que este codigo não é o da barra, pois tem detecção de navegador, scripts de fontes e outras coisas. O da barra de rolagem está aqui. Eu só não sei onde eu coloco isto nas paginas

O Código que postei é esse mesmo que você disse, como você pode observar, eu só imbuti o .js no html para ficar mais fácil de você entender o post.

Veja aí se você consegue adpatar, ou da uma olhada no códgo que o diarol diraol passo pra ver se tá mais fácil.

*poxa... ninguém acerta o meu nick!!!...hehehe..... editei só pra falar isso...hehehehehe

Reginaldo ASP · January 8, 2004

*poxa... ninguém acerta o meu nick!!!...hehehe..... editei só pra falar isso...hehehehehe

Acho que é melhor você deixar definitivamente errado

Assim vai evitar de editar posts

diraol · January 8, 2004

hahahaha.... eu não vou editar sempre q errarem não.... só fiz isso com você pra brincar mesmo.... eu já me acostumei...hehehehe

já falaram de td....

Bittencourt · January 9, 2004

Uma perguntinha...

Tem como eu usar este código da listagem de scripts do jeito que meu site está, ou seja, puxando do iframe o texto ao invés de colocar o meu texto junto com script ou não???

Não conheço muito esse negócio de layer ou camadas, mas acho que vou dar uma olhada em algum tutorial.

diraol · January 9, 2004

cara, eu nem vi o código direito.... mas eu acho que o seu texto tem q estar junto do código......... para você querer fazer com "include" ou algo do tipo, tem q incrementar MUUUUITO o código........ ia ficar gigantesco.............

nem vale a pena............

Bittencourt · January 11, 2004

Valeu a sugestão!!!

Té Mais!!!

Sign In

Barra De Rolagem Personalizada

Question

Bittencourt

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

Reginaldo ASP

Link to comment

Share on other sites

Bittencourt

Link to comment

Share on other sites

diraol

Link to comment

Share on other sites

Reginaldo ASP

Link to comment

Share on other sites

Reginaldo ASP

Link to comment

Share on other sites

diraol

Link to comment

Share on other sites

Bittencourt

Link to comment

Share on other sites

diraol

Link to comment

Share on other sites

Bittencourt

Link to comment

Share on other sites

Join the conversation

Forum Statistics

Browse

Activity