clickDraggables

[mimeartist]

I have a piece of text inside a panel and I'm using the draggable plugin and it works beautifully....

 

Within the text I have chapter points, and in another div on the panel i have links to those chapter points which when you click do a TweenMax of the scrollTop to the correct position.

 

This is all working perfect on the desktop... but on iPad... the links just aren't clikcable... I've tried adding

dragClickables:false to the draggable panel that it's sat  but just not triggering the click...

 

I thought it might jet not be doing the scrollTop tween... but i put a log in and it's not even seeing the click...

 

So my question is how do i make links clickable in a div that is sat in a draggable div?

Is there a command I'm missing... or should i put an invisible panel behind the clickable text and allow that to be draggable (which in turn affects the main panel and makes it move)?

 

 

[Jonathan]

Hello and welcome to the GreenSock Forums!

 

If possible could you provide like a limited

See the Pen by pen (@pen) on CodePen

or jsfiddle so we can better help you and see your code in context, in a live editable environment. Or a link to your webpage that is giving the issue.

 

Thx

[jamiejefferson]

Have you tried adding the attribute data-clickable="true" to your links and seeing if that changes anything?

 

Also make sure you have the latest version of the Draggable and TweenMax files.

 

Other than that, an example like Jonathan has mentioned would be handy.

[mimeartist]

Thanks for the replies... I managed to make it work by using href's rather than javascript clicks.... probably not the best way to do something by just avoiding the issue!

 

I struggle a bit with code pen, as to where to put the various links to .js files... is there a boilerplate of a standard green sock set up that people use as a starting point.

 

James

[Carl]

Hi Mimeartist_payed!,

 

For creating a Draggable Codepen this demo is loaded up and ready to fork:

http://codepen.io/GreenSock/pen/irzvd

 

For 99% of other GSAP tools, you can just 

 

1: create a new pen

2: open the js panel (click on gear icon next to JS)

3: in the external js field start typing TweenMax and they have an auto-complete feature that will allow you to select the TweenMax.min.js file from cdnjs.com

 

We plan on creating a very short "getting started with Codepen" video so that everyone will be able to use it hassle-free. I think you will find that it is an incredible tool for prototyping and especially for receiving quick and collaborative support from the GreenSock community.

[Jonathan]

Carl beat me to it...

 

He are the steps for creating a codepen pen:

1. go to http://www.codepen.io/pen/
2. under the JS panel you will see a gear icon, click it
3. select a JavaScript library if needed from the dropdown
4. enter the TweenMax script path in the External JS File or Another Pen input:
   
   http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.2/TweenMax.min.js
5. add your HTML, CSS, and JS into the right panels
6. click Save

note.. you can find the GSAP script paths on the top of this page in the top of the left sidebar Titled get GSAP

 

does that help?