Scroll DIV when mouse button is down

This site is best viewed in a modern browser with JavaScript enabled.

Laerion

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

ctoz

try jQuery UI 'draggable', works like a charm.

Laerion

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.

Sterling_Isfine

Laerion;1117067 wrote:
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:

Laerion

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>
    <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>

Sterling_Isfine

Laerion;1117193 wrote:
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:

scrolling = window.setTimeout(function() {
            	scroller.ondrag;
        	}, 100);

Laerion

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.