Barra de rolagem

[1 TB 0]

E ai pessoal sei que voces leram o título do tópico e pensaram "de novo" mais é outra barra de rolagem deêm uma olhada no link abaixo pra voces verem do que eu to falando:

 

http://www.wd4u.tk/

 

Viram a barra de rolagem amarela que tem dentro da página então é ela , como eu faço essa barra de rolagem?... podem ver que não é flash.

 

eu sei que esse site quem fez foi alguém aqui do forum imasters

 

Ajuda ai , como eu faço essa barra de rolagem ? tem algum tuto?

 

Valeu !!! Espero ajuda

[sitenovo 0]

copiei o arquivo em .js, veja o codigo, agora é c/ você, divirta-se!

 

// :O)var upH = 11; // Height of up-arrowvar upW = 11; // Width of up-arrowvar downH = 11; // Height of down-arrowvar downW = 11; // Width of down-arrowvar dragH = 50; // Height of scrollbarvar dragW = 11; // Width of scrollbarvar scrollH = 259; // Height of scrollbarvar speed = 8; // Scroll speed// And now... go to the bottom of the page...// Browser detectionvar dom = document.getElementById ? true:false;var nn4 = document.layers ? true:false;var ie4 = document.all ? true:false;var mouseY; // Mouse Y position onclickvar mouseX; // Mouse X position onclickvar clickUp = false; // If click on up-arrowvar clickDown = false; // If click on down-arrowvar clickDrag = false; // If click on scrollbarvar clickAbove = false; // If click above scrollbarvar clickBelow = false; // If click below scrollbarvar timer = setTimeout("",500); // Repeat variablevar upL; // Up-arrow Xvar upT; // Up-arrow Yvar downL; // Down-arrow Xvar downT; // Down-arrow Yvar dragL; // Scrollbar Xvar dragT; // Scrollbar Yvar rulerL; // Ruler Xvar rulerT; // Ruler Yvar contentT; // Content layer Y;var contentH; // Content heightvar contentClipH; // Content clip heightvar scrollLength; // Number of pixels scrollbar should movevar startY; // Keeps track of offset between mouse and span// Mousedownfunction 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 functionfunction 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 topfunction 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 coordinatesfunction 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 layerfunction 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 upfunction 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 downfunction 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 againfunction reloadPage(){	location.reload();}// Preloadfunction 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;}

Lembrando que, é um arquivo EXTERNO de .js, ok??

 

[]s

Rodney

[nandojlle 0]

alguem ja usou essa barra de rolagem????Muito bacana, mas tenho duvidas de como estruturar os elementos junto com o codigo para faze-la funcionar.Gostaria de usar esse recurso no meu portfolio.Alguem sabe????[]s

[andrealoisio 1]

alguem ja usou essa barra de rolagem????Muito bacana, mas tenho duvidas de como estruturar os elementos junto com o codigo para faze-la funcionar.Gostaria de usar esse recurso no meu portfolio.Alguem sabe????[]s

Vai colocar no seu portfólio uma coisa que você nem sabe fazer??

[CyberDesignner 0]

karalho mew... :blink: :blink: :blink:

To precisando muito disso!!!

 

Muito URGENTE!!! :)

 

Se alguém puder me ajudar a "montar" uma barrinha de rolagem dessas num iframe, put´s.. vou ficar feliz demais!!! http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

 

Valew´s...

[nandojlle 0]

alguem ja usou essa barra de rolagem????Muito bacana, mas tenho duvidas de como estruturar os elementos junto com o codigo para faze-la funcionar.Gostaria de usar esse recurso no meu portfolio.Alguem sabe????[]s

Vai colocar no seu portfólio uma coisa que você nem sabe fazer??

Estou aberto para novos conhecimentos...soh preciso de uma alma caridosa pra me dar os toques.

[CyberDesignner 0]

Morre não topicosinho... preciso muito de ti!!! :) Alguém consegue me ajudar?

[nandojlle 0]

postem aih galera...esse recurso eh de interesse de todos...falow!

[1 TB 0]

Muito bom!!! Eu só não consegui entender direito como faz isso , nunca achei que esse tópico ia fazer tanto sucesso assim , eu pensava que era só eu que não sabia fazer isso...heheheheheMais de qualquer forma valeu pela ajuda!!!

[Bloodberry 0]

Eu não sei como uma coisa que eu fiz quando comecei a fazer sites pode estar me dando tanta dor de cabeça agora... Achoq ue fiquei mais burra ;P

Não estou conseguindo alterar as dimensões do "quadro" do texto de jeito nenhum! Quando mudo a barra para de rolar ;/