Javascript scrolling

stevenmu · 01-11-2004 12:16pm #1

I have a

<select multiple >

control on a web page for users to select a time period. Each option is a time "slot" of 15 minutes and by clicking and dragging the user can select a range of slots, a window then pops up allowing the user enter details for that time range. The problem is that the problem is that the select control is so long that it extends beyond the bottom of the window so I need some way to make the window scroll as the user drags the mouse past the bottom of the window. I've tried this using triggers to see if the mouse button is up or down, if it's down compare it to it's last known position (unless it's been up since) and if it's lower then scroll down some. The problem with this is that, in IE at least, the mouse co-ordinates represent it's position on the page not the window, so scrolling down in effect moves the mouse down the page causing the window to scroll again, this loops untill the bottom of the page is reached. I can't have the control use it's own internal scrolling as it has to line up with a table to it's side.

Has anybody got any pointers on how to achive scrolling like this, or workaround it, or maybe someone has come across something that may help ?

seamus · 01-11-2004 12:35pm

Change the select so that it's not a drop-down box, but so that it's a list box, so the size of the box remains static. Set the size property of a select element > 1 to turn it into a list box, i.e.

<select size="5">
......
</select>

That can be troublesome for large lists, but there may be a way of using Javascript to dynamically make the list box longer when they mouse over it, so it's like a combo drop-down, but doesn't go off the page.

stevenmu · 01-11-2004 1:40pm

Thanks for the reply Seamus, I should have mentioned that's the way I have it already, sorry. The size is set to the number of options.

stevenmu · 01-11-2004 3:11pm

Here's a screen shot just to make things a bit clearer

You can see that if you wanted to enter time from 13:00 to 14:00 the page would have to scroll.

seamus · 01-11-2004 3:19pm

All I can think of at the momeny is a seperate link for long ranges where you ask them to enter the start and end times, and then it updates this sheet.

Serbian · 02-11-2004 3:21pm

Why not just give them two drop down menus where they can choose the start time and the end time, and make the script dynamically fill those ranges when the form is submitted? Seems a lot easier to do it that way to me.

stevenmu · 05-11-2004 12:27pm

It probably would have been easier to just use drop downs for a start and end time but it was for a particularly demanding customer who doesn't understand the concept of impossible. I managed to do it anyway, thanks for your responses though. I've included the code below if anyones interested in using it, it's a bit messy though beacuse I've been fidgeting with it so much. I think it's IE only at the moment, to use with other browsers you'd need to replace "var top = document.body.scrollTop;"

<head>
<script language="JavaScript">
var isIE = document.all?true:false;
if (!isIE) document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = getMousePosition;
  var _x;
  var _y;
  var _prevy;
  var _pageLocation;
  var vlIsmousedown;
  _prevy = 0;
  
function getMousePosition(e) {
  var top = document.body.scrollTop; 
  if (!isIE) {
    _x = e.pageX;
    _y = e.pageY;
  }
  if (isIE) {
    _x = event.clientX + document.body.scrollLeft;
    _y = event.clientY + document.body.scrollTop;
  }
//uncomment to display current mouse pos and scroll pos in status bar
//status = _y + "  -  " + screen.availHeight + " - " + top;
	//If mouse at very bottom of window scroll to end of page 
	if (vlIsmousedown && _y - screen.availHeight - top > -230){
	   if (_x < 300 && _y - _prevy >= 3){ 
		 	 scrollTo(0,1280);
			 _prevy = _y;
		 }
	}
             //else scroll down by 3
            //change _prevy >= 3 to _prevy > 3 to force them to keep moving
            //mouse down to keep scrolling
	else if (vlIsmousedown && _y - screen.availHeight - top > -280){
	   if (_x < 300 && _y - _prevy >= 3){ 
		 	 scrollBy(0,3);
			 _prevy = _y;
		 }
	}
	//as above but upwards
	if (vlIsmousedown  && _y - top < 5 ){
	   if (_x < 300 && _y - _prevy <= -3){
		 	 scrollTo(0,0);
			 _prevy = _y;
		 }
	}
	else if (vlIsmousedown  && _y - top < 40 ){
	   if (_x < 300 && _y - _prevy <= -3){
		 	 scrollBy(0,-3);
			 _prevy = _y;
		 }
	}
  return true;
}

</script>
</head>
<body onmousedown="vlIsmousedown = true" onmouseup="vlIsmousedown = false">

Javascript scrolling

Comments