faqts : Computers : Programming : Languages : JavaScript

+ Search
Add Entry AlertManage Folder Edit Entry Add page to http://del.icio.us/
Did You Find This Entry Useful?

19 of 37 people (51%) answered Yes
Recently 4 of 10 people (40%) answered Yes

Entry

When using select list, and you select an object that is not in view(you have to scroll down to see it). How do you make this scroll auto in NN

Apr 4th, 2008 19:53
ha mo, Iván Rivera, Jonas Gredenhag,


With some simple manipulation upon the select DOM properties from
JavaScript, and the help of a timer, you can perform this "autoscrolling
trick". Of course, you should provide your users with means to stop (and
restart, should they wish) the scrolling --it may become annoying.
If you set your timer interval short enough, this script could act as a
fortune wheel!
This is a new version which addresses a bug with start & stop. You could
start the rotation several times, leaving a new timer handle in the
timer variable: stopping did only halt the last timer started.
See also some comments at the bottom...
<html>
<head>
<title>Autoscroller, (c) 2001 Iván Rivera</title>
<script language="JavaScript1.1">
<!--
// autoscroller for SELECT tags (c) 2001 Iván Rivera
function scrollByOne(slct) {	// increments by one the select's selected
index
	if (slct.selectedIndex==0) slct.selectedIndex=1;
	else slct.selectedIndex=(slct.selectedIndex+1)%slct.length;
}
var scrollInterval=1000;	// in msec
var timer;
function startScroll() {	// sets a interrupt timer for rotating the select
	if (!timer)
timer=setInterval('scrollByOne(document.forms["myForm"].mySelect)',scrollInterval);
}
function stopScroll() {	// halts the select's rotation
	clearInterval(timer);
        timer=null;
}
window.onload=startScroll;
// will start when the page is fully loaded
//-->
</script>
</head>
<body>
<form name="myForm">
<small>
<a href="#" onClick="startScroll()">start</a> | <a href="#"
onClick="stopScroll()">stop</a>
</small>
<br>
<select name="mySelect" size="1">
<option selected value="1 was selected!">Option 1
<option value="2 was selected!">Option 2
<option value="3 was selected!">Option 3
<option value="4 was selected!">Option 4
</select>
<input type="button" name="Select"
onClick="alert(this.form.mySelect.options[this.form.mySelect.selectedIndex].value)"
value="Select">
</form>
</body>
</html>
This works fine when the select's size is "1". If it's some other
number, the sequential selection causes the list to scroll (as expected)
in NS6, IE4 and IE5.x, but *not* on NS4.x. It seems that the scrollbar
and the focus position are completely unrelated; moreover, there is no
way to control scrolling to provide a workaround for this one. Sorry.
Iván.
http://www.businessian.com
http://www.computerstan.com
http://www.financestan.com
http://www.healthstan.com
http://www.internetstan.com
http://www.moneyenews.com
http://www.technologystan.com
http://www.zobab.com
http://www.healthinhealth.com