November 22, 2003

Custom Scroll Bar

Just learned how to do the custom scroll bar. You can see the scroll bar here on the [My News] section. ZORT!

I am including a quick and dirty step of achieving this:

1. Grab the ypSimpleScroll first. If you are a HizzleCizzle (HardCore) programmer and prefer to write even this Javascript by yourself, hey be my guest. :) But, I used this ypSimpleScroll 'cause it saved me a hell of lot of time. Anyways, if you are a "hizzlecizzle" programmer you wouldn't be wondering around here anyways, would you? :)

2. There are many examples in the site that might suit your needs. But, if you want to do something like what I did, then download the .zip file from the above site and unzip it.

3. Now, go into the directory called onMouseOver. You will see a index.html file there. Note the javascript codes and the <div> codes.

4. Grab some up and down gifs from the internet that suits your webpage.

5. Put the following lines in between the <head> </head>tag: 

<script language="javascript" src="yourscriptpath/ypSimpleScrollC.js">
</script>
<script language="javascript">
        var yourobject  = new ypSimpleScroll("myScroll", 0, 20, 150, 190, 100, 150)
</script>

6. As you can see, there are 6 numbers in the ypSimpleScroll constructor. Those numbers are your "magic" numbers to get your custom scroll bar right. I will give a quick rundown of what they mean: 

    

  • iInitLeft: this number is the initial number where you want your IFRAME 
    or scroller to start from the left. It is relative to the left margin of page or IFRAME.

    • 

  • iInitTop: this number is the initial number where you want your IFRAME 
    or scroller to start from the top. It is relative to the top margin of page or IFRAME.

    • 

  • iWidth:this is the width of the scroller area.

    • 

  • iHeight:this is the height of the scroller area.

    • 

  • iSpeed:this is the speed the scroller will scroll. measured at pixels/sec.

    • 

  • iContentWidth:this is the width for the scroller to scroll horizontally.
    It must be greater than the width of the scroller.

    • 

  • iInitScrollLeft:this is the initial value for the DHTML scrollLeft property.

    • 

  • iInitScrollTop:this is the initial value for the DHTML scrollTop property.

    •

7. Now put your content in between the following two <div>s: 

<div id="myScrollContainer">
<div id="myScrollContent">
      [content goes here]
</div>
</div>
Note that the "myScroll" of "myScrollContainer" and "myScrollContent" is from the ypSimpleScroll constructor above.

8. Finally, for the up and down images add the following code: 

<a href="#" onmouseover="yourobject.scrollNorth()" onmouseout="yourobject.endScroll()">
<img src="images/up.gif" border="0"></a>
<a href="#" onmouseover="yourobject.scrollSouth()" onmouseout="yourobject.endScroll()">
<img src="images/down.gif" border="0">

You can get more explanation of the ypSimpleScroller here or go here to see more implementation example of the scroller.

Thanks to yougpup for providing such fabulous scripts.


Posted by zeeky at 07:45 PM | Comments (0)