Scrolling Div Content with Graphical Scrollbars

[Tenticals]

Recently I found an online tutorial to create scrolling DIV content with graphical scrollbars. Before reading on you may want to take a look at the link below:

http://www.dyn-web.com/code/scroll/vert.php (vertical scrolling)

The original source code for the scrolling DIV content can be found here:

http://www.dyn-web.com/zipped/dw_scroll.zip

In the extracted folder you should look for the HTML page named “scroll_v.html”.

I tried to find a way to integrate this code in my web site. Unfortunately the person who made this code does not provide support. I would really appreciate if someone would be willing to take a look at the code and my questions below.

Questions:

1. I would like to use a standard link to my external stylesheet file. So the stylesheet should not be created dynamically. Which piece of code should I delete when I choose to include my own stylesheet? What should I pay attention to when doing this? After all, my stylesheet should fully work without obstructing the intentions of the Javascript code.

The following code originates from "scroll_v.html":

// if code supported, link in the style sheet and call the init function onload
if ( dw_scrollObj.isSupported() ) {
    //dw_writeStyleSheet('css/scroll.css');
    dw_Event.add( window, 'load', init_dw_Scroll);
}

2. I assume the class “mouseover_up” and “mouseover_down” should not be specified in the stylesheet, because they are not related to CSS at all, am I right? I do not understand how these two classes (which are recognized as handles) can be written in the HTML code as though they are related to CSS.

The following code originates from "scroll_v.html":

<div id="scrollLinks">
    <a class="mouseover_up" href="#"><img src="images/tri-up.gif" alt="" border="0" /></a>
    <a class="mouseover_down" href="#"><img src="images/tri-dn.gif" alt="" border="0" /></a>
</div>

3. Instead of two images of triangles I would like to use CSS triangles as shown here:

http://www.howtocreate.co.uk/tutorials/css/slopes

I guess this means that class names like “mouseover_up” and “mouseover_down” should be associated with a DIV. How can this be realized? For example, it does not work when I add a class “mouseover_up” to the DIV.

Please take into account that I am quite new to Javascript. Thanks in advance!

[Fang]

1. This is the style sheet for the scrolling div effect. It is only added if the browser is capable of producing the effect. Your own css can be added in the normal way.

2. Not in your own css. They are used in scroll.css

3. Change the image src's given in the code in #2.
Follow the instructions. Do not change anything else.

[Tenticals]

1. This is the style sheet for the scrolling div effect. It is only added if the browser is capable of producing the effect. Your own css can be added in the normal way.

2. Not in your own css. They are used in scroll.css

3. Change the image src's given in the code in #2.
Follow the instructions. Do not change anything else.

Thanks, this works. However, I think it is strange to have a <DIV> element inside an <A> element.

<div id="scrollLinks">
    <a class="mousedown_up" href="#"><div class="triangle"><div id="triangle_up"></div></div></a>
    <a class="mousedown_down" href="#"><div class="triangle"><div id="triangle_down"></div></div></a>
</div>

The Markup Validation Service of W3S.org returns the following error (2 times):

Line 54, Column 59: document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag
<a class="mousedown_up" href="#"><div class="triangle"><div id="triangle_up"></div></div></a>

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

[Tenticals]

Correction: I mean W3C.org.

[Fang]

I don't see div enclosed by anchors in the instructions?

[Tenticals]

Update:

As you can see in the code above I changed “mouseover_up” and “mouseover_down” into “mousedown_up” and “mousedown_down”.

However, something undesirable happens now. When I click on the triangle and choose to leave the area of the triangle (the button is not released yet!) then the DIV area keeps scrolling. Of course it should only scroll when the button is clicked on and the pointer is inside the triangle area.

[Tenticals]

I don't see div enclosed by anchors in the instructions?

I am not sure what you are trying to say.

"<a><div></div></a>" (<div> inside an <a>)

[Fang]

The Vertical Scrolling from dyn-web validates.
Where in the code does the '<div> inside an <a>' come from?

[Tenticals]

The Vertical Scrolling from dyn-web validates.
Where in the code does the '<div> inside an <a>' come from?

Thanks for your reply.

I would like to refer to the 3rd question in my 1st post:

3. Instead of two images of triangles I would like to use CSS triangles as shown in the link below.

http://www.howtocreate.co.uk/tutorials/css/slopes

I guess this means that class names like “mouseover_up” and “mouseover_down” should be associated with a DIV. How can this be realized? For example, it does not work when I add a class “mouseover_up” to the DIV.

CSS triangles are NOT images and therefore cannot be treated as such. They can only be realized as follows:

<div id="triangle">
 <div id="triangle_up">
 </div>
 <div id="triangle_down">
 </div>
</div>

I would like to substitute the images of the triangles by these two CSS triangles (triangle_up and triangle_down).

So I substituted the <IMG> element in the original code by these <DIV> elements. Unfortunately this is no proper XHTML.

[Fang]

Use span's or create the triangles as images.

[Tenticals]

Almost everything is solved. There is only one problem remaining. When I leave the area of the scroll buttons (triangles) and the mouse button has not been released yet, the content keeps scrolling.

I would like the content to stop scrolling when the mouse pointer leaves the area of the scroll buttons.

[Fang]

The original script does stop scrolling. Did you use spans or images? It's possible the mouseout only works with images.

[Tenticals]

Thanks for your reply.

I get the same problem when I use the original source code. When I click on the mouse button (and do not release the mouse button) and directly leave the area of the scroll button vertically (downwards for triangle_down.gif and upwards for triangle_up.gif) the scrolling continues.

[Fang]

That's only in IE, all other browsers stop scrolling.

[Tenticals]

That's only in IE, all other browsers stop scrolling.

It also happens in Firefox:

http://www.dyn-web.com/code/scroll/vert.php