Jump to content
GreenSock

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

assign draggable.hitTest to div

Go to solution Solved by GreenSock,

Recommended Posts

Hi, this may be my first time, but i come form flash and twenMax era.

 

This time i'm at the end and i'm about to give up.

 

im creating squares(as div with own id and same class) put them into div so they do span on entire width and height of that div.

its 1250 squares (there is another div above with text) and so far only hitTest can find underlaying elements, since they are covered with text which need scroll and clicks on links so i can't use pointer-events: none;

 

Now, iterating through 1250 items in array to highlight square which is under mouse cursor is computationaly intensive but works.

 

So i was wondering, instead iterating can i assign hitTest to those squares and when mouse enters its coordinates it will respond to that event.

yeah, i know onMouseEnter and onMouseOut doe's not work since we do have element over it.

 

in this example div of id "oko" follows mouse and is a hitTest Detector.

 

Any other method or suggestion is appreciated to make it work, basicly what i need is to get div id under ursor to animate it's properties and when mouse is not over that square anymore i need to restore default look to square that was highlighted.

 

Thank you for awesome years with gsap,twenmax and i hope for more to come.

 

demo here

 

http://liquid.pl/newsx.html

 

Best Regards

Liquid

Link to comment
Share on other sites

  • Liquid changed the title to assign draggable.hitTest to div
  • Solution
13 hours ago, liquid@liquid.pl said:

i come form flash and twenMax era.

Welcome!

 

13 hours ago, liquid@liquid.pl said:

instead iterating can i assign hitTest to those squares and when mouse enters its coordinates it will respond to that event.

yeah, i know onMouseEnter and onMouseOut doe's not work since we do have element over it.

I'm not able to see that URL and without a minimal demo, it's hard for me to advise you but perhaps you want to look at this: 

https://developer.mozilla.org/en-US/docs/Web/API/Document/elementsFromPoint

 

If you still need some help, would you mind putting together a minimal demo (like in CodePen) please? That will significantly increase your chances of getting a quality answer. 👍

  • Thanks 1
Link to comment
Share on other sites

I think this could be a solution "elementsFromPoint".

Thank you

 

I'm supprised You did not invent a plugin (targetMouseElement) to find element on given x,y returns array of elements.

Potentialy useful thing.

 

Thank you

Link to comment
Share on other sites

Indeed, that did the trick.

 

Thank You

  • Like 1
Link to comment
Share on other sites

fully working "vision"/example on http://www.liquid.pl in "NEWS" section, works on mobile as well.

 

This website was done in Flash before, i can't understand how much better it is now in html than it was in Flash, something is not right, Flash should be superior (biased opinion, i Love Flash).

  • Like 2
Link to comment
Share on other sites

I love this website - such a throwback to the old days! 👾

  • Like 2
  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×