xmark

Thanks for posting the solution to this ChrisA, really great stuff!

Thanks Rodrigo, that's a great. I had to fix up one line of your code: scroller.scrollProxy.calibrate(true); (removed the [0]) also, now I have a couple of extra problems firstly, now the cards are top aligned, how can I make them bottom aligned? This is one reason why I had the table-layout property set on the cardscontainer class. second, when I scroll horizontally, I dont want to cards to move at all vertically, only horizontally, can this be done? see here for new version: http://codepen.io/markmacumber/pen/KgIaJ Thanks again!!

I'm trying to build a site that has a few requirements which include dragging 'cards' vertically and also scrolling them horizontally. Please see here: http://codepen.io/markmacumber/pen/Dlmzn The demo works by adding cards to a bottom aligned panel, that gradually push them out of screen to the right (this site will work on mobile and desktop browsers), I had to use css tables to get it to work with bottom alignment since my width/height variables are very random (since it will be seen on mobile devices of all shapes and sizes) and I cannot hard code div positions using absolute values. As you can see from the demo, this mostly works. I just need to be able to enable horizontal scrolling when the elements get too far outside the viewport. As you can see by the demo, I have tried to create a draggable element, but it screws up the layout... scroller = new Draggable(".cardCollection", { type: "scrollLeft", edgeResistance: 0.75 }); Can anyone please help me get this to work? I simpy want to be able to freely scroll the cards horizontally without sacrificing the layout. Perhaps I have fundamentally setup the page wrong? Thanks for any help you can give

Hi All, Thanks for the help so far, I will try the calibrate() method for now, but another issue is that when I try to fork the codepen, I cant reference draggable since I can only add 1 JS reference with my codepen account, unless Im missing something? Fixed it, sorry dont know what went wrong there! See this: http://codepen.io/markmacumber/pen/lLEed Load it up, then click Add Item a few times, then scroll over to the right so that your scroll bar moves, then add more items and you can replicate the bug. Perhaps it has something to do with how Im adding a LI to my list? (using the prepend() method?)

Update #1 I think I have found a bug in the calibrate() function. When I added items to my UL and I debugged why my scroller was not behaving correctly, I found that, on line 655: if (widthMatches && element.clientHeight === elementHeight && content.offsetHeight === contentHeight && !force) { return; //no need to recalculate things if the width and height haven't changed. } was always returning. Meaning that the width/height were not getting re calculated, so I commented this out and now it works. But this is obviously an issue with the framework. Can someone please help me with this?

Hi All, I have a site where I have a horizontally styles un-ordered list (<ul>), my site dynamically adds items to the list based on user interactions. For each new item in the list, I have applied a Draggable.create call to make them draggable in the Y axis (vertical), I also apply an animation Tween on the item so it bounces into place. This all works fine! Im using this code for that: //add to the UL $(".cardList").prepend(newDiv); //animate the card into place TweenLite.from(newDiv, 0.5, { y: -250, ease: Elastic.easeOut }); Draggable.create(newDiv, { type: "y", onDrag: function () { //my code... }, onDragEnd: function () { //my code... } }); However, when there are a lot of items in the list, I would like to scroll the list horizontally, so I wrapped up my list into a DIV container and called: var scroller = new Draggable("#cardsContainer", { type: "scrollLeft", edgeResistance: 1.0 }); ...which 'kind of' works. I currently have 2 issues: 1) I can add a new item into the list and I can see that the scrollbar on the scroller increases, but from time to time, the scroller "snaps back" prematurely, so effectively you can never scroll to the end of the list. It simply stops scrolling, it looks like the animation I am using to add the new items to the list could have some effect on the calculation of the width of the scroller? 2) When I click and drag the scroller (when it does work), the items in the list which can scroll vertically move slightly up/down, can I have some kind of check to see if the user is scrolling left/right and NOT enable the vertical scroller based on some threshold? I hope that makes sense