www.webdeveloper.com
Results 1 to 7 of 7

Thread: Scroll DIV when mouse button is down

  1. #1
    Join Date
    Oct 2010
    Posts
    4

    Question Scroll DIV when mouse button is down

    Hi! I've a DIV which contains an IMG. This image is wider than the div, so a scrollbar appears on page. What I want to do, is click on the div(image) and move the mouse, and scroll the div as I move the mouse.

    I've tried using event ondrag in the div, and inside I can move the scroll with scrollTop and/or scrollLeft. My problem is that I haven't been able to make a good algorithm.

    I've tried to add clientY to scrollTop, and many other combinations but can't make it work. I have a lot of other javascript functionality in the page that is working.

    Any ideas? Please! I am stuck in this for days

  2. #2
    Join Date
    Nov 2005
    Location
    Bundanoon: first village to ban bottled water
    Posts
    214
    try jQuery UI 'draggable', works like a charm.

  3. #3
    Join Date
    Oct 2010
    Posts
    4

    jquery draggable

    Hi! I've seen your recommendation, but that code is for dragging the image. I don't want to move (or dragg) the image in my div, I only want to move the scrolls, but not the image.

  4. #4
    Join Date
    Jun 2007
    Posts
    667
    Quote Originally Posted by Laerion View Post
    Hi! I've a DIV which contains an IMG. This image is wider than the div, so a scrollbar appears on page. What I want to do, is click on the div(image) and move the mouse, and scroll the div as I move the mouse.
    I'm not certain exactly what you envisage but try this script which doesn't require a click to start it:

  5. #5
    Join Date
    Oct 2010
    Posts
    4

    Thumbs up Solved!

    Hi! I managed to solve my issue, and here is the very simple code that I wrote, hope it usefull for some of you:

    HTML Code:
    <html>
        <body>
            <div id="scroller" style="width:500px; height: 500px;overflow:auto;">
    			<img src="imgmng/dosmilxdosmil.JPG" width="1000px" height="1000px"/>
            </div>
        </body>
        <script>
        	var scroller = document.getElementById("scroller");
        	var posYact=0, posYant = 0, posXact = 0, posXant = 0;
        	var posYorg = 0, posXorg = 0;
        	var scrolling = null;
        	scroller.ondrag = function(){    	
        		if(posYorg == 0)
        			posYorg = event.clientY;
        		if(posXorg == 0)
        			posXorg = event.clientX;
        				
        		posYact = event.clientY-posYorg;
        		posXact = event.clientX-posXorg;
        		//window.status = "act:"+posXact+",ant:"+posXant+",time:"+new Date().getTime();
    
        		scroller.scrollTop = scroller.scrollTop + (posYact-posYant);
        		scroller.scrollLeft = scroller.scrollLeft + (posXact-posXant);
        			
        		posYant = posYact;
        		posXant = posXact;
        		scrolling = window.setTimeout(function() {
                	scroller.ondrag;
            	}, 100);
        	}
        </script>
    </html>

  6. #6
    Join Date
    Jun 2007
    Posts
    667
    Quote Originally Posted by Laerion View Post
    Hi! I managed to solve my issue, and here is the very simple code that I wrote, hope it usefull for some of you:
    I found it rather creaky and it will only work on I.E.

    The following line has no effect:
    Code:
    scrolling = window.setTimeout(function() {
                	scroller.ondrag;
            	}, 100);

  7. #7
    Join Date
    Oct 2010
    Posts
    4

    What suggestions you have?

    Yes, it'll work only in IE for now, and that's what I need. I noticed that the timeout had no effect.

    What suggestions you have for improving the code? Forget about Firefox, I only want it to work better on IE.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles