Slick Custom Scrollbar

[meena]

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

[jscheuer1]

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

[meena]

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>




Thanks in advance

[keyboard]

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]

[jscheuer1]

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

slickcustomscroll.js

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.

[meena]

Thanks a lot John. Its working perfect

[jscheuer1]

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:

slickcustomscroll.js

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.

[meena]

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

[jscheuer1]

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

slickcustomscroll.js

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.