TopGUN121

I'm wondering if there is a way to know if the draggable element hits the bounds i have defined for it? I would like to shoot off a function or some code when it hits the edge of the bounds area.

I was using draggable on an SVG element and this was popping up, when testing my work in chrome , this warning pop up in the console log: 'SVGElement.offsetWidth' is deprecated and will be removed in M50, around April 2016. See https://www.chromestatus.com/features/5724912467574784 for more details. It was saying it was coming from Draggable.min.js:14. I was wondering if i should be worried about this warning since i will be using this plugin on svg code during and after that time frame? Will the plugin will be updated for this or should i not worry? Brad

This worked perfectly for my needs! thank you!

Hi everyone, I know i can go about this a different way and make it work but i was still wondering what the answer would be to this questions i have. I'm trying to get the id of the element in the hit test that the target is going over. Ex: if (this.hitTest("#circle1", "50%")) { } How would i access and get the value of #circle1 inside the hittest if statement? this.target is the object being dragged, but i want to know what i could use to get the "circle1" value? I'm trying to get html info from that circle1. Thanks! Brad

Crazy, I have used draggable with the hitTest in a couple projects this year and no issue in IE8. Using the basic same code in my codepen. I was using this version: VERSION: 0.11.0 DATE: 2015-01-20 No error or anything like that pop up. My new timelines launch just fine once the div is dragged to the hit area. I am not doing anything complex really in my projects. You just drag the div to the correct spot and I just launch a timeline if they are correct. Thank you for the additional information about what is going on with this! I'll make sure i keep this older version around.

The old version works just fine for me and what i need it to do! Thank you for clearing this all up for me! Thank you for all the work you all do! I just love greensock so much and spread the word to all my dev friends about it!

After digging into the hittest part of the docs it does say the quote you gave, but i also saw this on the main page: Even works in IE8! - all major browsers are supported.So maybe update that part that yes the drag works, but not the hittest anymore. I also know that the older versions the hitTest worked just fine in ie8, so hence why i was surprised it didn't now. So was the way it was coded changed? I just trying to figure out what changed. I can use an older version for my project. As of this time i have to support ie8 since our projects get put into legacy systems that users only have access to ie8 to see. BUT please drop support for IE8 since we have been trying on our end to drop ie8 support in our projects. It would make our team so happy if we have another solid reason not to keep supporting it. But i am curious when the hitTest code got changed to no longer work in IE8. I just wanted to make sure it wasn't a bug or anything like that. Brad

Sorry i don't see my zip added to my first post. here it is. drag-and-drop (1).zip

Hi Everyone, I think i found a bug in the latest version of draggable. When i went to test my latest project in ie8 the hit test did nothing in that browser. Worked fine in all others. I am using the newest version you can download. No errors where thrown up or anything like that. I could still drag everything but once i drag the div over the hit location nothing happened. When i switch to an older version of draggable it worked just fine. I know the release notes on 1.18 says it was fixed but it didn't work for me. I created a codepen: http://codepen.io/anon/pen/epdBgP but it seems code pen doesn't work in IE8. So i attached the export zip of this. What should happen when you move the red div to the white one an alert should pop up, but it does not in ie8. If i'm coding something wrong let me know! Thanks, Brad

ugh! so glad i started google this very issue i was having with the .addPause! I thought i was going crazy and my code was messed up!

Ok, i have tried these and they don't work for me. I can get it to clear the inline css, but it doesn't read the css correctly after i hit my refresh button. Does not like the .from i'm using and it set's the inline style not to where it should be after the animation is suppose to happen. (it's setting it to the inline style to the starting position, but not the ending position it should be) It's also forcing it to stay display none and opacity 0. I have been able to create a quick code pen to show you these issues. I can get it to read the new css, but it doesn't take those values and apply them correctly to the invalidated restarted timeline. I could be missing something simple, but i'm not sure what my issue is. http://codepen.io/anon/pen/nwfxs So I have a simple timeline set up. I have it set to auto play right away with a pause in the timeline. When it pause go click the refresh button. You will see that it does clear the inline css style, but then it give's me just the starting position ( i guess) but doesn't give me the correct end position. Also the display none and opacity are back to what is in the .from i have set. It doesn't seem like it's reading the timeline to run the animation to the end point. So am i going about this all wrong?

Thanks for this additional advice and i will try some of this out today at work. I'll let you know if this works for me. Thanks again!

I don't know if i could create a codepen to show you my projects since they are very big projects with tons of parts. Rodrigo you are right, i'm update my local dev tools css in the browser, then take that and put it in my css file which i then save. Then i have a button that will reload the just saved css file. The browser shows the new css but greensock does not read the new css. I do not want to restart the whole timeline since these projects can get to be about 10 min long to run once coded up. I'm tired of having to find my position over and over again in my timeline. I just want to be on the same section of the timeline i'm editing and have greensock read the new css i have without having to restart the timeline. I'm looking for it to refresh the greensock calculations with the new css file. I have tried invalidate and restart and that doesn't do at all what i'm looking for since it is forcing me to move my slider bar to the position i was last editing. (also doesn't read my saved css file at all for some reason) I just want to stay at the same point on my timeline, without restarting it, and have it take in the updated css info from my file. That way i don't have to move my slider on my timeline to get to the position i was editing in the timeline. I just want greensock to go rework the positions and styles base on the new css file. A timeline refresh and recalculate without changing the position i am on in my timeline.

Hi everyone, I have been trying to find out a way to refresh a timeline without having to reload the whole page. This is for my development tools so i don't have to always hit the browser refresh button and drag my slider to the last location i was editing to see my new css updates. So here is what i'm doing and hoping you can help me out. So i have my developer tools i have created for my greensock projects to help me with my projects. We have a slider bar to move me along in the timeline we have created. (my projects tend to be like learning videos). Whenever i make an update to my css i have to hit reload on the browser and drag my slider to the position i am working in. I do this like a thousand times a day and i'm getting a little tired of this. lol. I have been able to get the browser to read my saved css edits without refreshing the whole browser. But when i do that my greensock timeline is still going off of the old styles i had before i updated them. I'm looking for a way in code that i could also have greensock recalculate the timeline without refreshing the whole page. I want the inline css styles to update to match the updated css i just pulled in. I would love something like mytimeline.refresh(); but i don't think we have anything like that. My main goal i want is when i'm working on the timeline and i need to move a div up 100 px i can hit my own reload button and it will update the greensock timeline to know that i moved my div up and make the animation correct and update the inline style. I hope this makes sense to everyone and there is a solution out there to help me. I just want to hit my own reload button and see the new css and the updated timeline properties show up without hitting the browser refresh button. Thanks, Brad

ok, i created a codepen to show you what happens: http://cdpn.io/wDhjq AND i just solved my own issue. I was using a .call to a function to resume the tl timeline (the main one) and if i switch that .call to a tl.play i don't have this issue anymore. Thanks.