amar

happy to help and share rhernando, most jquery scrollbars work in very similar ways and the default scrollbar doesn't always look nice with a specific theme. so hopefully that code snippet can be applied to other plugins with minimal changes. btw, really love the gs framework.

Figured it out, here 's how you do it: var container = $('# container '); // this holds init div for the content to be made scrollable container.mCustomScrollbar({ set_width:"100%", scrollButtons:{ enable:false }, horizontalScroll:true, advanced:{ autoExpandHorizontalScroll:true }, theme:"dark" }); var scroller = $('.mCSB_container '); // this holds content after the custom scrollbar plugin is run var thumbDragger = $('.mCSB_dragger '); // this is the thumb for dragging the scrollbar Draggable.create(".mCSB_container", { type:"left", edgeResistance:0.5, zIndexBoost:false, bounds: document.getElementById("container"), throwProps:true, onDragStart:function() { // to avoid any conflicts in drag animations container.mCustomScrollbar("stop"); }, onThrowUpdate:function() { // for some reason, the built-in method does not do live update, so we modify css live /* var no = Math.abs( parseInt( scroller.css("left") ) ) scroller.mCustomScrollbar("scrollTo", no); */ // edit live css var no = Math.abs(parseInt(scroller.css("left"))) / (parseInt(scroller.css("width")) - parseInt(container.css("width"))) * (parseInt(container.css("width")) - parseInt(thumbDragger.css("width"))); thumbDragger.css("left", no); // update the scrollbar (just in case!) container.mCustomScrollbar("update"); } }); And it works as expected

Hi Rodrigo, It was working great with just the Draggable class without the jQuery plugin. I also tried to change "scrollLeft" to "left", "x", etc, but it didnt get it to work.

Hi, I'm using your Draggable class in a project. Until today i was facing issues, but after updating to the latest release (1.11.0), it worked great. I was changing the look and feel of the scrollbar using http://manos.malihu.gr/jquery-custom-content-scroller/ But I started facing issues again, the error is Uncaught ERROR: No velocity was defined in the throwProps tween of [object Object] property: left ThrowPropsPlugin.min.js:14 Here's the code I use: Draggable.create(".scroller", {type:"scrollLeft", edgeResistance:0.5, throwProps:true}); $(".scroller").mCustomScrollbar({ set_width:"100%", scrollButtons:{ enable:false }, horizontalScroll:true, advanced:{ autoExpandHorizontalScroll:true }, theme:"dark" }); Does anyone know why this happens? Thanks

Thanks Carl, The code is actually split across quite a few files, I use data models to hold all properties which are parsed from a server side api, and all components are registered through a object pooling manager. so its a bit tricky to post the files. The code I posted before was just a basic snippet, below is a more closer version to what i'm working with, set the model and it works with loadermax. Oh and by the way, I'm using Flex. var image:ImageLoader; protected function creationCompleteHandler(event:FlexEvent):void { if(model) { image = new ImageLoader(model.asset.sourceFile.fileurl, {container:this, x:0, y:0, width:model.transformData.width, height:model.transformData.height, onProgress:progressHandler, onComplete:completeHandler, onError:errorHandler}); image.load(); } } //set the asset model public function set model(value:AssetObjectModel):void { _model = value; if(model) { if(model.asset.sourceFile) { model.asset.sourceFile.fileurl = FileSystemManager.getInstance().resolvePathForDevice(model.asset.sourceFile.fileurl); } if(image) { TweenLite.set(image.content, {x:model.transformData.x, y:model.transformData.y, width:model.transformData.width, height:model.transformData.height, rotation:model.transformData.rotation, alpha:model.alpha}); //only load if different url if(image.url != model.asset.sourceFile.fileurl) { image.url = model.asset.sourceFile.fileurl; image.load(); } } } } public function get model():AssetObjectModel { return _model; }

Problem solved! To anyone who has this issue: use "fitWidth", "fitHeight" properties

hi, I'm having some trouble changing the dimensions of a loading item after its been created. var loader:ImageLoader = new ImageLoader("img/photo1.jpg", {name:"photo1", container:this, x:0, y:0, width:100, height:100, onComplete:onImageLoad}); // start with 100x100 changeSrcAndDimensions(); function changeSrcAndDimensions():void { trace("image loaded"); loader.url = "image/newImage.jpg"; // change new image loader.load(); TweenLite.set(loader.content, {x:0, y:0, width:200, height:200}); // change to 200x200 } Any ideas? I know i can destroy that loader and init a new one, but I want to create once and reuse. Thanks,