Solved

Scrolling the scrollbar in a list in html

Posted on 2016-11-06
9
61 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2
9 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 150 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
Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

 
LVL 82

Accepted Solution

by:
leakim971 earned 350 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 82

Assisted Solution

by:leakim971
leakim971 earned 350 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 82

Expert Comment

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

Featured Post

How Do You Stack Up Against Your Peers?

With today’s modern enterprise so dependent on digital infrastructures, the impact of major incidents has increased dramatically. Grab the report now to gain insight into how your organization ranks against your peers and learn best-in-class strategies to resolve incidents.

Question has a verified solution.

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

Suggested Solutions

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Find out what you should include to make the best professional email signature for your organization.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

749 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