Advanced Search

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

Thread: Slick Custom Scrollbar

  1. #1
    Join Date
    Mar 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Slick Custom Scrollbar

    http://www.dynamicdrive.com/dynamicindex11/scrollc.htm

    Thanks for this script its exactly what I wanted. How do you make the "rel.drag" object stop at the top and/or bottom of the "rel.bar"? instead of going beyond has it does by default.

    Thanks for your help
    Last edited by jscheuer1; 03-07-2012 at 03:17 PM. Reason: add link after split to new thread

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,707
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    Code:
        return this.each( function() {
            var direction = d.direction;
            var drag = {
                d: direction,
                t: $( this ).attr( "rel" ),
                id: $( this ),
                setdimensions: function(orientation) { //DD added function
                    if (orientation=="horizontal"){
                        drag.b.css( { width: drag.id.width(), left: 0, bottom: 0, position: "absolute", "z-index": 10 } );
                        drag.c.css( { display: "block", position: "absolute", height: drag.id.height() - drag.b.height() - 5, "overflow-y": "hidden" } );
                        drag.s.css( { width: drag.b.width(), top: 0, width: 70, height: drag.b.height(), position: "absolute", "z-index": 100 } );
                    	  drag.tickB = parseFloat( parseInt( drag.c.width() - drag.s.parent().width() ) / parseInt( drag.s.parent().width() - drag.s.width() ) );
                        drag.tickC = parseFloat( parseInt( drag.s.parent().width() - drag.s.width() ) / parseInt( drag.c.width() - drag.s.parent().width() ) );
                         return [drag.b.width()-drag.s.width(),drag.id.width()-drag.c.width()];
    								}
    								else{
                        drag.b.css( { height: drag.id.height(), right: 0, top: 0, position: "absolute" } );
                        drag.c.css( { display: "block", position: "absolute", width: drag.id.width() - drag.b.width() - 5 } );
                        drag.s.css( { width: drag.b.width(), top: 0, height: 70, position: "absolute" } );
                        drag.tickB = parseFloat( parseInt( drag.c.height() - drag.s.parent().height() ) / parseInt( drag.s.parent().height() - drag.s.height() ) );
                        drag.tickC = parseFloat( parseInt( drag.s.parent().height() - drag.s.height() ) / parseInt( drag.c.height() - drag.s.parent().height() ) );
                         return [drag.b.height()-drag.s.height(),drag.id.height()-drag.c.height()];
    							}
      					},
    Code:
                    switch ( drag.d ) {
                        case "horizontal":
                            drag.elements( "horizontal" );
                            var maxs=drag.setdimensions( "horizontal" );
                            drag.s.data( { click: false } );
                            drag.s.mouseover( function() {
                                drag.s.data( { click: true } );
                            });
                            drag.s.mouseout( function() {
                                drag.s.data( { click: false } );
                            });
                            drag.s.mousedown( function( f ) {
                                f.preventDefault();
                                drag.s.data( { hold: false } );
                                var initial = drag.s.parent().offset().left - ( drag.s.offset().left - f.pageX );
                                $( document ).mousemove( function( e ) {
                                    e.preventDefault();
                                    if ( drag.s.data( "hold" ) == false )
                                    {
                                        drag.s.css( { left: Math.min(Math.max(e.pageX - initial,0),maxs[0]) } );
                                        drag.c.css( { left: Math.max(Math.min(- drag.tickB * ( e.pageX - initial ),0),maxs[1]) } );
                                    }
                                });
                            });
                            $( document ).mouseup( function() {
                                drag.redrawH();
                            });
                            drag.b.click( function( e ) {
                                if ( drag.s.data( "click" ) == false )
                                {
                                    var initial = drag.s.parent().offset().left + ( drag.s.width() / 2 );
                                    drag.s.animate( { left: e.pageX - initial } );
                                    drag.c.animate( { left: - drag.tickB * ( e.pageX - initial ) }, {
                                        complete: function() {
                                            drag.redrawH();
                                        }
                                    });
                                }
                            });
                        break;
                        case "vertical":
                            drag.elements( "vertical" );
                            var maxs=drag.setdimensions( "vertical" );
                            drag.s.data( { click: false } );
                            drag.s.mouseover( function() {
                                drag.s.data( { click: true } );
                            });
                            drag.s.mouseout( function() {
                                drag.s.data( { click: false } );
                            });
                            drag.s.mousedown( function( f ) {
                                f.preventDefault();
                                drag.s.data( { hold: false } );
                                var initial = drag.s.parent().offset().top - ( drag.s.offset().top - f.pageY );
                                $( document ).mousemove( function( e ) {
                                    e.preventDefault();
                                    if ( drag.s.data( "hold" ) == false )
                                    {
                                      drag.s.css( { top: Math.min(Math.max(e.pageY - initial,0),maxs[0]) } );
                                        drag.c.css( { top: Math.max(Math.min(- drag.tickB * ( e.pageY - initial ),0),maxs[1]) } );
                                    }
                                });
                            });
                            $( document ).mouseup( function() {
                                drag.redrawV();
                            });
                            drag.b.click( function( e ) {
                                if ( drag.s.data( "click" ) == false )
                                {
                                    var initial = drag.s.parent().offset().top + ( drag.s.height() / 2 );
                                    drag.s.animate( { top: e.pageY - initial } );
                                    drag.c.animate( { top: - drag.tickB * ( e.pageY - initial ) }, {
                                        complete: function() {
                                            drag.redrawV();
                                        }
                                    });
                                }
                            });
                        break;
                    }
    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/

  3. #3
    Join Date
    Mar 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up Thank you so so much...

    You are the best, worked perfect right up. Thank you so so much I really appreciate it

  4. #4
    Join Date
    Mar 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Cool How to allow scrolling while not right over the drag?

    http://www.dynamicdrive.com/dynamicindex11/scrollc.htm

    How to allow scrolling while not right over the drag? I would like the user to be able to scroll while being anywhere over the scrolling window.

    here is my page: http://djilali.com/resume.html

    I just want to make sure the user will not miss the scrolling option.

    Thanks in advance

  5. #5
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,707
    Thanks
    2
    Thanked 388 Times in 383 Posts

    Default

    Code:
                    switch ( drag.d ) {
                        case "horizontal":
                            drag.elements( "horizontal" );
                            var maxs=drag.setdimensions( "horizontal" );
                            drag.s.data( { click: false } );
                            drag.s.mouseover( function() {
                                drag.s.data( { click: true } );
                            });
                            drag.s.mouseout( function() {
                                drag.s.data( { click: false } );
                            });
                            drag.id.mouseover( function( f ) {
                                f.preventDefault();
                                drag.s.data( { hold: false } );
                                var initial = drag.s.parent().offset().left - ( drag.s.offset().left - f.pageX );
                                $( document ).mousemove( function( e ) {
                                    e.preventDefault();
                                    if ( drag.s.data( "hold" ) == false )
                                    {
                                        drag.s.css( { left: Math.min(Math.max(e.pageX - initial,0),maxs[0]) } );
                                        drag.c.css( { left: Math.max(Math.min(- drag.tickB * ( e.pageX - initial ),0),maxs[1]) } );
                                    }
                                });
                            });
                            drag.s.mousedown( function( f ) {
                                f.preventDefault();
                                drag.s.data( { hold: false } );
                                var initial = drag.s.parent().offset().left - ( drag.s.offset().left - f.pageX );
                                $( document ).mousemove( function( e ) {
                                    e.preventDefault();
                                    if ( drag.s.data( "hold" ) == false )
                                    {
                                        drag.s.css( { left: Math.min(Math.max(e.pageX - initial,0),maxs[0]) } );
                                        drag.c.css( { left: Math.max(Math.min(- drag.tickB * ( e.pageX - initial ),0),maxs[1]) } );
                                    }
                                });
                            });
                            $( document ).mouseup( function() {
                                drag.redrawH();
                            });
                            drag.b.click( function( e ) {
                                if ( drag.s.data( "click" ) == false )
                                {
                                    var initial = drag.s.parent().offset().left + ( drag.s.width() / 2 );
                                    drag.s.animate( { left: e.pageX - initial } );
                                    drag.c.animate( { left: - drag.tickB * ( e.pageX - initial ) }, {
                                        complete: function() {
                                            drag.redrawH();
                                        }
                                    });
                                }
                            });
                        break;
                        case "vertical":
                            drag.elements( "vertical" );
                            var maxs=drag.setdimensions( "vertical" );
                            drag.s.data( { click: false } );
                            drag.s.mouseover( function() {
                                drag.s.data( { click: true } );
                            });
                            drag.s.mouseout( function() {
                                drag.s.data( { click: false } );
                            });
                            drag.id.mouseover( function( f ) {
                                f.preventDefault();
                                drag.s.data( { hold: false } );
                                var initial = drag.s.parent().offset().top - ( drag.s.offset().top - f.pageY );
                                $( document ).mousemove( function( e ) {
                                    e.preventDefault();
                                    if ( drag.s.data( "hold" ) == false )
                                    {
                                      drag.s.css( { top: Math.min(Math.max(e.pageY - initial,0),maxs[0]) } );
                                        drag.c.css( { top: Math.max(Math.min(- drag.tickB * ( e.pageY - initial ),0),maxs[1]) } );
                                    }
                                });
                            });
                            drag.s.mousedown( function( f ) {
                                f.preventDefault();
                                drag.s.data( { hold: false } );
                                var initial = drag.s.parent().offset().top - ( drag.s.offset().top - f.pageY );
                                $( document ).mousemove( function( e ) {
                                    e.preventDefault();
                                    if ( drag.s.data( "hold" ) == false )
                                    {
                                      drag.s.css( { top: Math.min(Math.max(e.pageY - initial,0),maxs[0]) } );
                                        drag.c.css( { top: Math.max(Math.min(- drag.tickB * ( e.pageY - initial ),0),maxs[1]) } );
                                    }
                                });
                            });
                            $( document ).mouseup( function() {
                                drag.redrawV();
                            });
                            drag.b.click( function( e ) {
                                if ( drag.s.data( "click" ) == false )
                                {
                                    var initial = drag.s.parent().offset().top + ( drag.s.height() / 2 );
                                    drag.s.animate( { top: e.pageY - initial } );
                                    drag.c.animate( { top: - drag.tickB * ( e.pageY - initial ) }, {
                                        complete: function() {
                                            drag.redrawV();
                                        }
                                    });
                                }
                            });
                        break;
                    }
    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/

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,690
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

    Default

    I'm not sure if that would be acceptable. If it's not, there's a jQuery mousewheel plugin:

    http://brandonaaron.net/code/mousewheel/docs

    That could possibly be adapted to allow scrolling the mousewheel while over the drag.id to move both the content and the scrollbar.

    I think it allows you to easily get the wheel delta (how much the wheel has been turned and in which direction) cross browser as an event for a given element.

    Not sure if the amount of delta is reliable cross browser. I know the direction is.

    Works well in some other scripts that I've seen use it. But they might have only needed to know direction.

    I'm pressed for time right now or I'd try my hand at it myself, maybe later.

    Vic, great job on the first part (limiting the scrollbar range)! That had been bugging me about this script from the beginning. I even made a bug report about it. But ddadmin said, "It isn't a bug, it's a feature." I had thought to try working out a solution, but one has to pick one's projects, as I'm sure you know . . .

    Anyways, hope this works out.
    - John
    ________________________

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

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,690
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

    Default

    I actually found the time and it works! Use this updated version of the script (right click and 'save as'):

    Attachment 4394

    It includes Vic's excellent update fixing that nasty overscroll behavior. Thanks Vic!

    It also has code that allows it to respond to the mousewheel using jquery.mousewheel.min.js from (click and save, extract the jquery.mousewheel.min.js file from the archive's jquery-mousewheel-3.0.6 folder):

    https://github.com/downloads/brandon...heel-3.0.6.zip

    On your page, just use the your updated slickcustomscroll.js script from this post and make a link to your copy of the mousewheel script after the one to jQuery (from your page's source code, addition highlighted):

    Code:
    .tdback { background-image: url(images/bottom_bar.jpg);}
    -->
    .style1 {color: #FFFFFF}
    .style2 {color: #CCCCCC}
        
    </style>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.mousewheel.min.js"></script>
    
    <script src="slickcustomscroll.js">
    
    	/***********************************************
    	* Slick Custom Scrollbar script (c) Dynamic Drive (www.dynamicdrive.com)
    	* This notice MUST stay intact for legal use
    	* Visit http://www.dynamicdrive.com/ for this script and 100s more.
    	***********************************************/
    
    </script>
    
    
    <script type="text/javascript">
        
        /*
            Usage:
                HTML: Insert your content into a DIV element with an unique rel="" attribute.
                    <div rel="the-unique-i . . .
    That's it!

    Demo (use your mousewheel while over either of the scrollers or scrollbars):

    http://home.comcast.net/~jscheuer1/s..._scroll_mw.htm

    Notes:

    If you don't have/use jquery-mousewheel, there will be no error, but neither will there be any mousewheel support.

    The browser cache may need to be cleared and/or the page refreshed to see changes.
    Last edited by jscheuer1; 03-10-2012 at 01:58 AM. Reason: correct direction for horizontal mousewheel
    - John
    ________________________

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

  8. #8
    Join Date
    Aug 2004
    Posts
    9,863
    Thanks
    3
    Thanked 960 Times in 949 Posts
    Blog Entries
    15

    Default

    Wow, very nice additions John and Vic, thanks! I'll most likely incorporate the changes to the official version of the script next week.
    DD Admin

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,690
    Thanks
    43
    Thanked 3,129 Times in 3,095 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by ddadmin View Post
    Wow, very nice additions John and Vic, thanks! I'll most likely incorporate the changes to the official version of the script next week.
    Neat! I just updated the script and my demo again to allow for some overscroll, as you had said before it was a feature because it gives it an elastic feel. I've made that the default - a 20px overscroll allowed. You can specify it in the on page call via the bounce parameter if you want different:

    Code:
        $( document ).ready( function() {
            $( "div[rel='scrollcontent1']" ).customscroll( { direction: "vertical"} );
            $( "div[rel='scrollcontent2']" ).customscroll( { direction: "horizontal", bounce: 0 } );
        });
    With that code (from my updated demo, same address as before), the first scroller allows the default 20px bounce which I think does give it a cool elastic feel without allowing a ton of blank space to be scrolled into view.

    The second scroller with bounce: 0 allows no overscroll. It reacts just like an overflow scroll div - no elasticity at the ends.

    And it can be set to other values if someone wants to. Like 10, which would still give some elasticity, just not as much as the default. Or 2000 which would in most cases be essentially how the script acted before when there were no limits on overscrollong.
    - John
    ________________________

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

  10. #10
    Join Date
    Aug 2004
    Posts
    9,863
    Thanks
    3
    Thanked 960 Times in 949 Posts
    Blog Entries
    15

    Default

    Just a heads up the official version of Slick Scrollbar has just been updated with Vic/John's improvements and labeled v1.1: http://www.dynamicdrive.com/dynamicindex11/scrollc.htm

    Thanks again!
    DD Admin

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
  •