To get Horizontal Scroll Bar in list Box using HTML and java Script
I am unable to get horizontal scroll bar in list box using HTML and java script. By default list box displays vertical scroll bar. I have used div tag to get horizontal scroll bar in it . But on moving the horizontal scroll bar, whole of the list box moves instead of item scrolling.
I have attached the code. pls run it and see the problem.
<html>
<body >
<head>
<script language="javascript">
//On scrolling of DIV tag.
function OnDivScroll()
{
var lstCollegeNames = document.getElementById("lstCollegeNames");
//The following archives two things while scrolling
//a) On horizontal scrolling: To avoid vertical scroll bar in select box when the size of
// the selectbox is 8 and the count of items in selectbox is greater than 8.
//b) On vertical scrolling: To view all the items in selectbox
//Check if items in selectbox is greater than 8, if so then making the size of the selectbox to count of
//items in selectbox,so that vertival scrollbar won't appear in selectbox
if (lstCollegeNames.options.length > 8)
{
lstCollegeNames.size=lstCollegeNames.options.length;
}
else
{
lstCollegeNames.size=8;
}
}
//On focus of Selectbox
function OnSelectFocus()
{
//On focus of Selectbox, making scroll position of DIV to very left i.e 0 if it is not. The reason behind
//is, in this scenario we are fixing the size of Selectbox to 8 and if the size of items in Selecbox is greater than 8
//and to implement downarrow key and uparrow key functionality, the vertical scrollbar in selectbox will
//be visible if the horizontal scrollbar of DIV is exremely right.
if (document.getElementById("divCollegeNames").scrollLeft != 0)
{
document.getElementById("divCollegeNames").scrollLeft = 0;
}
var lstCollegeNames = document.getElementById('lstCollegeNames');
//Checks if count of items in Selectbox is greater than 8, if yes then making the size of the selectbox to 8.
//So that on pressing of downarrow key or uparrowkey, the selected item should also scroll up or down as expected.
if( lstCollegeNames.options.length > 8)
{
lstCollegeNames.focus();
lstCollegeNames.size=8;
}
}
</script>
</head>
<div id="divCollegeNames" style="OVERFLOW: auto;WIDTH: 304px;HEIGHT: 147px"
onscroll="OnDivScroll();">
<SELECT id="lstCollegeNames" size="8" multiple onfocus="OnSelectFocus();">
<OPTION>St. Xavier's College, Ahmedabad</OPTION>
<OPTION>St. Joseph's College, Bangalore</OPTION>
<OPTION>St. Xavier's College, Mumbai</OPTION>
<OPTION>Sacred Heart College, Thevara, Ernakulam, Kerala</OPTION>
<OPTION>Research Foundation for Science, Technology and Natural Resource Policy,
Bangalore</OPTION>
<OPTION>Jawaharlal Nehru University (JNU), New Delhi</OPTION>
<OPTION>ISRO Telemetry Tracking Command Network (ISTRAC),Bangalore</OPTION>
<OPTION>Defence Electronics Research Laboratory, Hyderabad</OPTION>
<OPTION>All-India Institute of Medical Sciences (AIIMS), Delhi</OPTION>
<OPTION>Indian Institue of Management, Ahmedabad</OPTION>
</SELECT>
</div>
</body>
</html>
I have attached the code. pls run it and see the problem.
<html>
<body >
<head>
<script language="javascript">
//On scrolling of DIV tag.
function OnDivScroll()
{
var lstCollegeNames = document.getElementById("lstCollegeNames");
//The following archives two things while scrolling
//a) On horizontal scrolling: To avoid vertical scroll bar in select box when the size of
// the selectbox is 8 and the count of items in selectbox is greater than 8.
//b) On vertical scrolling: To view all the items in selectbox
//Check if items in selectbox is greater than 8, if so then making the size of the selectbox to count of
//items in selectbox,so that vertival scrollbar won't appear in selectbox
if (lstCollegeNames.options.length > 8)
{
lstCollegeNames.size=lstCollegeNames.options.length;
}
else
{
lstCollegeNames.size=8;
}
}
//On focus of Selectbox
function OnSelectFocus()
{
//On focus of Selectbox, making scroll position of DIV to very left i.e 0 if it is not. The reason behind
//is, in this scenario we are fixing the size of Selectbox to 8 and if the size of items in Selecbox is greater than 8
//and to implement downarrow key and uparrow key functionality, the vertical scrollbar in selectbox will
//be visible if the horizontal scrollbar of DIV is exremely right.
if (document.getElementById("divCollegeNames").scrollLeft != 0)
{
document.getElementById("divCollegeNames").scrollLeft = 0;
}
var lstCollegeNames = document.getElementById('lstCollegeNames');
//Checks if count of items in Selectbox is greater than 8, if yes then making the size of the selectbox to 8.
//So that on pressing of downarrow key or uparrowkey, the selected item should also scroll up or down as expected.
if( lstCollegeNames.options.length > 8)
{
lstCollegeNames.focus();
lstCollegeNames.size=8;
}
}
</script>
</head>
<div id="divCollegeNames" style="OVERFLOW: auto;WIDTH: 304px;HEIGHT: 147px"
onscroll="OnDivScroll();">
<SELECT id="lstCollegeNames" size="8" multiple onfocus="OnSelectFocus();">
<OPTION>St. Xavier's College, Ahmedabad</OPTION>
<OPTION>St. Joseph's College, Bangalore</OPTION>
<OPTION>St. Xavier's College, Mumbai</OPTION>
<OPTION>Sacred Heart College, Thevara, Ernakulam, Kerala</OPTION>
<OPTION>Research Foundation for Science, Technology and Natural Resource Policy,
Bangalore</OPTION>
<OPTION>Jawaharlal Nehru University (JNU), New Delhi</OPTION>
<OPTION>ISRO Telemetry Tracking Command Network (ISTRAC),Bangalore</OPTION>
<OPTION>Defence Electronics Research Laboratory, Hyderabad</OPTION>
<OPTION>All-India Institute of Medical Sciences (AIIMS), Delhi</OPTION>
<OPTION>Indian Institue of Management, Ahmedabad</OPTION>
</SELECT>
</div>
</body>
</html>
hemanshu
July 11,