Bittencourt Posted January 7, 2004 Report Share Posted 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/alfabetizacaoTé Mais!!!! Quote Link to comment Share on other sites More sharing options...
0 Reginaldo ASP Posted January 7, 2004 Report Share Posted 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><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><script>var upH = 12; // Height of up-arrowvar upW = 12; // Width of up-arrowvar downH = 19; // Height of down-arrowvar downW = 12; // Width of down-arrowvar dragH = 11; // Height of scrollbarvar dragW = 12; // Width of scrollbarvar scrollH = 180; // Height of scrollbarvar speed = 12; // Scroll speedvar 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><SPAN ID="bgscroll" STYLE="position: absolute; top: 193px; left: 650px; z-index: 1; width: 12; height: 200; visibility: hidden;"><TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0><TR><TD WIDTH=12 CLASS="corScroll"><A HREF="javascript:;"><IMG SRC="http://www.ambev.com.br/images/spacer.gif" WIDTH=12 HEIGHT=200 BORDER=0></A></TD></TR></TABLE></SPAN><SPAN ID="up" STYLE="position: absolute; top: 193px; left: 650px; z-index: 2; width: 12; height: 12; visibility: hidden;"><IMG SRC="http://www.ambev.com.br/images/scroll/respsocial/scroll_up.gif" WIDTH="12" HEIGHT="12" ALT="" BORDER="0"></SPAN><SPAN ID="down" STYLE="position: absolute; top: 382px; left: 650px; z-index: 3; width: 12; height: 11; visibility: hidden;"><IMG SRC="http://www.ambev.com.br/images/scroll/respsocial/scroll_down.gif" WIDTH="12" HEIGHT="11" ALT="" BORDER="0"></SPAN><SPAN ID="drag" STYLE="position: absolute; top: 202px; left: 650px; z-index: 4; width: 12px; height: 11px; visibility: hidden;"><IMG SRC="http://www.ambev.com.br/images/scroll/respsocial/scroll_roll.gif" WIDTH="12" HEIGHT="11" ALT="" BORDER="0"></SPAN><SPAN ID="ruler" STYLE="position: absolute; top: 202px; left: 650px; z-index: 7; width: 12px; height: 12px; visibility: hidden;"> </SPAN></DIV><!-- Inicio Texto do Conteudo Principal --><DIV ID="contentClip" STYLE="position: absolute; top: 193px; left: 355px; width: 280px; height: 200px; clip:rect(0px 280px 200px 0px); z-index: 6; overflow: hidden; visibility: hidden;"> <DIV ID="content"> <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=250> <TR> <TD VALIGN="top" CLASS="txt5"> <p class="tit3"></p> 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> Quote Link to comment Share on other sites More sharing options...
0 Bittencourt Posted January 8, 2004 Author Report Share Posted 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 testeQuando 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 paginasDesculpa ae não ter dado mais informações.Té Mais!!! Quote Link to comment Share on other sites More sharing options...
0 diraol Posted January 8, 2004 Report Share Posted 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....... Quote Link to comment Share on other sites More sharing options...
0 Reginaldo ASP Posted January 8, 2004 Report Share Posted 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 paginasO 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 Quote Link to comment Share on other sites More sharing options...
0 Reginaldo ASP Posted January 8, 2004 Report Share Posted January 8, 2004 *poxa... ninguém acerta o meu nick!!!...hehehe..... editei só pra falar isso...heheheheheAcho que é melhor você deixar definitivamente errado Assim vai evitar de editar posts Quote Link to comment Share on other sites More sharing options...
0 diraol Posted January 8, 2004 Report Share Posted 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...hehehehejá falaram de td.... Quote Link to comment Share on other sites More sharing options...
0 Bittencourt Posted January 9, 2004 Author Report Share Posted 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. Quote Link to comment Share on other sites More sharing options...
0 diraol Posted January 9, 2004 Report Share Posted 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............ Quote Link to comment Share on other sites More sharing options...
0 Bittencourt Posted January 11, 2004 Author Report Share Posted January 11, 2004 Valeu a sugestão!!!Té Mais!!! Quote Link to comment Share on other sites More sharing options...
Question
Bittencourt
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!!!!
Link to comment
Share on other sites
9 answers to this question
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.