18 replies to this topic

[Skuall]

Olá!

Viajei vendo o Script... O Script é este, não o que foi mostrado...

http://www.luanapiov...ll/scrollBar.js

Se quiserem tentar... A vontade!

[LEXCAMARGOS]

O JS scrollBar configura a movimentação da barra indicando aposição que os botões deve ocupar apos o clique no botao up ou down, sem os outros JS o efeito não funciona.
O referido JS é esse:

//-----------------------------------------------------------------\\
// bugs - resize no netscape, perde a configuração
// possivel solucao - onresize no body

	//calcula as posicoes do botao up
	btn1_x = txt_x + txt_w + margin;
	btn1_y = txt_y;

	//calcula as posicoes do botao down
	btn2_x = txt_x + txt_w + margin;
	btn2_y = txt_y + txt_h - btn_h;


   // calcula a area e as coordenadas da area de scroll
	sarea_y = txt_y;
	sarea_x = txt_x + txt_w + margin; 
	sarea_h = txt_h; // - (btn_h * 2);
	sarea_w = btn_w;  
	sarea_h_real = txt_h - (btn_h *2);
	// posicao inicial do knob y,x
	knob_y = sarea_y + btn_h;
	knob_x = sarea_x; 


// pre-load das imagens - seguir o exemplo "awscroll/images/default"

	var img_up_pre  = new Image();
	var img_dn_pre  = new Image();
	var img_vkb_pre = new Image();
	var img_vbg_pre = new Image();
	
	img_up_pre.src = path_img + "arrowup0.gif";
	img_dn_pre.src = path_img + "arrowdn0.gif";
	img_vkb_pre.src = path_img + "vknob.gif";
	img_vbg_pre.src = path_img + "vbg.gif";

// inicializacoes de browsers
	window.onerror=null;
	NS = (document.layers) ? 1:0
	IE = (document.all) ? 1:0
	Opera = 0;
	gecko = (document.getElementById) ? 1:0
  loaded=0;
  layerPreStart = "";
  layerStart = "";
  layerLeft = ".left";
  layerTop = ".top";
  layerWidth = ".width"
  layerHeight = ".height"
  layerStyle = ""; 
	if (NS) 
	{
  layerPreStart = "document.divCont.";
  layerStart = "document.";
  layerStyle = "";  
	}
	if (gecko || IE)
	{
  layerStart = "document.getElementById('";
  layerStyle = "').style"; 
	}
	if (IE && !gecko)
	{
  layerStart = "document.all.";
  layerStyle = ".style"; 
	}
	if (navigator.appName.indexOf('Opera') != -1)
	{ 
  Opera=1; 
	}
	travel = sarea_h - (btn_h * 2) - knob_h; //aqui

	if (NS) 
	{
  window.captureEvents(Event.MOUSEMOVE | Event.MOUSEDOWN | Event.MOUSEUP | Event.CLICK | Event.KEYPRESS);
  window.onMouseMove = moveHandler;
  window.onMouseDown = StartE;
  window.onMouseUp = EndE;
  window.onKeyPress = KeyboardE;
	}
	else if (IE)
	{
  document.onmousemove=moveHandler;
  document.onmousedown=StartE;
  document.onmouseup=EndE;
  document.ondragstart=StartE;
  document.onkeyup = KeyboardE;
	}
	else if (gecko)
	{
  document.ondragstart = StartE;
  document.addEventListener("mousedown", StartE, true);
  document.addEventListener("mousemove", moveHandler, true);
  document.addEventListener("mouseup", EndE, true);
	}
	// ponteiros de estado
	pageY = 0;sAmount = 0;
	cUp=0; cDown=0; cBar=0; mDown=0;

	//carga dos styles
	//bloco de styles
	fprint("<style type=\"text/css\">")
	fprint("#divCont     {position:absolute; left:0; top:0; width:" +txt_w+ "; height:" +txt_h+ ";clip:rect(0px," +txt_w+ "px," +txt_h+ "px,0px);z-index:2000;visibility:hidden;}")
	fprint("#divTextCont {position:absolute; left:0; top:0;z-index:1000;}")
	fprint("#scrollbtnup {position:absolute; left:0; top:0; width:" +btn_w+ "; height:" +btn_h+ ";z-index:1500;visibility:hidden;}")
	fprint("#scrollbtndn {position:absolute; left:0; top:0; width:" +btn_w+ "; height:" +btn_h+ ";z-index:1500;visibility:hidden;}")
	fprint("#scrollbkg   {position:absolute; left:0; top:0; width:" +btn_w+ "; height:" +btn_h+ ";z-index:1000;visibility:hidden;}")
	fprint("#sliderknob  {position:absolute; left:0; top:0; width:" +btn_w+ "; height:" +btn_h+ ";z-index:2000;visibility:hidden;}")
	fprint("</style>")


function awscroll_setup()
{ 
	loaded=1; // indica que foi carrega

	// monta as imagens certas
	if (NS)
	{
  document.scrollbtnup.document.imgup.src    = img_up_pre.src
  document.scrollbtndn.document.imgdn.src    = img_dn_pre.src
  document.sliderknob.document.img_vkb.src   = img_vkb_pre.src
  document.scrollbkg.document.img_vbg.src   = img_vbg_pre.src
	}
	if (IE)
	{
  document.all.scrollbtnup.document.imgup.src    = img_up_pre.src
  document.all.scrollbtnup.document.imgup.width  = btn_w
  document.all.scrollbtnup.document.imgup.height = btn_h
  
  document.all.scrollbtnup.document.imgdn.src    = img_dn_pre.src
  document.all.scrollbtnup.document.imgdn.width  = btn_w
  document.all.scrollbtnup.document.imgdn.height = btn_h
  
  document.all.sliderknob.document.img_vkb.src    = img_vkb_pre.src
  document.all.sliderknob.document.img_vkb.width  = knob_w
  document.all.sliderknob.document.img_vkb.height = knob_h
  
  document.all.scrollbkg.document.img_vbg.src    = img_vbg_pre.src
  document.all.scrollbkg.document.img_vbg.width  = btn_w
  document.all.scrollbkg.document.img_vbg.height = txt_h - (btn_h * 2)
	}

	//posiciona os elementos dos layers a partir das configuracoes
	//conteudo
	eval(layerStart+"divCont"+layerStyle+layerLeft+" = " + txt_x);eval(layerStart+"divCont"+layerStyle+layerTop+" = " + txt_y);
	eval(layerStart+"divCont"+layerStyle+layerWidth+" = " + txt_w);eval(layerStart+"divCont"+layerStyle+layerHeight+" = " + txt_h);
	//knob (caixinha do scroll)
	eval(layerStart+"sliderknob"+layerStyle+layerLeft+" = " + knob_x);eval(layerStart+"sliderknob"+layerStyle+layerTop+" = " + knob_y);
	//fundo do scroll
	eval(layerStart+"scrollbkg"+layerStyle+layerLeft+" = " + sarea_x);eval(layerStart+"scrollbkg"+layerStyle+layerTop+" = " + knob_y);
	//botao de up
	eval(layerStart+"scrollbtnup"+layerStyle+layerLeft+" = " + btn1_x);eval(layerStart+"scrollbtnup"+layerStyle+layerTop+" = " + btn1_y);
	//botao de down
	eval(layerStart+"scrollbtndn"+layerStyle+layerLeft+" = " + btn2_x);eval(layerStart+"scrollbtndn"+layerStyle+layerTop+" = " + btn2_y);

	if (NS)    {conH=document.divCont.document.divTextCont.document.height;}
	if (IE)    {conH=document.all.divTextCont.offsetHeight;} //document.height
	if (gecko) {conH=document.getElementById('divTextCont').offsetHeight;}
	if (Opera) {conH=document.getElementById('divTextCont').style.pixelHeight;}

	//inicializa o monitoramento
	if (conH > sarea_h) //aqui era
	{
  t_refreshID = setInterval ("fix()",t_refresh);
  sAmount = conH-sarea_h;reveal();
	}
	else
	{
  eval(layerStart+"divCont"+layerStyle+".visibility = 'visible'");
	}
}

function reveal()
{
	if (conH >= sarea_h) 
	{
  eval(layerStart+"scrollbkg"+layerStyle+".visibility = 'visible'");
  eval(layerStart+"sliderknob"+layerStyle+".visibility = 'visible'");
  eval(layerStart+"scrollbtnup"+layerStyle+".visibility = 'visible'");
  eval(layerStart+"scrollbtndn"+layerStyle+".visibility = 'visible'");
  eval(layerStart+"divCont"+layerStyle+".visibility = 'visible'");
	}
}

function moveHandler(e)
{
	if (NS || IE || gecko || Opera)
	{
  if (loaded && NS) 
  {
 	 reveal();
  }
  Xpos = (IE)?event.x:e.pageX
  Ypos = (IE)?event.y:e.pageY 
  //se esta dentro da posicao x do scroll
  if ((Xpos >= sarea_x) && (Xpos <= sarea_x+sarea_w)) 
  { 
 	 //se esta na altura do botao
 	 if ((Ypos >= sarea_y) && (Ypos <= sarea_y+btn_h))  
 	 {
    cUp=1; cDown=0; cBar=0; 
 	 }
 	 if ((Ypos >  sarea_y+btn_h) && (Ypos < btn2_y)) 
 	 { 
    cUp=0; cDown=0; cBar=1; 
 	 }
 	 if ((Ypos >= btn2_y) && (Ypos <= btn2_y+btn_h)) 
 	 { 
    cUp=0; cDown=1; cBar=0; 
 	 }
  }
  else 
  { 
 	 cUp=0;cDown=0;cBar=0;mDown=0;
  }
	}
}

function EndE() 
{ 
	mDown=0;
	if (IE)
	{
   return false;
	}
}
// funcao nao implementada
// visa responder as setas do teclado
function KeyboardE(e)
{ 
	if (NS)
	{
  mDown=1;
  //se teclou espacos
  if (e.which==32)
  {
 	 cUp=0; cDown=1; cBar=0;
  }
	}

	if (IE)
	{
	//alert(event.which)
	return false;
	}
}

function StartE() 
{ 
	mDown=1;
	if (cBar || cDown || cUp || IE)
	{
   return false;
	}
}

function fix() 
{
	if (mDown && cBar) 
	{
  where = Ypos-(knob_h/2); 
  if (where < knob_y) 
  { 
 	 where=knob_y; 
  }
  if (where > btn2_y - knob_h ) 
  {
    where = btn2_y - knob_h; 
  }
  eval(layerStart+"sliderknob"+layerStyle+layerTop+" = where"); 
  pageY = -((where-knob_y)/travel) * sAmount;
  eval(layerPreStart+layerStart+"divTextCont"+layerStyle+layerTop+" = pageY"); 
	}
	if (mDown && (cUp || cDown)) 
	{
  Clicker(); 
	}
}

function Clicker() 
{
	if ((cUp && (pageY < 0)) || (cDown && (pageY > (-sAmount))) || cBar) 
	{
  if (cUp) 
  { 
 	 pageY = pageY + space;
 	 if (pageY > 0) 
 	 {
    pageY = 0; 
 	 }
  }
  else if (cDown) 
  { 
 	 pageY = pageY - space;
 	 if (pageY < (-sAmount)) 
 	 { 
    pageY = (-sAmount); 
 	 }
  }
  else if (cBar) //notar que o knob para seu centro no ponteiro do mouse
  { 
 	 pageY = -(((Ypos-(knob_h/2))-(sarea_y+btn_h))/travel) * sAmount; 
  }
  eval(layerPreStart+layerStart+"divTextCont"+layerStyle+layerTop+" = pageY");
  where = sarea_y+btn_h-((pageY/sAmount)*travel);
  if (where < sarea_y+btn_h)
  { 
 	 where=sarea_y+btn_h; 
  } 
  if (where > sarea_h+sarea_y-btn_h-knob_h) 
  { 
 	 where=sarea_h+sarea_y-btn_h-knob_h; 
  }
  eval(layerStart+"sliderknob"+layerStyle+layerTop+" = where"); 
	}
}
function topper() 
{
	where=knob_y;
	pageY=0;
	eval(layerStart+"sliderknob"+layerStyle+layerTop+" = where"); 
	eval(layerPreStart+layerStart+"divTextCont"+layerStyle+layerTop+" = pageY");
}

function fprint(param)
{
	document.writeln(param )
}

Eu estou meio sem tempo mais vou ver c sai um tuto sobre isso.

[LEXCAMARGOS]

Não questão de o js configurar um simples barra de rolagem ele tambem de ve configurar o posicionamento dos botões

//calcula as posicoes do botao up
btn1_x = txt_x + txt_w + margin;
btn1_y = txt_y;

//calcula as posicoes do botao down
btn2_x = txt_x + txt_w + margin;
btn2_y = txt_y + txt_h - btn_h;


  // calcula a area e as coordenadas da area de scroll
sarea_y = txt_y;
sarea_x = txt_x + txt_w + margin; 
sarea_h = txt_h; // - (btn_h * 2);
sarea_w = btn_w;  
sarea_h_real = txt_h - (btn_h *2);
// posicao inicial do knob y,x
knob_y = sarea_y + btn_h;
knob_x = sarea_x;

precaregar as imagens, configurar a posição da barra e muito masi fazer essa barra não é tão simples como parece.
FKWS