www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 17

Thread: Scrolling Div Content with Graphical Scrollbars

Hybrid View

  1. #1
    Join Date
    Jan 2010
    Posts
    10

    Question Scrolling Div Content with Graphical Scrollbars

    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":

    Code:
    // 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":

    Code:
    <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!

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    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.

  3. #3
    Join Date
    Jan 2010
    Posts
    10
    Quote Originally Posted by Fang View Post
    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.

    Code:
    <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>").

  4. #4
    Join Date
    Jan 2010
    Posts
    10
    Correction: I mean W3C.org.

  5. #5
    Join Date
    Jan 2010
    Posts
    10
    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.

  6. #6
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    I don't see div enclosed by anchors in the instructions?

  7. #7
    Join Date
    Jan 2010
    Posts
    10
    Quote Originally Posted by Fang View Post
    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>)

  8. #8
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    The Vertical Scrolling from dyn-web validates.
    Where in the code does the '<div> inside an <a>' come from?

  9. #9
    Join Date
    Jan 2010
    Posts
    10
    Quote Originally Posted by Fang View Post
    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:

    Code:
    <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.

  10. #10
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Use span's or create the triangles as images.

  11. #11
    Join Date
    Jan 2010
    Posts
    10
    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.

  12. #12
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    The original script does stop scrolling. Did you use spans or images? It's possible the mouseout only works with images.

  13. #13
    Join Date
    Jan 2010
    Posts
    10
    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.
    Last edited by Tenticals; 01-06-2010 at 06:02 AM.

  14. #14
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    That's only in IE, all other browsers stop scrolling.

  15. #15
    Join Date
    Jan 2010
    Posts
    10
    Quote Originally Posted by Fang View Post
    That's only in IE, all other browsers stop scrolling.
    It also happens in Firefox:

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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles