Solved

Scrolling the scrollbar in a list in html

Posted on 2016-11-06
9
26 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
9 Comments
 
LVL 21

Expert Comment

by:Kim Walker
Comment Utility
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 21

Expert Comment

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

Assisted Solution

by:Kim Walker
Kim Walker earned 150 total points
Comment Utility
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
 
LVL 82

Accepted Solution

by:
leakim971 earned 350 total points
Comment Utility
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:Rohit Bajaj
Comment Utility
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
Comment Utility
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
Comment Utility
Thanks that was awesome...
Whats the meaning behing number 4 and 8 used in the above code ?
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
Remove them and watch the difference.
This is some offset
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

743 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now