search

samthor / rippleJS

vanilla Material Design ripples
https://samthor.github.io/rippleJS
MIT License
190 stars 22 forks source link

Use other selectors than <div> #1

Closed LukyVj closed 9 years ago

LukyVj commented 9 years ago

Hey, your script is just wonderful!! But I'd like to see it working with more selectors than div.

I'll tweak the code and I may send you a PR when it's done :)

samthor commented 9 years ago

Are you talking about how to host the ripple itself? It shouldn't matter - my examples even use link (since it's a small void element, aka one that doesn't need to be closed).

e.g.-

<button>
  Blah
  <link class="rippleJS" />
</button>
LukyVj commented 9 years ago

Well, I'll be more specific.

I tried to use it on a <figure> element, and it wasn't working. I look into the code, and it seems the function hasCss is applied only to a div element. https://github.com/samthor/rippleJS/blob/master/ripple.js#L13-L21

I thought it was why the ripple wasn't working. I assumed it was related to the hasCssfunction.

Maybe I just don't get how you define the selector that will use the ripple.

samthor commented 9 years ago

Oh cool, there might be a problem there then. Could you share me any sample code that shows a problem with a figure?

So, the code mostly requires you to create a child element that holds the ripples. This might be confusing. You shouldn't apply rippleJS to the thing you want the effect on - you must define a child element to contain them, since there's a lot of style implied by the rippleJS class.

samthor commented 9 years ago

Closing due to lack of information.