Scrolling the scrollbar in a list in html

HI,
I have an html :
<ul>
   <li> A </li>
   <li> B </li>
  .
 .

<ul>
This is a drop down list.
Here is the styling i have given it :
ul {
    list-style: none;
    margin: 0;
    padding: 0 !important;
    max-height: 300px;
    overflow: hidden;
    overflow-y: scroll;
}

Open in new window


So due to this styling the drop down list gets clipped after 300 px and a scroll bar appears...
I have also added a keydown listener... which catches the up and down arrow and with each press the corresponding li element gets highlighted..
Now suppose the last element visible was <li> K </li> and this is highlighted due to pressing of down key several times..
And i again press the down key.. now none of the visible elements is highlighted. and when i scroll down using mouse i see the next element in the list after K is indeed highlighted... But the issue is i had to scroll using mouse.
what i want is the scrolling to also happen with up and down keys .

Thanks
Rohit BajajAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
test page : https://fiddle.jshell.net/58r7u84k/0/show/
(click on the list first)

<ul id="myList">
   <li> A </li>
   <li> B </li>
   <li> C </li>
   <li> D </li>
   <li> E </li>
   <li> F </li>
   <li> G </li>
   <li> H </li>
   <li> I </li>
   <li> J </li>
   <li> K </li>
   <li> L </li>
   <li> M </li>
   <li> N </li>
   <li> O </li>
   <li> P </li>
   <li> Q </li>
   <li> R </li>
   <li> S </li>
   <li> T </li>
   <li> U </li>
   <li> V </li>
   <li> W </li>
   <li> X </li>
   <li> Y </li>
   <li> Z </li>
<ul>

Open in new window

var KEY = {
		UP: 38,
		DOWN: 40,
		DEL: 46,
		TAB: 9,
		RETURN: 13,
		ESC: 27,
		COMMA: 188,
		PAGEUP: 33,
		PAGEDOWN: 34,
		BACKSPACE: 8
};

var position = 0;
var nbLI = 0;

$(document).keydown(function(e) {
    e.preventDefault();
    switch(e.keyCode) {
        case KEY.UP: updateList(--position);break;
        case KEY.DOWN: updateList(++position);break;
        default: break;
    }
}).ready(function() {
	nbLI = $("li","#myList").length;
	updateList();
});

var updateList = function() {
	if(position<0)
  	position=0;
  else if(position>=nbLI)
  	position=nbLI-1;
  $("li.highlight","#myList").removeClass("highlight");

	var highlighted = $("li:eq(" + position + ")","#myList");
	highlighted.addClass("highlight");
	var highlighted_vertical_position = highlighted.position().top;

	if(highlighted_vertical_position>$("#myList").innerHeight() || highlighted_vertical_position<0)
  	$("#myList").animate({scrollTop:highlighted_vertical_position});
}

Open in new window


https://jsfiddle.net/58r7u84k/
0
 
Kim WalkerWeb Programmer/TechnicianCommented:
Raw javascript has a scrollTo method and a scrollTop property. I'm not sure if there is a similar method in jQuery. You could do something along these lines:
var selected_li_top = document.getElementById('selected_li_id').scrollTop;
document.getElementById('parent_ul').scrollTo(0,selected_li_top);    // 0=x scroll

Open in new window

0
 
Kim WalkerWeb Programmer/TechnicianCommented:
I should have tested this first. The scrollTop part doesn't work. I'll post another comment in a few minutes.
0
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

 
Kim WalkerConnect With a Mentor Web Programmer/TechnicianCommented:
I should have used offsetTop instead of scrollTop. The correct code would be:
var selected_li_top = document.getElementById('selected_li_id').offsetTop;
document.getElementById('parent_ul').scrollTo(0,selected_li_top);    // 0=x scroll

Open in new window

The same can be accomplished in jQuery by using their scrollTop() method (different from raw javascript scrollTop property) and the position() method.
$('#parentUL').scrollTop($('#selected_li_id').position().top);

Open in new window

0
 
Rohit BajajAuthor Commented:
Hi,
The above seems to be working fine.. However i need one more help ...ie... i dont want to use jquery in it...
Can you please suggest equivalent javascript code ?
Thanks
0
 
leakim971Connect With a Mentor PluritechnicianCommented:
Test page : https://jsfiddle.net/58r7u84k/1/

var KEY = {
		UP: 38,
		DOWN: 40,
		DEL: 46,
		TAB: 9,
		RETURN: 13,
		ESC: 27,
		COMMA: 188,
		PAGEUP: 33,
		PAGEDOWN: 34,
		BACKSPACE: 8
};

var position = 0;
var nbLI = 0;

var checkKey = function(e) {
	e.preventDefault();
	switch(e.keyCode) {
		case KEY.UP: updateList(--position);break;
		case KEY.DOWN: updateList(++position);break;
		default: break;
	}
}

var doAtPageLoad = function() {
	nbLI = $("myList").getElementsByTagName("li").length;
	updateList();
};

if(document.addEventListener) {
	document.addEventListener('keydown', checkKey, false);
} else if (el.attachEvent) {
	el.attachEvent('onkeydown', checkKey);
}


if(window.addEventListener){
	window.addEventListener('load', doAtPageLoad, false);
} else if (el.attachEvent) {
	window.attachEvent('onload', doAtPageLoad);
}


var updateList = function() {
	if(position<0)
		position=0;
	else if(position>=nbLI)
		position=nbLI-1;

	var lis = $("myList").getElementsByTagName("li");
	var highlighted = lis[0];
	for(var i=0;i<lis.length;i++) {
		lis[i].className = "";
		if(i==position) 
			highlighted = lis[i];
	}
	highlighted.className = "highlight";

	var highlighted_vertical_position = getPosition(highlighted).top;

	if(highlighted_vertical_position>innerHeight($("myList")) || (highlighted_vertical_position-($("myList").scrollTop+4)<0))
		$("myList").scrollTop = highlighted_vertical_position-8;
};

var getPosition = function(obj) {
	var top = 0
	var left = 0;
	do {
		top += obj.offsetTop  || 0;
		left += obj.offsetLeft || 0;
		obj = obj.offsetParent;
	} while(obj);

	return { top: top, left: left };
};

var innerHeight = function(obj) {
	var style = window.getComputedStyle(obj, null);
	return style.getPropertyValue("height").replace(/\D/g,"")*1;
};

var $ = function(id) {
	return document.getElementById(id);
}

Open in new window

1
 
Rohit BajajAuthor Commented:
Thanks that was awesome...
Whats the meaning behing number 4 and 8 used in the above code ?
0
 
leakim971PluritechnicianCommented:
Remove them and watch the difference.
This is some offset
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.