Drop down automatic scroll to selected data

Question

I have a drop down list using <li> method. I have no display problem selecting the data and highlighting the selected data. By default, the nearest (in future) time will be displayed the input. I want that onclick on the input (for the first time), it shows the drop down list, and automatically go to (scroll to) the respective value (the nearest (in future) time).

Just like when you click on the input, then choose the data (eg: 23:00), then close the list. And when you click again on the input, the list will display, and it will automatically scroll at the end to show the previously selected data (23:00).

Hopefully you can understand what i mean.

Here my jsfiddle drop down list

Thanks.

So to clarify; what you want is for it to scroll to the current time automatically? — Ampersand, Dec 19 '13 at 04:35
I think this can help to solve your problem. http://stackoverflow.com/a/2906009/1572987 — errorare, Dec 19 '13 at 04:41
And maybe look here if you want to find their local time: http://stackoverflow.com/questions/660927/how-can-i-obtain-the-local-time-in-jquery — Ampersand, Dec 19 '13 at 04:43

score 2 · Accepted Answer · answered Dec 19 '13 at 05:02

2

try this code

$('#textin1').click(function() {
        var pos = $('#textin1').offset();
        pos.top += $('#textin1').width();

        $('#dropdown').fadeIn(100);
       $('#dropdown').scrollTop($('#dropdown').find('li:contains("'+$('#textin1').val()+'")').position().top);
        return false;
    });

See js fiddle http://jsfiddle.net/w9j5N/1/

answered Dec 19 '13 at 05:02

Manish Jangir

4,834
4
30
60

@user Cache your selectors `var $el = $('#element');` – Roko C. Buljan Dec 19 '13 at 05:18

score 0 · Answer 2 · answered Dec 19 '13 at 05:14

LIVE DEMO

This one will;

read the current time
the UL will appear with a nice slide
theUL will scroll to that time-respective LI setting it in the view-center
and the ugly scrollbars will appear only on UL hover

Improved jQuery:

$(function(){ // DOM ready

  var $dd = $('#dropdown');
  var $t1 = $('#textin1');
  var $currHoursLI = $('li', $dd).eq( new Date().getHours() );
                                 // or use manually  i.e. .eq(23) to test

  $t1.click(function( e ) {
    e.stopPropagation();      
    var dH = $dd.height();
    var pos = $(this).offset(); 
    pos.top += $(this).width();   
    $currHoursLI.addClass('selected'); 
    $dd.stop().slideDown(200, function(){
       var liPos = $currHoursLI.position().top;
      $(this).animate({scrollTop : liPos-dH+dH/2}, 500);
    });      
  });

  $('li', $dd).click(function() {
    $t1.val($(this).text());
    $('li', $dd).removeClass('selected');
    $(this).addClass('selected').parent($dd).slideUp(200);
  });

  //to hide listing when on click anywhere
  $(document).click(function(e) {
    var t = e.target;
    if (!$(t).is($t1) && !$(t).parents().is($t1))$dd.slideUp(200);
  });

});

Slightly better CSS:

#dropdown {    
    margin:0;
    padding:0;
    position:absolute;
    display:none;
    border:1px solid #A4A4A4;
    width:100px;
    height:200px;
    background:#f9f9f9;
    text-align:center;
    list-style:none;
    overflow:hidden;
}
#dropdown:hover{
    overflow-y:scroll;
}
#dropdown li:hover, #dropdown .selected{
    background:#ccc; 
    cursor:pointer; 
}

Drop down automatic scroll to selected data

2 Answers2