PawleyBoboli

Hi Folks, I doubt this is a bug with Draggable, but I am hoping someone here may have had a similar experience and can point me in the right direction. The bad behavior I am seeing is all contents of an iframe shifting when a user interacts with a draggable button. It does not happen in desktop browsers, but it does in both Chrome & Safari on iPad (have not yet tested an Android tablet). You can see what is happening here: http://marsinc.com/codepen/draggable-tabletbug.html Things I know: The page that holds the multimedia content (background, menu, question, image, draggable buttons) is in an iFrame of an OnPoint LMS This behavior does not occur when viewing the content outside of the SCORM wrapper (not in an iFrame) I don't really have control or access to the parent SCORM wrapper, since it is launched by the LMS Occurs only on iPad (so far) and not in desktop browsers. I'm not even sure what to search for online or what this is called. That's why I created the GIF to describe it. Any help is greatly appreciated -- Pawley B

Perfect. Thanks! --P

Hi folks at Greensock, I am using TweenMax in project (the div slider with snap points that Shaun has been helping me with) and I found that the jquery.ui slider doesn't work on touch screen - but your demos do... so I pinched the link in your codepens for the jquery.ui.touch-punch.js script. The link to that script doesn't seem to start with a cdn url, it has a //greensock.com root. Can I still link to that in a project? Lemme know if I need to get it from somewhere else. Thanks, --Pawley

Hi Folks, I have altered my next button function to iterate through the array of snap points backwards, and that seems to work better, but not 100% of the time. This at least never goes backwards when you click the forward button, but on occasion, it will skip a panel and jump ahead 2. In the codepen, it seems do this this less than in my actual project, but it will still do it there as well. the codepen is here: http://codepen.io/PawleyBoboli/pen/aJVMyr/?editors=1010 and the revised next button function is this: function tlNext(arr, target) { if (!(arr) || arr.length === 0) {return null;} if (arr.length === 1) {return arr[0];} for (var i = arr.length-1; i >= 0; i--) { if (arr[i] <= target + 0.01) { return arr[i+1]; } else if (arr[i] < target) { return arr[i+2]; } } } When I put a break into this and look at the values for target and the array of snapping points, the times I am getting a 2 -panel jump is when the snap point in the array is 0.9 but the target (tl.progress()) is 0.9000000000000001. I put in a buffer of 0.01 to accommodate for that, but now if you click the next button quickly, CodePen is saying there's an Infinite loop found on line 0. and stops working - even though I get no errors in my actual project in Chrome or Firefox (still need to test elsewhere). Any ideas how to make this button go to the next snap point in the timeline without errors? Kinda weird why the reverse button works great, but the fwd one does not. Thanks for any insight. --Pawley

Hi Shaun, My slider project is working out great. Thanks for your help. The slider is too small to manage on small screen like phones, so I have added next/previous buttons at the CSS media break for phones and turn off the display for the slider. Attached are pictures of what the final looks like, and here is a new CodePen with my current edits: http://codepen.io/PawleyBoboli/pen/aJVMyr I stole your function for the snapping slider and adapted it for the next/prev buttons. The previous button works fine, but sometimes the next button goes backwards, especially if you click it repeatedly. Also, my project will have 20 or more panels, so the differences between steps in the timeline will be getting smaller as I add more panels. Is there a way to make sure the next button doesn't go backwards? Thanks for any insight. -Kevin

Wow Shaun, you're a champ! This is the functionality I was looking for as far as the snapping goes and it works much better than my attempt. Besides that, I am totally exposed for my lack of CSS skilz/understanding. Sometimes, half my battles with JS and GSAP are due to weaknesses in my CSS. The learning continues. Thanks tons! --Pawley

Wow Shaun, that's a really great-looking slider, and cleverly coded. Unfortunately for me, having a draggable scrollbar to move through the timeline is a design-requirement by the client. There are plenty of techniques you are using that will come in handy for other parts of my project, however, so thanks tons for sharing this with me. I dug around ald603's "GSAP image slider" post from a few days ago, forking the Codepen that was created, and was able to add a scrollbar to that timeline to control it. This works as I would like, but my snap-to-next/previous label isn't perfect. The functionality I'd like is if someone drags the slider part way between two images and releases it, the slider and controller will float toward the nearest label. So if you drag past halfway to the next image and let go, the timeline moves forward to the next image, but if you let go less than halfway to the next image, it moves back to the previous image. My attempt kind of works, but not exactly. You have to get like 3/4 way near the next or previous label for it to not go back to the previous one. I think my problem is somewhere in the stop function of my controler: stop:function() { var currentTime = _tl.time() var timeBetween = _tl.getLabelTime( _tl.getLabelAfter()) - _tl.getLabelTime( _tl.currentLabel()); var midPoint = _tl.getLabelTime( _tl.currentLabel()) + (timeBetween/2); console.log("Mid point between labels is: " + midPoint + " current time: " + currentTime); if (currentTime >= midPoint) { // go to the next label _tl.tweenTo( _tl.getLabelAfter() ); } else { _tl.tweenTo( _tl.currentLabel() ); } } Is there a better way to do this? Here is my forked Codepen so you can see it in action: http://codepen.io/PawleyBoboli/pen/bqgBzX?editors=0010 Again, thanks so much for any input, --Pawley

Hi Folks, Sorry for the nuisance, but boy am I rusty with GSAP. Besides, it's got a lot of cool new features! My project is quite simple though. I need to make an image viewer that scrolls pictures horizontally by control of a draggable slider. It needs to have these requirements: scroll from first to last of what will be a dynamically created set of image divs when the user releases the slider handle, the group should center up the image closest to the center continue to work (centering up) responsively for different sized screens I stole a bunch of stuff from the examples found here, but have a couple of questions. Please check my CodePen. I have a single timeline that is using xPercent to scroll to the end of the content div that holds the multiple image divs. Q1: Unfortunately it finishes outside the container and I would like it to stop with the last image div (which is the right side of the content div) at the right end of it's container. So the container will never be empty. Q2: I am planning to drop some Position labels at the center of each image, and write a function on release of the slider for the timeline to float to the closest one. The math is easy, because the duration of the timeline in seconds is equal to the number of images, so I can start at 0.5, and push each one out +1 sec till the end. Does this make sense or is there a better method? And finally, why is my jquery-ui slider not updating correctly? I have all of the external CSS and JS files linked to the Codepen, but the slider button updates position very sporadically. Any help is hugely appreciated. Thanks, -- Pawley

Hi Jean-Baptiste, Extra Slider looks like just what I need for an upcoming project. In my project, however, I will need to implement a horizontal slider bar to control the image slider. Looking through this post and your demos, I don't see an example that includes a slider bar. Do you know if one exists? (And if not, I'll give it a go). Here's a Flash example of what my client wants for behaviour: http://www.kellogghistory.com/timeline.html Thanks for any info, --Kevin

Thanks for this info Rodrigo. I tried both of them and they both work. The CSS version does not allow any selection at all if you apply it to body, div {} as suggested in the post, and happily, it does not interrupt Draggable from doing it's job correctly so that's cool. The JavaScript version allows a selection to be made if you drag over anything on the page but then immediately releases (clears) the selection as soon as you mouse up. This is good as well, however I found that if I dragged over more than one div highlighting multiple divs like in my image above, the script did not release the selected areas when you mouse up. In other words, it worked for a single div selection, but not for a multiple-div selection. This was in Safari on a Macbook Pro. It seems to work in Firefox and Chrome. I think the script could be adjusted to iterate through divs singley, but since there are no input fields or need for selection in my project, I'm just going with the CSS version for now. Thanks so much for your help. --Kevin

Hi Folks, I have a quiz online that has been using Draggable where learners drag & drop multiple choice answers onto a target image area. Works great but every so often after a drag & release, the divs will get highlighted as if someone selected them for a copy/paste operation. I am assuming it's cause by an accidental drag by the learner after letting go of the draggable item. Also, it seems this happens more in Firefox and Safari, but I've not yet seen it in Chrome. Is there a workaround for this? Here is what it looks like when it happens: Any help is greatly appreciated, --Kevin

Checking the older version of this course on a Blackboard server showed no issues with these drag n drop activities. After trying many things that didn't work, I noticed the older project was using an older version of GSAP: TweenMax v 1.13.1 and Draggable v 0.10.5 both dated 2014-07-17. My current version of the project is using the latest GSAP of TweenMax v 1.16.1 and Draggable v 0.13.0 both dated 2015-03-13. My problem went away when I switched back to the older version (I switched the whole GSAP package back). I have no idea why this worked, but I will try to create a codepen this weekend with the latest GSAP and see if it exhibits the problem. ... keep you posted. Kevin

Hi Folks, I am not sure this is a GSAP issue, but it is only happening to draggable elements in my project. I apologize if I missed something obvious, but I've hit a dead-end. My project uses draggable buttons of various sizes in a graphical test environment. This project has been running fine for a year but now it is giving me trouble only on my Android Nexus 7 test tablet. Everything works great on iPad and all modern desktop browsers in Mac & Windows. Take a look at the two images I have attached. The "draggable_sample_correct.jpg" image shows what the 3 draggable buttons should look like. The "draggable_sample_Android-bogus.jpg" image shows what it looks like on my Android device. I noticed that the transform: translate3d style is altered. I can't figure out where this transform is coming from in the first place, and why it's different on Android in the second place! The dragging behavior is inconsistent as well. On Android, when I drag one of the buttons onto a target and let go, it sometimes goes to its correct home position... at other times, it goes to a new incorrect position. Here is my setup and onDrop functions, which have not been touched for a year. This used to work on this same test tablet, but now I'm wondering if some update to Android has caused the problem? var setupDroppables = function(theDropClass) { // DRAG N DROP var droppables = $(theDropClass); var overlapThreshold = "50%"; var targetContainerDiv = "#singleVtarget"; switch (theDropClass) { // There are several styles of drag & drop question layouts. case ".threexDnDsideBySide": targetContainerDiv = "#threeUpVtargets"; break; case ".twoxDnDsideBySide": targetContainerDiv = "#twoUpVtargets"; break; case ".blueDnD": targetContainerDiv = "#singleVtarget"; break; case ".twoxDnDstacked": targetContainerDiv = "#singleVtarget"; break; case ".threexDnDstacked": targetContainerDiv = "#singleVtarget"; break; case ".scenarioSel": targetContainerDiv = "#singleVtarget"; break; } Draggable.create(droppables, { bounds:window, onPress:function() { TweenLite.set(targetContainerDiv, {autoAlpha: 1, display: "block"}); }, onDrag: function(e) { var i = targetArray.length; while (--i > -1) { if (this.hitTest($(targetArray[i]), overlapThreshold)) { console.log("we're on it!"); $(targetArray[i]).addClass("highlight"); } else { $(targetArray[i]).removeClass("highlight"); } } }, onRelease:function(e) { var i = targetArray.length; while (--i > -1) { if (this.hitTest(targetArray[i], overlapThreshold)) { onDrop(this.target.id, targetArray[i]); TweenLite.to(this.target, 0.5, {x: 0, y: 0, ease: Bounce.easeOut}); $EV_SoundManager.playSFX("throb018"); return; } } $EV_SoundManager.playSFX("throb018"); TweenLite.to(this.target, 0.5, {x: 0, y: 0, ease: Bounce.easeOut}); } }); }; // FLASH THE BORDER IF THE CORRECT DROP var onDrop = function (dragged, dropped) { var thisSelection = dragged; var thisPos = targetArray.indexOf(dropped); var correctChoice = correctChoices[thisPos]; var thisIndex = buttonArray.indexOf("#" + thisSelection); if (thisSelection == correctChoice) { isCorrect = true; if (jQuery.inArray( thisSelection, correctQuestions ) == -1 ) { correctQuestions.push(thisSelection); } animateMsg(questionArrayRandom[currentQuestionIndex], correctStatements[thisIndex]); TweenMax.fromTo(dropped, 0.1, {opacity:1}, {opacity:0, repeat:3, yoyo:true}); } else { isCorrect = false; incrementAttempts(); animateMsg(questionArrayRandom[currentQuestionIndex], incorrectStatements[thisIndex]); hideTargetVContainerDivs(); $(dropped).removeClass("highlight"); } }; Any insight or leads for solving this are greatly appreciated. Thanks! --Kevin

z-index. That was the problem. The z-index of this div was not set and it was being blocked by another div during the transition. I knew it was me and not GSAP. Boy I'd like to get those hours back. So embarrassing. Sorry for the noise. --Kevin

hmmm... this does something, but not what I was hoping for. Using force3D: true keeps the div from displaying at all, even though in GC Devtools the layer element style says: element.style { visibility: inherit; opacity: 1; transform: translate3d(0px, 0px, 0px); } The layer's setting for display: is already set to 'block' in my stylesheet, and if I toggle the transform in the Devtools window the layer group displays when the transform is turned off... but my transition is still getting chopped for whatever reason. This is such a weird hair-puller, especially since everything else is working so great. In my project this footer-div is supposed to fade in and out depending on user interaction, hence the if/else toggle in my codepen. I've altered the codepen to toggle back & forth http://codepen.io/PawleyBoboli/pen/eNNEvM New things I've tried - none of which worked: Put the transition into a timeline and use myTL.play() and myTL.reverse() instead of the straight tweens (same result... the div block just chops on/off) Tried to execute the tweening function after a long delay, hoping that whatever was making it choke was completed: TweenLite.delayedCall(4, EV_swapBadgeIn, ["toCourse"]); After the delay time, I still get the same result and the div chops-on/off. As a test, I change the div being faded to something else on the page and the fade worked. There must be something funky going on with this particular div. I'll keep digging --Kevin