www.webdeveloper.com
Results 1 to 3 of 3

Thread: Custom scroll bar stutters…

  1. #1
    Join Date
    Apr 2009
    Posts
    9

    Custom scroll bar stutters…

    Hello!

    I'm having some trouble debugging a scroll bar I'm trying to implement. You can see the example here:

    http://cameronmcefee.com/development/demo

    The problem is that when it approaches the left or right limit, it stops short, unless the user is dragging it very slowly, in which case it can make it to the limits. I can't seem to figure out what the problem is. Any ideas? Firefox and Safari and Opera all have this problem. I haven't checked IE yet.

    Here is the js:

    Code:
    var _startX = 0; // mouse starting positions
    var _startY = 0;
    var _offsetX = 0; // current element offset
    var _offsetY = 0;
    var _dragElement; // needs to be passed from OnMouseDown to OnMouseMove
    var _oldZIndex = 0; // we temporarily increase the z-index during drag
    var leftBound = 0;
    var rightBound = 433;
    
    
    //var _bounds = 
    //var _debug = $('debug'); // makes life easier
    
    InitDragDrop();
    
    function InitDragDrop() {
    	document.onmousedown = OnMouseDown;
    	document.onmouseup = OnMouseUp;
    }
    
    function OnMouseDown(e) { // IE is retarded and doesn't pass the event object
    	if (e == null) 
    		e = window.event;
    	
    	
    	// IE uses srcElement, others use target
    	var target = e.target != null ? e.target : e.srcElement;
    
    	/*_debug.innerHTML = target.className == 'drag'
    		? 'draggable element clicked'
    		: 'NON-draggable element clicked';*/ 
    
    	// for IE, left click == 1 
    	// for Firefox, left click == 0
    	if ((e.button == 1 && window.event != null || e.button == 0) && target.className == 'drag') { 
    		// grab the mouse position 
    		_startX = e.clientX;
    		_startY = e.clientY; 
    		
    		// grab the clicked element's position
    		_offsetX = ExtractNumber(target.style.left);
    		_offsetY = ExtractNumber(target.style.top);
    		
    		// bring the clicked element to the front while it is being dragged
    		_oldZIndex = target.style.zIndex;
    		target.style.zIndex = 10000; 
    		
    		// we need to access the element in OnMouseMove
    		_dragElement = target;
    		
    		// tell our code to start moving the element with the mouse
    		document.onmousemove = OnMouseMove;
    		
    		// cancel out any text selections
    		document.body.focus();
    		
    		// prevent text selection in IE
    		document.onselectstart = function () { return false; };
    		// prevent IE from trying to drag an image
    		target.ondragstart = function() { return false; };
    		
    		// prevent text selection (except IE)
    		return false; 
    	} 
    }
    
    function OnMouseMove(e) { 
    	var contentDiv = document.getElementById("content");
    	var contentCols = 2;
    	var contentWidth = (contentCols*300);
    	
    	
    	if (e == null)
    		var e = window.event; 
    		var pos = (_offsetX + e.clientX - _startX);
    	// this is the actual "drag code"
    	if( pos >= leftBound && pos <= rightBound ) {
    		_dragElement.style.left = pos + 'px';
    		var scrollPercent = pos/rightBound;
    		var conentScrollValue = scrollPercent*contentWidth;
    		contentDiv.style.left = (0-conentScrollValue) + "px";
    	} /*else if (pos < leftBound) {
    		alert(contentDiv.style.left);
    		_dragElement.style.left = leftBound;
    		contentDiv.style.left = "0px";
    	} else if (pos > rightBound) {
    		_dragElement.style.left = rightBound;
    		contentDiv.style.left = (0-contentWidth) + "px";
    	}*/
    	//_dragElement.style.top = (_offsetY + e.clientY - _startY) + 'px';
    	
    	//_debug.innerHTML = '(' + _dragElement.style.left + ', ' + _dragElement.style.top + ')';
    }
    
    function OnMouseUp(e) {
    	if (_dragElement != null) {
    		_dragElement.style.zIndex = _oldZIndex; 
    		
    		// we're done with these events until the next OnMouseDown
    		document.onmousemove = null;
    		document.onselectstart = null;
    		_dragElement.ondragstart = null;
    		
    		// this is how we know we're not dragging
    		_dragElement = null;
    		//_debug.innerHTML = 'mouse up';
    	}
    }
    
    function ExtractNumber(value) {
    	var n = parseInt(value);
    	return n == null || isNaN(n) ? 0 : n;
    }
    
    // this is simply a shortcut for the eyes and fingers
    function $(id) {
    	return document.getElementById(id);
    }
    Last edited by cameronmcefee; 07-31-2009 at 02:09 AM.

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,689
    Code:
    		var pos = (_offsetX + e.clientX - _startX);
            pos=Math.max(Math.min(pos,rightBound),leftBound)
    	// this is the actual "drag code"
    		_dragElement.style.left = pos + 'px';
    		var scrollPercent = pos/rightBound;
    		var conentScrollValue = scrollPercent*contentWidth;
    		contentDiv.style.left = 0-conentScrollValue + "px";
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Apr 2009
    Posts
    9
    Oh, awesome. That worked perfectly. Thank you!

Thread Information

Users Browsing this Thread

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

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