Draggable DIV to scroll window

[Sebarry]

Hi,

I have been assigned the daunting task of applying coordinate movements of a draggable div with a small box to the scrolling of the current window. Basically the small box represents the viewable content of the website and the draggable div represents the cursor. As the draggable div is moved around the confines of the small box the current window should scroll to a proportional position. Thus if the user drags the div to the top left hand corner of the small box the top right corner of the viewable content is shown. This form of navigation has been devised because the webpage content is expected to fill several screens.

I found an example of what I'm trying to explain here, applied to an image.

How to do Google Maps-Style Scrolling Windows with JavaScript and DHTML

From this I have been able to create the following which works in Firefox but doesn't in IE or Safari.

http://client.isimo.net/sls/site/navTest2.html

I hope you can help.

Thanks,

Sean

[pronerd]

If you are new to using forums you may find it helpful to Google for and review basic forum etiquette. It will likely improve the number and quality of responses you get. People are limited in how helpful they can be to you by ammount of detail provided. No details have been provided here as to what the failure in IE is, nor what you have tried to debug the problem, or what area of code the problem has been isolated to.

Also it is generally not productive to ask people to debug your code if you are not going to post the relevant code for them to look at.

P.S. Please use code tags when posting code

[Sebarry]

Hi,

Apologies for being unclear. The problem is I can determine how much the small box has been dragged and therefore how much I need the window to scroll but whether I use window.scrollBy or window.scrollTo the scrolling is quite clunky.

Here's my code so far:

 
if (browser.isIE) 
{
    x = window.event.clientX + document.documentElement.scrollLeft
      + document.body.scrollLeft;
    y = window.event.clientY + document.documentElement.scrollTop
      + document.body.scrollTop;
}
 
if (browser.isNS) {
    x = event.clientX + window.scrollX;
    y = event.clientY + window.scrollY;
  }
 
var newXPosition = parseInt(dragObj.elStartLeft + x - dragObj.cursorStartX);
var newYPosition = parseInt(dragObj.elStartTop  + y - dragObj.cursorStartY);
 
dragObj.elNode.style.left = newXPosition + "px";
dragObj.elNode.style.top = newYPosition + "px";
 
if( parseInt( document.getElementById( 'navigation_box_cursor' ).style.top ) < parseInt( previousTop ) )
    yScrollAmount = -(yScrollAmount);
 
if( document.getElementById( 'navigation_box_cursor' ).style.left < previousLeft )
    xScrollAmount = -(xScrollAmount);
 
previousTop = document.getElementById( 'navigation_box_cursor' ).style.top;
previousLeft = document.getElementById( 'navigation_box_cursor' ).style.left;
 
//window.scrollTo( (window.scrollX + xScrollAmount), (window.scrollY + yScrollAmount) );
 
 

Do I need to use setTimeout to make it smoother?

Any help most appreciated.

Thanks,

Sean

[pronerd]

I am guessing that the reason you are getting the extream over shooting in IE is that the current scroll offset seems to be getting added twice inside the IE if test.

you are adding the scroll offsets from both the document.documentElement, and document.body. I am guessing you only need one of these.

x = window.event.clientX + document.documentElement.scrollLeft
 + document.body.scrollLeft;
 
y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;