Jump to content

Search In
  • More options...
Find results that contain...
Find results in...


  • Content Count

  • Joined

  • Last visited

Community Reputation

10 Newbie

About PawleyBoboli

  • Rank
    Advanced Member

Profile Information

  • Gender
    Not Telling

Recent Profile Visitors

3,068 profile views
  1. 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,
  2. 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
  3. 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)
  4. 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 rep
  5. 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
  6. 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 f
  7. 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
  8. 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
  9. 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
  10. 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 ap
  11. 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
  12. 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 button
  13. 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
  14. 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