scroll to contents in jQuery / CSS

Question

I was creating a simple select box in jQuery. Everything is fine except its scrolling.

I need to set the UL height with overflow, so that i can have a scrollbar.

Please see the jsfiddle : HERE

On the jsFiddle you can see that onKeyDown ( keyBoard down arrow ) selection will move down.

But after its height limit its not automatically scrolling down.

Looks like i am doing something wrong, Please help me.

Thanks.

UPDATE :

Guys, Please understand that the given example fiddle is just an example only. The Actual one differ.I updated my fiddle.

`ul` with `option` elements as children? Have you validated your HTML recently? — ahren, Mar 21 '13 at 11:19
add a scroll method when you add or remove classes, I think it'll do the job! — Midhun KM, Mar 21 '13 at 11:21
Just setting the css class does not tell the browser to scroll down. Look at this example on how to scroll a select. Maybe that will help you out. http://stackoverflow.com/questions/7205702/how-to-scroll-a-select-list-with-javascript-or-jquery — obivandamme, Mar 21 '13 at 11:24
you're trying to make a syntactically incorrect javascript powered replacement for a select box? I don't mean to be unhelpful but why not just use a select box? Aside from that, there are a few issues with your fiddle, including the fact that your selectors are looking for an `option` *element* rather than a class. This is probably why it appears to do nothing. — totallyNotLizards, Mar 21 '13 at 11:35
@jammypeach huh .. thats an example only dude .. i updated the fiddle. — Red, Mar 21 '13 at 11:51
@Red I understand that, however it's all we have to go on. Please consider pasting your real code so we can help solve the problem, otherwise all we can do is fix your example. Don't mean to be unhelpful or rude, I hope you understand :) — totallyNotLizards, Mar 21 '13 at 11:54
@ja thats cool dude .. actually the problem got solved. Please check obivandamme comment. — Red, Mar 21 '13 at 12:00

score 0 · Answer 1 · edited Feb 12 '16 at 12:11

0

Your markup is invalid:

<li class="option current">Option 1<li>

You not closing li properly. Should be:

<li class="option current">Option 1</li>

EDIT Add this bit of jQuery code to the end of yours:

$("#select").animate({
   scrollTop: $(".current").offset().top
}, 100);

This should give you an idea.

edited Feb 12 '16 at 12:11

John Slegers

answered Mar 21 '13 at 11:40

Morpheus

1 Answers1