By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,198 Members | 1,599 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,198 IT Pros & Developers. It's quick & easy.

Draggable DIV to scroll window

P: 69

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.

I hope you can help.


Apr 17 '08 #1
Share this Question
Share on Google+
3 Replies

Expert 100+
P: 392
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
Apr 17 '08 #2

P: 69

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:

Expand|Select|Wrap|Line Numbers
  2. if (browser.isIE) 
  3. {
  4.     x = window.event.clientX + document.documentElement.scrollLeft
  5.       + document.body.scrollLeft;
  6.     y = window.event.clientY + document.documentElement.scrollTop
  7.       + document.body.scrollTop;
  8. }
  10. if (browser.isNS) {
  11.     x = event.clientX + window.scrollX;
  12.     y = event.clientY + window.scrollY;
  13.   }
  15. var newXPosition = parseInt(dragObj.elStartLeft + x - dragObj.cursorStartX);
  16. var newYPosition = parseInt(dragObj.elStartTop  + y - dragObj.cursorStartY);
  18. = newXPosition + "px";
  19. = newYPosition + "px";
  21. if( parseInt( document.getElementById( 'navigation_box_cursor' ) ) < parseInt( previousTop ) )
  22.     yScrollAmount = -(yScrollAmount);
  24. if( document.getElementById( 'navigation_box_cursor' ).style.left < previousLeft )
  25.     xScrollAmount = -(xScrollAmount);
  27. previousTop = document.getElementById( 'navigation_box_cursor' );
  28. previousLeft = document.getElementById( 'navigation_box_cursor' ).style.left;
  30. //window.scrollTo( (window.scrollX + xScrollAmount), (window.scrollY + yScrollAmount) );
Do I need to use setTimeout to make it smoother?

Any help most appreciated.


Apr 18 '08 #3

Expert 100+
P: 392
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.

Expand|Select|Wrap|Line Numbers
  1. x = window.event.clientX + document.documentElement.scrollLeft
  2.  + document.body.scrollLeft;
  4. y = window.event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
Apr 19 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.