473,326 Members | 2,128 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,326 software developers and data experts.

HOW TO!? Javascript Scroll

164 100+
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???
Nov 14 '07 #1
14 4069
Dasty
101 Expert 100+
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:100px; 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.
Nov 14 '07 #2
mbatestblrock
164 100+
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:100px; 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.
Nov 14 '07 #3
acoder
16,027 Expert Mod 8TB
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.
Nov 14 '07 #4
mbatestblrock
164 100+
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.
Nov 14 '07 #5
Markus
6,050 Expert 4TB
The code used:
Expand|Select|Wrap|Line Numbers
  1. var upH = 18; // Height of up-arrow
  2. var upW = 18; // Width of up-arrow
  3. var downH = 18; // Height of down-arrow
  4. var downW = 18; // Width of down-arrow
  5. var dragH = 72; // Height of scrollbar
  6. var dragW = 52; // Width of scrollbar
  7. var scrollH = 438; // Height of scrollbar
  8. var speed = 8; // Scroll speed
  9.  
  10. // And now... go to the bottom of the page...
  11.  
  12. // Browser detection
  13. var dom = document.getElementById ? true:false;
  14. var nn4 = document.layers ? true:false;
  15. var ie4 = document.all ? true:false;
  16.  
  17. var mouseY; // Mouse Y position onclick
  18. var mouseX; // Mouse X position onclick
  19.  
  20. var clickUp = false; // If click on up-arrow
  21. var clickDown = false; // If click on down-arrow
  22. var clickDrag = false; // If click on scrollbar
  23. var clickAbove = false; // If click above scrollbar
  24. var clickBelow = false; // If click below scrollbar
  25.  
  26. var timer = setTimeout("",500); // Repeat variable
  27. var upL; // Up-arrow X
  28. var upT; // Up-arrow Y
  29. var downL; // Down-arrow X
  30. var downT; // Down-arrow Y
  31. var dragL; // Scrollbar X
  32. var dragT; // Scrollbar Y
  33. var rulerL; // Ruler X
  34. var rulerT; // Ruler Y
  35. var contentT; // Content layer Y;
  36. var contentH; // Content height
  37. var contentClipH; // Content clip height
  38. var scrollLength; // Number of pixels scrollbar should move
  39. var startY; // Keeps track of offset between mouse and span
  40.  
  41. // Mousedown
  42. function down(e){
  43.   if((document.layers && e.which!=1) || (document.all && event.button!=1)) return true; // Enables the right mousebutton
  44.   getMouse(e);
  45.   startY = (mouseY - dragT);
  46.  
  47.   // If click on up-arrow
  48.   if(mouseX >= upL && (mouseX <= (upL + upW)) && mouseY >= upT && (mouseY <= (upT + upH))){
  49.     clickUp = true;
  50.     return scrollUp();
  51.   }  
  52.   // Else if click on down-arrow
  53.   else if(mouseX >= downL && (mouseX <= (downL + downW)) && mouseY >= downT && (mouseY <= (downT + downH))){
  54.     clickDown = true;
  55.     return scrollDown();
  56.   }
  57.   // Else if click on scrollbar
  58.   else if(mouseX >= dragL && (mouseX <= (dragL + dragW)) && mouseY >= dragT && (mouseY <= (dragT + dragH))){
  59.     clickDrag = true;
  60.     return false;
  61.   }
  62.   else if(mouseX >= dragL && (mouseX <= (dragL + dragW)) && mouseY >= rulerT && (mouseY <= (rulerT + scrollH))){
  63.     // If click above drag
  64.     if(mouseY < dragT){
  65.       clickAbove = true;
  66.       clickUp = true;
  67.       return scrollUp();
  68.     }
  69.     // Else click below drag
  70.     else{
  71.       clickBelow = true;
  72.       clickDown = true;
  73.       return scrollDown();
  74.     }
  75.   }
  76.   // If no scrolling is to take place
  77.   else{
  78.     return true;
  79.   }
  80. }
  81.  
  82. // Drag function
  83. function move(e){
  84.   if(clickDrag && contentH > contentClipH){
  85.     getMouse(e);
  86.     dragT = (mouseY - startY);
  87.  
  88.     if(dragT < (rulerT))
  89.       dragT = rulerT;    
  90.     if(dragT > (rulerT + scrollH - dragH))
  91.       dragT = (rulerT + scrollH - dragH);
  92.  
  93.     contentT = ((dragT - rulerT)*(1/scrollLength));
  94.     contentT = eval('-' + contentT);
  95.  
  96.     moveTo();
  97.  
  98.     // So ie-pc doesn't select gifs
  99.     if(ie4)
  100.       return false;
  101.   }
  102. }
  103.  
  104.  
  105.  
  106. function up(){
  107.   clearTimeout(timer);
  108.   // Resetting variables
  109.   clickUp = false;
  110.   clickDown = false;
  111.   clickDrag = false;
  112.   clickAbove = false;
  113.   clickBelow = false;
  114.   return true;
  115. }
  116.  
  117. // Reads content layer top
  118. function getT(){
  119.   if(ie4)
  120.     contentT = document.all.content.style.pixelTop;
  121.   else if(nn4)
  122.     contentT = document.contentClip.document.content.top;
  123.   else if(dom)
  124.     contentT = parseInt(document.getElementById("content").style.top);
  125. }
  126.  
  127. // Reads mouse X and Y coordinates
  128. function getMouse(e){
  129.   if(ie4){
  130.     mouseY = event.clientY + document.body.scrollTop;
  131.     mouseX = event.clientX + document.body.scrollLeft;
  132.   }
  133.   else if(nn4 || dom){
  134.     mouseY = e.pageY;
  135.     mouseX = e.pageX;
  136.   }
  137. }
  138.  
  139. // Moves the layer
  140. function moveTo(){
  141.   if(ie4){
  142.     document.all.content.style.top = contentT;
  143.     document.all.ruler.style.top = dragT;
  144.     document.all.drag.style.top = dragT;
  145.   }
  146.   else if(nn4){
  147.     document.contentClip.document.content.top = contentT;
  148.     document.ruler.top = dragT;
  149.     document.drag.top = dragT;
  150.   }
  151.   else if(dom){
  152.     document.getElementById("content").style.top = contentT + "px";
  153.     document.getElementById("drag").style.top = dragT + "px";
  154.     document.getElementById("ruler").style.top = dragT + "px";
  155.   }
  156. }
  157.  
  158. // Scrolls up
  159. function scrollUp(){
  160.   getT();
  161.  
  162.   if(clickAbove){
  163.     if(dragT <= (mouseY-(dragH/2)))
  164.       return up();
  165.   }
  166.  
  167.   if(clickUp){
  168.     if(contentT < 0){    
  169.       dragT = dragT - (speed*scrollLength);
  170.  
  171.       if(dragT < (rulerT))
  172.         dragT = rulerT;
  173.  
  174.       contentT = contentT + speed;
  175.       if(contentT > 0)
  176.         contentT = 0;
  177.  
  178.       moveTo();
  179.       timer = setTimeout("scrollUp()",25);
  180.     }
  181.   }
  182.   return false;
  183. }
  184.  
  185. // Scrolls down
  186. function scrollDown(){
  187.   getT();
  188.  
  189.   if(clickBelow){
  190.     if(dragT >= (mouseY-(dragH/2)))
  191.       return up();
  192.   }
  193.  
  194.   if(clickDown){
  195.     if(contentT > -(contentH - contentClipH)){      
  196.       dragT = dragT + (speed*scrollLength);
  197.       if(dragT > (rulerT + scrollH - dragH))
  198.         dragT = (rulerT + scrollH - dragH);
  199.  
  200.       contentT = contentT - speed;
  201.       if(contentT < -(contentH - contentClipH))
  202.         contentT = -(contentH - contentClipH);
  203.  
  204.       moveTo();
  205.       timer = setTimeout("scrollDown()",25);
  206.     }
  207.   }
  208.   return false;
  209. }
  210.  
  211. // reloads page to position the layers again
  212. function reloadPage(){
  213.   location.reload();
  214. }
  215.  
  216. // Preload
  217. function eventLoader(){
  218.   if(ie4){
  219.     // Up-arrow X and Y variables
  220.     upL = document.all.up.style.pixelLeft;
  221.     upT = document.all.up.style.pixelTop;    
  222.     // Down-arrow X and Y variables
  223.     downL = document.all.down.style.pixelLeft;
  224.     downT = document.all.down.style.pixelTop;
  225.     // Scrollbar X and Y variables
  226.     dragL = document.all.drag.style.pixelLeft;
  227.     dragT = document.all.drag.style.pixelTop;    
  228.     // Ruler Y variable
  229.     rulerT = document.all.ruler.style.pixelTop;    
  230.     // Height of content layer and clip layer
  231.     contentH = parseInt(document.all.content.scrollHeight);
  232.     contentClipH = parseInt(document.all.contentClip.style.height);
  233.   }
  234.   else if(nn4){
  235.     // Up-arrow X and Y variables
  236.     upL = document.up.left;
  237.     upT = document.up.top;    
  238.     // Down-arrow X and Y variables
  239.     downL = document.down.left;
  240.     downT = document.down.top;    
  241.     // Scrollbar X and Y variables
  242.     dragL = document.drag.left;
  243.     dragT = document.drag.top;    
  244.     // Ruler Y variable
  245.     rulerT = document.ruler.top;
  246.     // Height of content layer and clip layer
  247.     contentH = document.contentClip.document.content.clip.bottom;
  248.     contentClipH = document.contentClip.clip.bottom;
  249.   }
  250.   else if(dom){
  251.     // Up-arrow X and Y variables
  252.     upL = parseInt(document.getElementById("up").style.left);
  253.     upT = parseInt(document.getElementById("up").style.top);
  254.     // Down-arrow X and Y variables
  255.     downL = parseInt(document.getElementById("down").style.left);
  256.     downT = parseInt(document.getElementById("down").style.top);
  257.     // Scrollbar X and Y variables
  258.     dragL = parseInt(document.getElementById("drag").style.left);
  259.     dragT = parseInt(document.getElementById("drag").style.top);
  260.     // Ruler Y variable
  261.     rulerT = parseInt(document.getElementById("ruler").style.top);
  262.     // Height of content layer and clip layer
  263.     contentH = parseInt(document.getElementById("content").offsetHeight);
  264.     contentClipH = parseInt(document.getElementById("contentClip").offsetHeight);
  265.     document.getElementById("content").style.top = 0 + "px";
  266.  
  267.   }
  268.   // Number of pixels scrollbar should move
  269.   scrollLength = ((scrollH-dragH)/(contentH-contentClipH));
  270.   // Initializes event capturing
  271.   if(nn4){
  272.     document.captureEvents(Event.MOUSEDOWN | Event.MOUSEMOVE | Event.MOUSEUP);
  273.     window.onresize = reloadPage;
  274.   }
  275.   document.onmousedown = down;
  276.   document.onmousemove = move;
  277.   document.onmouseup = up;
  278. }
  279. // Pop Up
  280. function openNewWindow(URLtoOpen, windowName, windowFeatures) { newWindow=window.open(URLtoOpen, windowName, windowFeatures); }
  281. // -->
  282.  
No idea what's going on there, looks long winded.

Haha, sorry for the lack of help.
Nov 14 '07 #6
mbatestblrock
164 100+
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.
Nov 14 '07 #7
acoder
16,027 Expert Mod 8TB
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.
Nov 14 '07 #8
mbatestblrock
164 100+
Thanks a ton. Well see how it goes...
Nov 14 '07 #9
Markus
6,050 Expert 4TB
Thanks a ton. Well see how it goes...
Wish you all the best :)

and let us know how you get along!
Nov 14 '07 #10
Plater
7,872 Expert 4TB
http://www.miserysignals.net/news_iframe.php

They did what I thought they did.

You create a rectangle, give it that nice "old-school paper" look and line up special images on the side. The "slider" is really a <img> that that y-coordinate is changed based on events (mouse clicks, drags etc).
Also based on those events, the scroll position for a <span> is changed to reflect approximate estimates for what text is shown. (Remember the overflow:auto )

If you'll notice, clicking the little up/down arrows makes the scroll very jumpy and not fluid, while dargging the slider is pretty smooth. You can use the "plain old" scroll bars for a more fluid control and just colorize them (I think that's a CSS standard now?)
Nov 14 '07 #11
steven
143 100+
http://www.miserysignals.net/news_iframe.php

They did what I thought they did.

You create a rectangle, give it that nice "old-school paper" look and line up special images on the side. The "slider" is really a <img> that that y-coordinate is changed based on events (mouse clicks, drags etc).
Also based on those events, the scroll position for a <span> is changed to reflect approximate estimates for what text is shown. (Remember the overflow:auto )

If you'll notice, clicking the little up/down arrows makes the scroll very jumpy and not fluid, while dargging the slider is pretty smooth. You can use the "plain old" scroll bars for a more fluid control and just colorize them (I think that's a CSS standard now?)
Ahem! There's no standard CSS for colouring scrollbars. That's specific to Internet explorer alone (thankfully).

Creating a customised scrollbar certainly isn't a cakewalk, it's something you'd need to work on and have a good understanding of HTML, CSS and Javascript, to be able to pull it off. If you want it done well, the scroll bar itself needs to represent the current amount of data shown, relative to the entire page size. It's a fairly simple calculation in itself. But then you have to control the movement of the nested content element whilst dragging the scrollbar. Also, scrollbars are a common user interface element which people are used to. So I wouldn't bother creating a customised scrolling area unless you're going to make it work with the mousewheel, as well as dragging, arrow keys aswell as the mousedrag on the bar and the arrow buttons. It's a lot of work. =]
Nov 15 '07 #12
mbatestblrock
164 100+
Ahem! There's no standard CSS for colouring scrollbars. That's specific to Internet explorer alone (thankfully).

Creating a customised scrollbar certainly isn't a cakewalk, it's something you'd need to work on and have a good understanding of HTML, CSS and Javascript, to be able to pull it off. If you want it done well, the scroll bar itself needs to represent the current amount of data shown, relative to the entire page size. It's a fairly simple calculation in itself. But then you have to control the movement of the nested content element whilst dragging the scrollbar. Also, scrollbars are a common user interface element which people are used to. So I wouldn't bother creating a customised scrolling area unless you're going to make it work with the mousewheel, as well as dragging, arrow keys aswell as the mousedrag on the bar and the arrow buttons. It's a lot of work. =]

I am beginning to think the same thing about just not messing with it. I was just thinking the deisng I am going to be working with will just look a bit tacky with the normal scroll bars, But oh well, I guess if I really want to get it done, I may stick with the ole' flash. I just dont know anything about JS. I am out of my element, as the great Walter Sobchak once said.
Nov 15 '07 #13
Plater
7,872 Expert 4TB
Ahem! There's no standard CSS for colouring scrollbars. That's specific to Internet explorer alone (thankfully).
I knew it wasn't part of it like many many years ago, but I thought it might have been included in one of the newer drafts of CSS. All well.
Nov 15 '07 #14
acoder
16,027 Expert Mod 8TB
I knew it wasn't part of it like many many years ago, but I thought it might have been included in one of the newer drafts of CSS. All well.
Don't expect it to ever be. A lot of people don't like their scrollbars coloured much like they don't like the browser resized.
Nov 15 '07 #15

Sign in to post your reply or Sign up for a free account.

Similar topics

13
by: Kai Grossjohann | last post by:
It seems that Ctrl-N in Mozilla opens a new empty browser window. That's fine, I don't need to do anything about it. But Ctrl-N in IE appears to clone the current window. Is there a way to...
4
by: D Newsham | last post by:
Hi, This javascript creates a table that has a header and side column that do not move while scrolling through the table. I need to convert this to vb script. Can anybody help, or do you have...
14
by: Karin Jensen | last post by:
Hi - I am trying to use Javascript to put material inside a table (i.e. alongside the previous material) if the user's screensize is big enough and outide the table (beneath table) if it isn't. ...
1
by: Bernie V | last post by:
Hi group, I use some javascript on my page to scroll some text. This is my situatiion: 1 aspx file : home.aspx with the main layout in the layout i use custom controls (ascx files) to show...
4
by: Peter Bons | last post by:
Hi all, I have an asp.net page with a button that has a javascript onclick method attached to it to display a modal dialog like this: If reportHasParameters Then 'add client side onclick()...
0
by: rodchar | last post by:
hey all, am i running the following javascript as fast as possible: All i'm trying to do is move an innerDIV via an outerDIV left and right. if i click real fast on the button it only moves one...
1
by: Raffi | last post by:
Hi, I have an application screen with a CSS scroll area. Users click links in the scroll area which open small popup windows to enter data. When the data is submitted, the popup reloads the...
9
by: mevryck | last post by:
Greetings I have a huge Javascript with inclusion of external scripts and all. I got this by doing a XSLT . Now I have the contents in a Javascript variable, but I'm not able to update the...
1
by: John L. | last post by:
How do I invoke the scroll() method of a window object for a scrollable IFRAME element in an HTML document? I am using IE 7.0, and I thought the following would work: ...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.