Barra de rolagem

Renato Silva · Setembro 30, 2007

Galera, no link (http://www.renatowebdesign.com/clientes/cigam/index.asp?pagina=clientes) voces veram que a minha barra de rolagem é a padrão do navegador, isso tá muito feio... gostaria de saber se alguém tem algum tutorial ou exemplo daquelas barra de rolagens personalizadas, que são mais bacaninhas, acho que em css usando imagens, algo assim, coisa parecida... alguém tem isso aí pra me ajudar???Vlew e aguardo...

inforsis · Setembro 30, 2007

olá Renato Silva, Boa Noite!

Colorindo a barra de rolagem:

<style type="text/css">*{scrollbar-3d light-color:#000000;scrollbar-arrow-color:#000000;scrollbar-base-color:#000000;scrollbar-dark-shadow-color:#000000;scrollbar-face-color:#000000;scrollbar-highight-color:#000000;scrollbar-shadow-color:#000000;}</style>

Modifique os valores haxadecimais até obter a cor desejada.

PS: Apenas funciona no IE.

Barra de rolagem com imagem:

http://forum.imasters.com.br/index.php?sho...olagem+colorida

Qualquer nova dúvida post, não esquecendo de antes consultar a busca do fórum. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Renato Silva · Setembro 30, 2007

Ok... é, gostaria de usar o esquema do topico que você relacionou, da barra de rolagem do site da gol, você tem esse codigo pra enviar???

Nícolas · Outubro 1, 2007

Bom Renato como fiquei de te mandar ele limpo pois eu só tinha no trampo e num tenho como mandar um zip vou postar o código aqui.

Da uma fuçada aee que se vai entender como funciona.

index.html

<html><head><title>Nícolas</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><link rel="stylesheet" href="slide3.css" type="text/css"><script language="javaScript" type="text/javascript" src="slide3.js"></script></head><body leftmargin="0" topmargin="0" bgcolor="#ffffff" marginheight="0" marginwidth="0">	<div id="divScroller1">	  <div id="dynPage0" class="dynPage">Pagina 0</div>	  <div id="dynPage1" class="dynPage">Pagina 1</div>	  <div id="dynPage2" class="dynPage">Pagina 2</div>	  <div id="dynPage3" class="dynPage">Pagina 3</div>	  <div id="dynPage4" class="dynPage">Pagina 4</div>	  <div id="dynPage5" class="dynPage">Pagina 5</div>	  <div id="dynPage6" class="dynPage">Pagina 6</div>	</div>	<div id="scroll">		<a onMouseOver="scroll(7);" onClick="return false;" onMouseOut="stopScroll();" href="#" target="_self"><img src="scroll_up.gif" border="0" height="28" width="25"></a> 		<a onMouseOver="scroll(-7);" onClick="return false;" onMouseOut="stopScroll();" href="#" target="_self"> <img src="scroll_down.gif" border="0" height="28" width="25"></a> 	</div>	<!--	LINK COM SELECT ASSIM COMO NO SITE		-->	<select name="servicos" onChange="activate(this.value); return false;" class="textobot">	  <option value="0">dynPage0</option>	  <option value="1">dynPage1</option>	  <option value="2">dynPage2</option>	  <option value="3">dynPage3</option>	  <option value="4">dynPage4</option>	  <option value="5">dynPage5</option>	  <option value="6">dynPage6</option>	</select>	<br><br>	<!--	LINK COM HREF		-->	<a href="java script:activate('0');">dynPage0</a><br>	<a href="java script:activate('1');">dynPage1</a><br>	<a href="java script:activate('2');">dynPage2</a><br>	<a href="java script:activate('3');">dynPage3</a><br>	<a href="java script:activate('4');">dynPage4</a><br>	<a href="java script:activate('5');">dynPage5</a><br>	<a href="java script:activate('6');">dynPage6</a></body></html>

slide3.js

/*********************************************************************************   PageSlideFade *   Copyright (C) 2001 <a href="/dhtmlcentral/michael_van_ouwerkerk.asp">Michael van Ouwerkerk</a>*   This script was released at DHTMLCentral.com*   Visit for more great scripts!*   This may be used and changed freely as long as this msg is intact!*   We will also appreciate any links you could give us.**   Made by <a href="/dhtmlcentral/michael_van_ouwerkerk.asp">Michael van Ouwerkerk</a> ********************************************************************************/function lib_bwcheck(){ //Browsercheck (needed)	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.ie7=(this.ver.indexOf("MSIE 7")>-1 && this.dom && !this.opera5)?1:0;	this.ie4=(document.all && !this.dom && !this.opera5)?1:0;	this.ie=this.ie4||this.ie5||this.ie6||this.ie7	this.mac=this.agent.indexOf("Mac")>-1	this.ff = this.agent.indexOf("Firefox")>-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.ie7 || this.ff || this.opera5)	return this}var bw=new lib_bwcheck();var pages = new Array();/*** variables to configure... ***/var numScrollPages = 7		 //Set the number of pages (layers) here. Add and remove the pages in the body too. The first layer is called dynPage0, the second is dynPage1, and so on.var transitionOut = 1;		 //The 'out' effect... 0= no effect, 1= fadevar transitionIn = 2;		  //The 'in' effect... 0= no effect, 1= fade, 2= slidevar slideAcceleration = 0.2;   //If you use the slide animation, set this somewhere between 0 and 1.// NOTE: if you change the position of divScroller1 from absolute to relative, you can put the scroller in a table.// HOWEVER it will no longer work in netscape 4. If you wish to support netscape 4, you have to use absolute positioning.// Please note that there are no effects available in ns4 and ie4, or explorers on the Mac!/*** There should be no need to change anything beyond this. ***/ // A unit of measure that will be added when setting the position of a layer.var px = bw.ns4||window.opera?"":"px";if(document.layers){ //NS4 resize fix...	scrX= innerWidth; scrY= innerHeight;	onresize= function(){if(scrX!= innerWidth || scrY!= innerHeight){history.go(0)} }}//object constructor...function scrollerobj(obj,nest){	nest = (!nest)?"":'document.'+nest+'.'	this.elm = bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):document.getElementById(obj)	this.css = bw.ns4?this.elm:this.elm.style	this.doc = bw.ns4?this.elm.document:document	this.obj = obj+'scrollerobj'; eval(this.obj+'=this')	this.x = (bw.ns4||bw.opera5)?this.css.left:this.elm.offsetLeft	this.y = (bw.ns4||bw.opera5)?this.css.top:this.elm.offsetTop	this.w = (bw.ie4||bw.ie5||bw.ie6||bw.ie7||bw.ns6)?this.elm.offsetWidth:bw.ns4?this.elm.clip.width:bw.opera5?this.css.pixelWidth:0	this.h = (bw.ie4||bw.ie5||bw.ie6||bw.ie7||bw.ns6)?this.elm.offsetHeight:bw.ns4?this.elm.clip.height:bw.opera5?this.css.pixelHeight:0}//object methods...scrollerobj.prototype.moveTo = function(x,y){	if(x!=null){this.x=x; this.css.left=x+px}	if(y!=null){this.y=y; this.css.top=y+px}}scrollerobj.prototype.moveBy = function(x,y){this.moveTo(this.x+x,this.y+y)}scrollerobj.prototype.hideIt = function(){this.css.visibility='hidden'}scrollerobj.prototype.showIt = function(){this.css.visibility='visible'}/****************************************************************scroll functions...****************************************************************/var scrollTimer = null;function scroll(step){	clearTimeout(scrollTimer);	if ( !busy && (step<0&&activePage.y+activePage.h>scroller1.h || step>0&&activePage.y<0) ){		activePage.moveBy(0,step);		scrollTimer = setTimeout('scroll('+step+')',40);	}}function stopScroll(){	clearTimeout(scrollTimer);}/****************************************************************activating the correct layers...****************************************************************/var activePage = null;var busy = 0;function activate(num){	if (activePage!=pages[num] && !busy){		busy = 1;		if (transitionOut==0 || !bw.opacity){activePage.hideIt(); activateContinue(num); }		else if (transitionOut==1) activePage.blend('hidden', 'activateContinue('+num+')');	}	}function activateContinue(num){	busy = 1;	activePage = pages[num];	activePage.moveTo(0,0);	if (transitionIn==0 || !bw.opacity){activePage.showIt(); busy=0; }	else if (transitionIn==1) activePage.blend('visible', 'busy=0');	else if (transitionIn==2) activePage.slide(0, slideAcceleration, 40, 'busy=0');}/****************************************************************Slide methods...****************************************************************/scrollerobj.prototype.slide = function(target, acceleration, time, fn){	this.slideFn= fn?fn:null;	this.moveTo(0,scroller1.h);	if (bw.ie4&&!bw.mac) this.css.filter = 'alpha(opacity=100)';	if (bw.ns6) this.css.MozOpacity = 1;	this.showIt();	this.doSlide(target, acceleration, time);}scrollerobj.prototype.doSlide = function(target, acceleration, time){	this.step = Math.round(this.y*acceleration);	if (this.step<1) this.step = 1;	if (this.step>this.y) this.step = this.y;	this.moveBy(0, -this.step);	if (this.y>0) this.slideTim = setTimeout(this.obj+'.doSlide('+target+','+acceleration+','+time+')', time);	else {			eval(this.slideFn);		this.slideFn = null;	}}/****************************************************************Opacity methods...****************************************************************/scrollerobj.prototype.blend= function(vis, fn){	if (bw.ie5||bw.ie6||bw.ie7 && !bw.mac) {		if (vis=='visible') this.css.filter= 'blendTrans(duration=0.9)';		else this.css.filter= 'blendTrans(duration=0.6)';		this.elm.onfilterchange = function(){ eval(fn); };		this.elm.filters.blendTrans.apply();		this.css.visibility= vis;		this.elm.filters.blendTrans.play();	}	else if (bw.ns6 || bw.ie&&!bw.mac){		this.css.visibility= 'visible';		vis=='visible' ? this.fadeTo(100, 7, 40, fn) : this.fadeTo(0, 9, 40, fn);	}	else {		this.css.visibility= vis;		eval(fn);	}};scrollerobj.prototype.op= 100;scrollerobj.prototype.opacityTim= null;scrollerobj.prototype.setOpacity= function(num){	this.css.filter= 'alpha(opacity='+num+')';	this.css.MozOpacity= num/100;	this.op= num;}scrollerobj.prototype.fadeTo= function(target, step, time, fn){	clearTimeout(this.opacityTim);	this.opacityFn= fn?fn:null;	this.op = target==100 ? 0 : 100;	this.fade(target, step, time);}scrollerobj.prototype.fade= function(target, step, time){	if (Math.abs(target-this.op)>step){		target>this.op? this.setOpacity(this.op+step):this.setOpacity(this.op-step);		this.opacityTim= setTimeout(this.obj+'.fade('+target+','+step+','+time+')', time);	}	else {		this.setOpacity(target);		eval(this.opacityFn);		this.opacityFn= null;	}}/**************************************************************Init function...**************************************************************/var pageslidefadeLoaded = 0;function initPageSlideFade(){			  scroller1 = new scrollerobj('divScroller1');		for (var i=0; i<numScrollPages; i++){		if (document.getElementById('dynPage'+i) != null){			pages[i] = new scrollerobj('dynPage'+i, 'divScroller1');			pages[i].moveTo(0,0);		}	}	bw.opacity = ( bw.ie && !bw.ie4 && navigator.userAgent.indexOf('Windows')>-1 ) || bw.ns6	if (bw.ie5||bw.ie6||bw.ie7 && !bw.mac) pages[0].css.filter= 'blendTrans(duration=0.6)'; // Preloads the windows filters.	activePage = pages[0];	activePage.showIt();	if (bw.ie) for(var i=0;i<document.links.length;i++) document.links[i].onfocus=document.links[i].blur;	pageslidefadeLoaded = 1;}//if the browser is ok, the script is started onload..if(bw.bw && !pageslidefadeLoaded) onload = initPageSlideFade;

slide3.css

#divScroller1 {	position:absolute; 	overflow:hidden; 	z-index:9; 	left:232px; 	top:7px; 	width:330px; 	height:240px; 	clip:rect(0px, 330px, 215px, 0px); 	visibility:visible; 	border-width:0px 0px 0px 0px; }.dynPage {	position:absolute; 	z-index:10; 	left:0px; 	top:0px; 	width:330px; 	visibility:hidden; 	padding-left:3px; 	font-family:Verdana,Arial,Helvetica; 	font-size:9px; 	line-height:14px; 	color:black;}#arrows {	position:absolute; 	z-index:11; 	left:74px; 	top:355px; 	width:20px; }#links {	position:absolute; 	z-index:11; 	left:77px; 	top:301px; 	width:20px; } #scroll {	z-index: 20; 	left: 544px; 	width: 19px; 	position: absolute; 	top: 66px; 	height: 48px;}

Tá aee o código.

Boa sorte http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Renato Silva · Outubro 2, 2007

Cara, não deu certo, olha o link com o codigo, tá dando erro, você sabe o que pode ser???link: www.renatowebdesign.com/clientes/cigam/teste/Aguardo...

Giovani · Outubro 2, 2007

Título do tópico editado para facilitar futuras buscas.Sai: Ajuda (conselho) sobre barra de rolagem do siteEntra: Barra de rolagem

Renato Silva · Outubro 2, 2007

Ok... aguardo retorno...

Nícolas · Outubro 2, 2007

Renato como eu falei da uma fuçada mas poooo se apagou as div's principais cara.

<div id="dynPage0" class="dynPage">Pagina 0</div>	  <div id="dynPage1" class="dynPage">Pagina 1</div>	  <div id="dynPage2" class="dynPage">Pagina 2</div>

Começa sempre da dynPage0

Cada um vai ser uma pagina.

Como no seu caso é só pra usar o scroll mesmo coloca assim.

<html>

<head>

<title>Nícolas</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link rel="stylesheet" href="slide3.css" type="text/css">

<script language="javaScript" type="text/javascript" src="slide3.js"></script>

<script language="javaScript" type="text/javascript" src="base.js"></script>

</head>

<body leftmargin="0" topmargin="0" bgcolor="#ffffff" marginheight="0" marginwidth="0">

<div id="divScroller1">

<div id="dynPage0" class="dynPage">

d glkjnsdlkj fdg dflgdflgkd flkgf<br>

d glkjnsdlkj fdg dflgdflgkd flkgf<br>

d glkjnsdlkj fdg dflgdflgkd flkgf<br>

d glkjnsdlkj fdg dflgdflgkd flkgf<br>

d glkjnsdlkj fdg dflgdflgkd flkgf<br>

d glkjnsdlkj fdg dflgdflgkd flkgf<br>

d glkjnsdlkj fdg dflgdflgkd flkgf<br>

d glkjnsdlkj fdg dflgdflgkd flkgf<br>

d glkjnsdlkj fdg dflgdflgkd flkgf<br>

d glkjnsdlkj fdg dflgdflgkd flkgf<br>

d glkjnsdlkj fdg dflgdflgkd flkgf<br>

d glkjnsdlkj fdg dflgdflgkd flkgf<br>

d glkjnsdlkj fdg dflgdflgkd flkgf<br>

d glkjnsdlkj fdg dflgdflgkd flkgf<br>

hdkfjn skdfjnskjfnsdkjfndskjfnd k<br>

odifjb sijfb jdfh djfd fjs dfkjds<br>

hdkfjn skdfjnskjfnsdkjfndskjfnd k<br>

odifjb sijfb jdfh djfd fjs dfkjds<br>

hdkfjn skdfjnskjfnsdkjfndskjfnd k<br>

odifjb sijfb jdfh djfd fjs dfkjds<br>

hdkfjn skdfjnskjfnsdkjfndskjfnd k<br>

odifjb sijfb jdfh djfd fjs dfkjds<br>

hdkfjn skdfjnskjfnsdkjfndskjfnd k<br>

odifjb sijfb jdfh djfd fjs dfkjds<br>

hdkfjn skdfjnskjfnsdkjfndskjfnd k<br>

odifjb sijfb jdfh djfd fjs dfkjds<br>

hdkfjn skdfjnskjfnsdkjfndskjfnd k<br>

odifjb sijfb jdfh djfd fjs dfkjds<br>

hdkfjn skdfjnskjfnsdkjfndskjfnd k<br>

odifjb sijfb jdfh djfd fjs dfkjds<br>

</div>

</div>

<div id="scroll">

<a onMouseOver="scroll(7);" onClick="return false;" onMouseOut="stopScroll();" href="#" target="_self">

<img src="scroll_up.gif" border="0" height="28" width="25"></a>

<a onMouseOver="scroll(-7);" onClick="return false;" onMouseOut="stopScroll();" href="#" target="_self">

<img src="scroll_down.gif" border="0" height="28" width="25"></a>

</div>

</body>

</html>

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

T.P. · Outubro 2, 2007

Mas lembre-se que a personalização da barra de rolagem só funciona no IE, ou seja não é aceita pelo W3C logo seu código não validará.

Nícolas · Outubro 2, 2007

Complementando o que o T.P. disse a personalização é no caso de utilizar o código

<style type="text/css">*{scrollbar-3d light-color:#000000;scrollbar-arrow-color:#000000;scrollbar-base-color:#000000;scrollbar-dark-shadow-color:#000000;scrollbar-face-color:#000000;scrollbar-highight-color:#000000;scrollbar-shadow-color:#000000;}</style>

Esse que passei do site da gol é valido tanto em html quando em css

E ele funcionou no IE, Firefox e Opera (só os que testei) ;)

Renato Silva · Outubro 2, 2007

Caraca... não funciona de jeito nenhum cara... O que será que tá rolando???link novamente: www.renatowebdesign.com/clientes/cigam/teste/Obrigado dinovi heim.... vlew

Nícolas · Outubro 3, 2007

É que você mexeu no javascript....

No final do código.

Compara a ultima função do seu código e do código que te passei.

CÓDIGO QUE PASSEI

**************************************************************/

var pageslidefadeLoaded = 0;

function initPageSlideFade(){

scroller1 = new scrollerobj('divScroller1');

for (var i=0; i<numScrollPages; i++){

if (document.getElementById('dynPage'+i) != null){

pages = new scrollerobj('dynPage'+i, 'divScroller1');

pages.moveTo(0,0);

}

}

bw.opacity = ( bw.ie && !bw.ie4 && navigator.userAgent.indexOf('Windows')>-1 ) || bw.ns6

if (bw.ie5||bw.ie6||bw.ie7 && !bw.mac) pages[0].css.filter= 'blendTrans(duration=0.6)'; // Preloads the windows filters.

SEU CÓDIGO

**************************************************************/

var pageslidefadeLoaded = 0;

function initPageSlideFade(){

scroller1 = new scrollerobj('divScroller1');

pages = new Array();

for (var i=0; i<numScrollPages; i++){

pages = new scrollerobj('dynPage'+i, 'divScroller1');

pages.moveTo(0,0);

}

bw.opacity = ( bw.ie && !bw.ie4 && navigator.userAgent.indexOf('Windows')>-1 ) || bw.ns6

if (bw.ie5||bw.ie6 && !bw.mac) pages[0].css.filter= 'blendTrans(duration=0.6)'; // Preloads the windows filters.

Então copia de novo o javascript que passei porque eu testei de novo com o meu e com o seu código... e com o meu foi =)

Renato Silva · Outubro 4, 2007

Ufa cara... funfou, olha o link (http://www.renatowebdesign.com/clientes/cigam/index.asp?pagina=erpcigam&navegador=ativo&conteudo=beneficios), porém, ele nao exibe nada no IE7, pq será que no IE7 ele nao exibe a divi??? você tem idéia???Aguardo... Vlew...

Arquivado

Barra de rolagem

Recommended Posts

Renato Silva 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

inforsis 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Renato Silva 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Nícolas 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Renato Silva 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Giovani 104

Compartilhar este post

Link para o post

Compartilhar em outros sites

Renato Silva 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Nícolas 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

T.P. 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Nícolas 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Renato Silva 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Nícolas 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Renato Silva 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

select com varias categorias por horario

comando like (Mysql) no php

Alguém com pratica em subir site em codeigniter4 na Hostinger? Não consigo acessar o bd. Erro de Autenticação. O mesmo site funciona normal em outro servidor web.

Fóruns

Tempo Real

Informação importante