New on DHTMLGoodies.com:

DHTML Chess Wordpress Plugin (Beta) . Participate in the beta testing of the DHTML Chess for WordPress plugin, and receive a free Commercial License worth USD99.

Download Scrollable div

Demo

Remember a strict doctype

A strict doctype is your biggest ensurance for this script to look and work the same across different browsers

Put this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
at the top of your HTML file

Put this into your <HEAD> section

Put this into your <BODY> section

Copy these two images into a folder called "images"

Right click on the arrows and choose "Save target As". If you want to, you could replace these two images with your own version

Implementation

Content

Put the content you want to scroll right below the line <!-- PUT YOUR HTML CONTENT IN HERE --> in the code

Javascript configuration

Use these javascript methods to configure the script:

  1. scrolldiv_setColor(rgbColor) - Specify a new border color
  2. setSliderBgColor(rgbColor) - Specify a background color for the scrollbar
  3. setContentBgColor(rgbColor) - Specify a background color for the scrolling content
  4. setScrollButtonSpeed(newSpeed) - Increase the scrolling speed(Default = 1)
  5. setScrollTimer(newInterval) - Lower value = faster scrolling(Default = 10)
  6. scrolldiv_setWidth(newWidth) - Specify a new width
  7. scrolldiv_setHeight(newHeight) - Specify a new height
  8. scrolldiv_initScroll() - Initializing the scrolling div. The functions above are optional, this one is needed for the script to work

For further information, see how these functions are used in the code.

Comments

Carlos Alberto Bessa
Hi! My name is Carlos, I am brazilian! First of all, Scrollable div is very wonderful to my project. But I can't make interface with asiatic, russian, arabic caractere, please help me about it>
Thank you very much!
Carlos Alberto Bessa at 02:07PM, 2011/04/01.
Carlos Alberto Bessa
Carlos Alberto Bessa wrote:
Hi! My name is Carlos, I am brazilian! First of all, Scrollable div is very wonderful to my project. But I can't make interface with asiatic, russian, arabic caractere, please help me about it>
Thank you very much!


Carlos Alberto Bessa at 01:12PM, 2011/04/04.
arjunK
hey ...
the head code for this should be shortened...
the javascript can be packagd int an external file, of .js format
and the css part can be saved in a .css file with a stylesheet reference in the head section.
arjunK at 03:22AM, 2011/06/01.
Gregg
I am trying to run three instances of this script on one page, the first one works perfectly but the other two are dead, they appear properly but they dont scroll at all ...

Has anyone got an idea what the problem may be?
Gregg at 10:48PM, 2011/06/04.
Cyd
I want to add a scroll handle, but I'm having trouble. Not so javascript saavy, but figure it must have something to do with changing the var var scrollHandleObj = from false to true? Or should it be another value? I'm also not sure how to make the handle indicate how much content there is to scroll through, as a regular scroll bar does on the edge of the browser window.
Cyd at 07:04PM, 2012/01/30.
Udara
Wonderful tool, I also like to, PLz let us how can we add multile scrollble div in ONE page ???
Udara at 02:22AM, 2012/09/05.
Latte
I am not too JS savvy, so sorry if this is a stupid question -

Is there a way to make this scroll only on click to a specific distance in pixels? Using it to scroll vertically in this instance.

Thanks in advance!!
Latte at 01:37PM, 2013/06/05.
Melanieacecy
XRumer 12.0.19 is the BEST
Melanieacecy at 05:04AM, 2016/10/23.
RAHUL KHAN
Hello,

I have implement this plugin successfully for crome and mozilla firefox but this not working on internet explorer,

Please suggest me, How i solve this?
RAHUL KHAN at 03:25AM, 2017/01/02.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2017 dhtmlgoodies.com