Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Scrolling the scrollbar in a list in html

Posted on 2016-11-06
9
Medium Priority
?
75 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 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
Certified OpenStack Administrator Course

We just refreshed our COA course based on the Newton exam.  With 14 labs, this course goes over the different OpenStack services that are part of the certification: Dashboard, Identity Service, Image Service, Networking, Compute, Object Storage, Block Storage, and Orchestration.

 
LVL 82

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 82

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 82

Expert Comment

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

Featured Post

Application Discovery Service in AWS

In the era of the cloud, customers migrating away from their existing on-premise infrastructure. This requires lots of planning, strategies, and effort to identify their existing resources and determine how best to migrate.  Datacenter migrations happen in four phases -

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

715 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