Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Scrolling the scrollbar in a list in html

Posted on 2016-11-06
9
Medium Priority
?
78 Views
Last Modified: 2016-11-30
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
0
Comment
Question by:Rohit Bajaj
  • 3
  • 3
  • 2
8 Comments
 
LVL 22

Expert Comment

by:Kim Walker
ID: 41876381
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
 
LVL 22

Expert Comment

by:Kim Walker
ID: 41876385
I should have tested this first. The scrollTop part doesn't work. I'll post another comment in a few minutes.
0
 
LVL 22

Assisted Solution

by:Kim Walker
Kim Walker earned 600 total points
ID: 41876398
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 83

Accepted Solution

by:
leakim971 earned 1400 total points
ID: 41876568
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
 

Author Comment

by:Rohit Bajaj
ID: 41887835
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
 
LVL 83

Assisted Solution

by:leakim971
leakim971 earned 1400 total points
ID: 41887952
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
 

Author Comment

by:Rohit Bajaj
ID: 41889323
Thanks that was awesome...
Whats the meaning behing number 4 and 8 used in the above code ?
0
 
LVL 83

Expert Comment

by:leakim971
ID: 41889397
Remove them and watch the difference.
This is some offset
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
Suggested Courses

877 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question