Page 1 of 2 12 LastLast
Results 1 to 10 of 16

Thread: Ease Scroll Bar.

  1. #1
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default Ease Scroll Bar.

    1) CODE TITLE: Ease Scroll Bar.

    2) AUTHOR NAME/NOTES:
    Ease Scroll Bar. (21-November-2011)
    by Vic Phillips - http://www.vicsjavascripts.org.uk/





    3) DESCRIPTION:
    The script adds a custom scroll bar to a DIV element where the DIV content overflows the DIV size.
    With both vertical and horizontal modes of execution.
    The scroll bar slide may be dragged passed the scroll bar ends where it will be eased back to the scroll bar end.
    The DIV content may be scrolled to a specific element by mouseup of inline elements identified by class name.

    The functional code size is 4.51K.

    4) URL TO CODE: http://www.vicsjavascripts.org.uk/Ea...eScrollBar.htm

    or, ATTACHED BELOW (see #3 in guidelines below):
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Looks pretty neat! However, the demo page is off center in narrower windows. Like at 1024 x 768 (not too uncommon, especially with folks these days using smaller windows even on larger screens), there's a large blank area on the left and about a 3rd of the horizontal demo is off screen to the right. It can be scrolled into view using the window's horizontal scrollbar, but I think you hadn't intended that.

    In Opera, using the custom scrollbars sometimes selects text on the page. With the vertical one it's the text inside the scrollable element. With the horizontal one it's the text on the GoTo buttons. I imagine that for other browsers you're using something onselectstart return false to prevent that. IE has that, I forget the equivalent in Firefox, perhaps just onmousedown. I'm not sure if either of those work in Opera or if there's anything for that (the Opera developers may feel that should remain under the user's control), you may just have to live with it.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    I'm viewing in Firefox 8 (on a Mac). It works fine, but the horizontal example has a fixed-width red bar (eg, about one inch) that slides across, and on either side the space is yellow around it. (That is correct, I think.) But the vertical one never has any yellow space below the bar. The bar simply changes size as you drag the bar down so that more yellow appears above and the bar gets shorter. Is that intentional?
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  4. #4
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Thank you for your feedback

    I have tested the code with IE, FF Chrome, Opera and Safari on a PC

    and cannot replicate the text selection problem.

    As I do not have access to a Mac I cannot imagine what the scroll bar size problem is as it is set at start up and not changed after.

    however I have a version where I do not use percentage when sizing

    If you could try

    http://www.vicsjavascripts.org.uk/Ea...ar/111120B.htm

    on a Mac I would be obliged.
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  5. #5
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    Here's a screenshot (small so it would fit within the attachment limits) of what I see. Both scrollers are about 1/3 of the way scrolled. As you can see the horizontal one is fine, but the vertical one has extra red at the bottom. When it's all the way at the top (not scrolled down at all) the entire scrollbar column is red without any yellow.

    However, the other link you just sent worked fine without any issues like that. I'm not sure why.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  6. The Following User Says Thank You to djr33 For This Useful Post:

    vwphillips (11-24-2011)

  7. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    Thank you for djr33

    I have no idea why using percentage when sizing is a problem but I will change the script to avoid the issue.

    I am also considering adding options to position and size the scroll bar and slide
    rather than it being automatic.
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  8. #7
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    I have updated the script so it should be OK with a Mac.

    I have also included new options to position and size the scroll bar and slide
    in addition to being automatic.
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  9. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    With this new layout, there's no problem on narrower screens and Opera here is no longer selecting text while using the custom scrollbars. I can't speak to Mac
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #9
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    That fixed it for me too.

    Now that the script is working fully, I see only one problem: the scrollbar itself can "over-scroll", but the text doesn't. I don't think the text should significantly over-scroll, but maybe 10% would be a nice feature to give the "interactive" feeling that the scrollbars have. So basically just add a slight background-colored border to the side if you're trying to scroll past the text, but don't let it slide very far (as I said, about 10% is probably enough).
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  11. #10
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    djr33
    I have implemented your recommendations with the exception of

    a slight background-colored border to the side if you're trying to scroll past the text
    Thank you both for the feedback
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Bookmarks

Posting Permissions

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