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

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;
                }

---

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

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

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;
                }

---

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.

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.

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

Quote:

---

Originally Posted by ddadmin

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.

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!

Thanks for the plugin.
I am using the scroller for a table that has multiple textboxes. The table has many rows. The problem is when i press tab through the textboxes & go down(without using mouse) the scroller is moving up.

Thanks in advance

I'm not sure why that's happening. Could you post a link to a demo of the problem?

Hi John.

Thanks for the reply. I am not able to give you the link.So i am posting a sample of my code with a screenshot of the problem.


Sample:

<div rel='scrollcontent1'>
<table width="100%" border="0" cellpadding="0" cellspacing="2">
<tbody>
<tr>
<td width="15%">
A
</td>
<td width="15%">
B
</td>
<td width="15%">
C
</td>
<td width="15%">
D
</td>
<td width="15%">
E
</td>
</tr>
<%for(var i=0;i<100;i++)
{%>
<tr style="line-height: normal;">
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
<% } %>
</tbody>
</table>
</div>
Attachment 4730



Thanks in advance

Please use the forum's bbcode tags to make your post more readable:

for php code............[php] <?php /* code goes here */ ?> [/php]
for html...............[html] <!-- markup goes here -->.....[/html]
for js/css/other.......[code] code goes here................[/code]

Try this modified version of the script (right click and 'Save As'):

Attachment 4734

Demo

If that doesn't take care of it (works well here in a mock up in IE 9 in its IE 7, 8, and 9 modes, Chrome, Firefox), I would still need to see the page. If it comes to that, put up a page somewhere on the web that demonstrates the problem and give us a link to it. It can be an orphan page, and quite simple. All it has to do is show the problem.

Thanks a lot John. Its working perfect

Great! Um, actually I found a problem with it that I'm sure I can solve. I just haven't hit upon the ideal solution yet.

What happens is, if you select one of these inputs - say in the middle of the scrolling content, then use the scrollbar to scroll back up to where you can't see that input any longer, then hit tab, things still get out of alignment.

This handles that. It acts the same as before for normal tabbing. But if you scroll like I say and then tab, instead of going out of alignment, it jumps to the bottom first, then scrolls to the input:

Attachment 4737

But, as I say it's less than ideal, it should just scroll right to it without harming the alignment. If I figure that out, I'll let you know.

Oh, and I noticed that the generated table HTML code was kind of barfing in IE 9 so I tweaked it, removing all white space from the td's with the inputs in them fixed that. For some reason it was rendering two rows as longer than the others.

Ok. Its really very helpful to me. Thanks a lot for spending ur time to fix this issue...

OK, I think I have all the bases covered in all of the browsers. If so, this is the final update:

Attachment 4745

It doesn't need to jump to the end when handling those, what were problematic tab jumps. It also fixes a bug whereby in Opera, even with the last update you could still go out of alignment.

There is a possibility things might not yet be perfect. If you notice bugs, let me know.