HOW TO!? Javascript Scroll

[mbatestblrock]

Okay, So trust me I have googled, and searched this board before posting..

Maybe I dont know the correct searching phrase.

I want to be able to recreate a text area for news on my site, and I want it to have a scroll area that is sharp looking. I know very little javascript, and understand that I probably should, But I dont think this should be TOO difficult.

Anyways I have provided a site with an example of how I want it to work

http://www.miserysignals.net/main.php

On the left side where their news is. HOW on earth would I create something like this??

My searches came back with numerous amounts of auto scrolling text areas, which is cool, but not what I want.

Any help would be amazing, Thanks JS, and AJAX gurus!

PS. I am using Dreamweaver cs3 if that may help at all???

[Dasty]

I can not see any auto-scrolling areas. I can see just area that can be scrolled manually. In this case, you can use "DIV" dom element with fixed height and width, while overflow style property will be set to auto.

[HTML]<div style="width:10 0px; height:100px; overflow:auto;" >
<H1>You can put whatever you want here</H1><br>
And here ...<br>
And here ...<br>
All will be inside DIV (scrollable)<br >
</div>[/HTML]

But site you was refering to is made in Macromedia Flash not in JS.

[mbatestblrock]

I was really hoping to get the custom up and down and scroll bar part going.

I can do it by just making by the way you just said, but it gives me the plain ole' scroll bar.

I believe the only flash part of the site is the header. The news area was achieved using JS, if I am correct, if I disable flash in my browser the news still comes up.

I just cannot find anything on how to make this "Graphical scrollbar" on any of my searches..

Hoping for a miracle.

-myke

I can not see any auto-scrolling areas. I can see just area that can be scrolled manually. In this case, you can use "DIV" dom element with fixed height and width, while overflow style property will be set to auto.

[HTML]<div style="width:10 0px; height:100px; overflow:auto;" >
<H1>You can put whatever you want here</H1><br>
And here ...<br>
And here ...<br>
All will be inside DIV (scrollable)<br >
</div>[/HTML]

But site you was refering to is made in Macromedia Flash not in JS.

[acoder]

I believe the only flash part of the site is the header. The news area was achieved using JS, if I am correct, if I disable flash in my browser the news still comes up.

I just cannot find anything on how to make this "Graphical scrollbar" on any of my searches.

You're correct. The first step is to use Firebug and right-click Inspect Element. You'll see it's a span with an img tag inside.

[mbatestblrock]

You're correct. The first step is to use Firebug and right-click Inspect Element. You'll see it's a span with an img tag inside.

k, I got firebug, inspected it, I still cannot figure out how they did it! Just lost.

[Markus]

The code used:

var upH = 18; // Height of up-arrow
var upW = 18; // Width of up-arrow
var downH = 18; // Height of down-arrow
var downW = 18; // Width of down-arrow
var dragH = 72; // Height of scrollbar
var dragW = 52; // Width of scrollbar
var scrollH = 438; // Height of scrollbar
var speed = 8; // Scroll speed
 
// And now... go to the bottom of the page...
 
// Browser detection
var dom = document.getElementById ? true:false;
var nn4 = document.layers ? true:false;
var ie4 = document.all ? true:false;
 
var mouseY; // Mouse Y position onclick
var mouseX; // Mouse X position onclick
 
var clickUp = false; // If click on up-arrow
var clickDown = false; // If click on down-arrow
var clickDrag = false; // If click on scrollbar
var clickAbove = false; // If click above scrollbar
var clickBelow = false; // If click below scrollbar
 
var timer = setTimeout("",500); // Repeat variable
var upL; // Up-arrow X
var upT; // Up-arrow Y
var downL; // Down-arrow X
var downT; // Down-arrow Y
var dragL; // Scrollbar X
var dragT; // Scrollbar Y
var rulerL; // Ruler X
var rulerT; // Ruler Y
var contentT; // Content layer Y;
var contentH; // Content height
var contentClipH; // Content clip height
var scrollLength; // Number of pixels scrollbar should move
var startY; // Keeps track of offset between mouse and span
 
// Mousedown
function 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 function
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();
 
    // 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 top
function 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 coordinates
function 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 layer
function 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 up
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;
}
 
// Scrolls down
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;
}
 
// reloads page to position the layers again
function reloadPage(){
  location.reload();
}
 
// Preload
function 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;
}
// Pop Up
function openNewWindow(URLtoOpen, windowName, windowFeatures) { newWindow=window.open(URLtoOpen, windowName, windowFeatures); }
// -->
 

No idea what's going on there, looks long winded.

Haha, sorry for the lack of help.

[mbatestblrock]

Haha, thanks!

Man I didnt think something SO little could be so complicated, I have no idea what to do. Ill update if anything comes of it though.

Still open for suggestions.

[acoder]

With the plain ole' scrollbar, it's easy. If you want a "graphical" scrollbar, you're going to have to work for it!

It's not as complicated as you think. If you don't need to support IE4 and Netscape 4 (old and ancient browsers), you could cut out a lot of the code.

Don't forget that with the JavaScript, you will also need the HTML and CSS.

[mbatestblrock]

Thanks a ton. Well see how it goes...

[Markus]

Thanks a ton. Well see how it goes...

Wish you all the best :)

and let us know how you get along!