I prefer pageX and pageY instead of clientX/Y. I mean: When circle.style.left = e.clientX - this.offsetLeft - d / 2 + "px"; circle.style.top = e.clientY - this.offsetTop - d / 2 + "px"; it takes width and height of an screen so when you'll scroll down it will drop coordinates (because screen have always the same width and height - only page height and width is changing) and give false value. When you do it like this: circle.style.left = e.pageX - screenLeft - this.offsetLeft - d / 2 + "px"; circle.style.top = e.pageY - screenTop - this.offsetTop - d / 2 + "px"; you can scroll down and everything works. Thanks for this video - helped me so much.
After looking for about a day how to do something similar (pulse on m1 button-up) you're the only person who's made an actually good video explaining it.
Thank you so much for this tutorial. It helped me A LOT! i used: var element = e.target; var rect = element.getBoundingClientRect(); circle.style.left = e.clientX - rect.left -d/2 + 'px'; circle.style.top = e.clientY - rect.top - d/2 + 'px'; because that coordinades in the code didnt work for me.. hope it helps someone
I'm sooo happy you learned from the video! Just be careful when using e.target in a click event - if you click rapidly on the button, the target of the click event (e.target) may end up being the previous (still expanding) circle, and that'll skew the rect variable. To fix this, set rect = this.getBoundingClientRect() That's a great alternative solution!
Set a timeout via setTimeout, and to remove an element from the DOM with removeChild: parent.removeChild(circle). The parent element would be the button, in this case.
Thanks for your quick answer! Sadly I couldn't get it working, would you mind sharing all the code that would achieve this? Via codepen maybe if you have the time?
+Elwin de Witte I'd rather have my audience learn rather than just give them the answer; that's why I spend so much time explaining in my videos. Look up removeChild on MDN. I'm sure you can figure it out. 😀
Hey just a quick question, what if one wants the circle's center to align with that of the button being clicked irrespective of what part of the button is clicked?
In that case I'd forget about doing the positioning with JavaScript. Instead, ONLY generate the circle with JavaScript, then position the circle completely with CSS. Like this: jsfiddle.net/Hatchet/4tgjrcwb/
+Mehmet Efe Akça I'm not at my computer at the moment, so I can't give you an exhaustive list, but that specific extension is called minimap, I believe.
Thanks for watching! I guess I meant "pure css & js" as in no CSS libraries/preprocessors/transpilers and no JS libraries/preprocessors/transpilers. Just plain old web technologies. :)
Yes mate. That was exactly the problem! Thanks a ton. And oh, I got rid of the divs by adding this line at the end of the createRipple function. circle.addEventListener("transitionend", e => circle.remove()); Works like a charm.
I'm sorry - there are two versions of the JS file; the one I linked you to is not quite exactly what's in the video. Here's the original link: gist.github.com/encody/4e2ef59ea41c216ca2f110ea7180ac38#file-button-js
Since I'm not the administrator of the website (I don't have access to the codebase), after taking a cursory look, I'd say the additional CSS on the page is messing it up. Try systematically removing portions of the page until it works again. Sorry I can't be of more help.
+mohammad omer That's so great to hear! I really love it when people learn something from my videos. It makes it all worth it to hear your success stories.
sorry, I was searching for What does the word "Node" mean? I occasionally write it and see it but I can't understand what does it mean? -parentNode -querySelectorAll returns a Node list -createTextNode() ..etc?
Well, a inside of a form is interpreted as a submit button, so every time it's pressed it'll effectively reload the page. To fix this, either don't wrap the in a or add the attribute `type="button"` to the .
Thanks, if i added attribute `type="button"` to the in php ripple effect works but the form is not getting submitted and data is not getting inserted in database please help me to submit form successfully.
If you want that button to be submitting the form, it has to be a submit button, so it can't have the `type="button"` attribute. If you want to stay on the same page while the form is being submitted (allowing the ripple to complete fully), you're probably going to need to submit the form data with JavaScript. Personally, I think it's more important that everything works as intended rather than looks as intended (though looks are still important). I don't think the ripple being interrupted is going to negatively influence UX in any major way. Happy coding!
+Krrish Thanks for the suggestion, but I'm not good enough at video editing (nor do I have time) to do that. As far as I know, my screen recorder doesn't support that automatically either. Sorry.
Google has now made this public to everyone. Include "" in . If you would like to add the ripple to anything, follow these steps: 1. Find an object to add a ripple to. Hello World 2. Include "mdl-js-ripple-effect" Hello World That's all (I've added a link to a codepen; codepen.io/Tizen20/pen/Bgepzz?editors=1000#0)
you could call: $(".ripple").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function () { $(".ripple").remove() }); after each ripple and it would remove the ripple after the animation has finished playing. Just don't forget to link the jquery cdn!
I prefer pageX and pageY instead of clientX/Y. I mean:
When
circle.style.left = e.clientX - this.offsetLeft - d / 2 + "px";
circle.style.top = e.clientY - this.offsetTop - d / 2 + "px";
it takes width and height of an screen so when you'll scroll down it will drop coordinates (because screen have always the same width and height - only page height and width is changing) and give false value.
When you do it like this:
circle.style.left = e.pageX - screenLeft - this.offsetLeft - d / 2 + "px";
circle.style.top = e.pageY - screenTop - this.offsetTop - d / 2 + "px";
you can scroll down and everything works.
Thanks for this video - helped me so much.
Hmm, I didn't think of that. Thanks!
You are lifesaver man
Larga vida a siema32,
Thanks for the tip, I was just looking for a fix for the screen problem!
After looking for about a day how to do something similar (pulse on m1 button-up) you're the only person who's made an actually good video explaining it.
If hte button is in the right of window, wave doesnt work:(
Thank you so much for this tutorial. It helped me A LOT!
i used:
var element = e.target;
var rect = element.getBoundingClientRect();
circle.style.left = e.clientX - rect.left -d/2 + 'px';
circle.style.top = e.clientY - rect.top - d/2 + 'px';
because that coordinades in the code didnt work for me.. hope it helps someone
I'm sooo happy you learned from the video!
Just be careful when using e.target in a click event - if you click rapidly on the button, the target of the click event (e.target) may end up being the previous (still expanding) circle, and that'll skew the rect variable. To fix this, set rect = this.getBoundingClientRect()
That's a great alternative solution!
once again, thank you so much! I was having trouble with the e.target, as you said.. Your answer solved my problem :)
You explained that very well. Still getting to learn Javascript, but this helped me take another step in the right direction. Thanks man!
+Elwin de Witte Thanks for watching! I'm so glad you're learning! Keep up the good work!
How can I use a timeout to remove the element as you say on 8:07? I don't seem to get it working. The deletion part that is. Could you help out?
Set a timeout via setTimeout, and to remove an element from the DOM with removeChild: parent.removeChild(circle). The parent element would be the button, in this case.
Thanks for your quick answer! Sadly I couldn't get it working, would you mind sharing all the code that would achieve this? Via codepen maybe if you have the time?
+Elwin de Witte I'd rather have my audience learn rather than just give them the answer; that's why I spend so much time explaining in my videos. Look up removeChild on MDN. I'm sure you can figure it out. 😀
You just got a new subscriber! =D
Can it be somehow converted to a video to be used in video tutorials? It will be immensely useful. Thanks!
What if i want to use this effect for input buttons. How can i make that work aswell?
What are you using to get your atom to look like that?
This is an older video, so I don't remember, unfortunately.
@@GeekLaunch That's okay!
Hey just a quick question, what if one wants the circle's center to align with that of the button being clicked irrespective of what part of the button is clicked?
In that case I'd forget about doing the positioning with JavaScript. Instead, ONLY generate the circle with JavaScript, then position the circle completely with CSS.
Like this: jsfiddle.net/Hatchet/4tgjrcwb/
How can we do all this in Angular JS where i can change the color of my button in a ripple formation way permanently.
+Vikram Prasad I'm sorry, but I'm not very familiar with Angular JS.
Can you tell me the extensions you use for Atom? Especially the extension that shows a quick small preview of the file at the top right.
+Mehmet Efe Akça I'm not at my computer at the moment, so I can't give you an exhaustive list, but that specific extension is called minimap, I believe.
thank you so much! I've craved for that extension since I saw it on another editor.
+Mehmet Efe Akça Absolutely! Happy coding!
Really good tutorial! It helped me a lot. Just 1 suggesstion: Delete the "Pure" before CSS. If it's css and js, it can't be pure css.
Thanks for watching! I guess I meant "pure css & js" as in no CSS libraries/preprocessors/transpilers and no JS libraries/preprocessors/transpilers. Just plain old web technologies. :)
I'm getting an Uncaught TypeError at this.appendChild - this.appendChild is not a function. Help.
+Nelson King Make sure you're adding the event listener properly. The line should look like this: b.addEventListener('click', createRipple)
Yes mate. That was exactly the problem! Thanks a ton.
And oh, I got rid of the divs by adding this line at the end of the createRipple function.
circle.addEventListener("transitionend", e => circle.remove());
Works like a charm.
OMG, that's actually a really great idea! Learn something new every day! :)
@@nelsonking :( circle.addEventListener("transitionend", e => circle.remove());
W not work to me :(((((
Do you have skype? I am having a issue where the ripple is going in the middle of the page instead of in the button
Compare your code against what's on GitHub: github.com/GeekLaunch/button-ripple-effect/blob/master/button.js
Hopefully that will be helpful. :)
GeekLaunch I did that multiple times. But the ripple is in the middle of the page
I'm sorry - there are two versions of the JS file; the one I linked you to is not quite exactly what's in the video. Here's the original link: gist.github.com/encody/4e2ef59ea41c216ca2f110ea7180ac38#file-button-js
Still not working you can check it out on my website minemoore.uk.to/agar/
Since I'm not the administrator of the website (I don't have access to the codebase), after taking a cursory look, I'd say the additional CSS on the page is messing it up. Try systematically removing portions of the page until it works again. Sorry I can't be of more help.
link href="asdfsdf"? cant see that clearly. it doesnt matter right?
I'm sorry, I don't quite understand what your problem is.
How can i link somethink to this button?
+luiz rodrigues use an anchor instead of a button.
it creates many divs and i would like that stop it, also i would like to know how i can get the exact point which user click. ty
i resolved the problem with divs creation:
window.setTimeout(function(){
circle.remove();
}, 1000);
adding just in the end
If you want the exact coordinates of the mouse click relative to the page, simply use e.pageX and e.pageY.
Ty i will try it
This was so well explained
+Devarsh Shah Thank you so much! All the positive feedback makes me never want to quit! 😂
You are my hero!
:D
You know what I love you, bro, you actually taught me what I was seeking God bless you man thanks so much
+mohammad omer That's so great to hear! I really love it when people learn something from my videos. It makes it all worth it to hear your success stories.
thanks so much brother it really helped me
Really cool tutorial!
Thanks!
Beautiful text editor ya got there.
Well, thank you!
sorry, I was searching for
What does the word "Node" mean? I occasionally write it and see it but I can't understand what does it mean?
-parentNode
-querySelectorAll returns a Node list
-createTextNode()
..etc?
Great tutorial! thank you so much!
+Knot_7ver Mufti You're very welcome!
Great Tutorial!! Helped me a lot, thanks! ☺
+Code Instinct I'm happy it helped you! Thanks so much for watching!
Nice and perfect tutorial. please help if we write this code in any div button ripple is not working in below code
submit
Well, a inside of a form is interpreted as a submit button, so every time it's pressed it'll effectively reload the page. To fix this, either don't wrap the in a or add the attribute `type="button"` to the .
Thanks a lot it working successfully.
Thanks, if i added attribute `type="button"` to the in php ripple effect works but the form is not getting submitted and data is not getting inserted in database please help me to submit form successfully.
If you want that button to be submitting the form, it has to be a submit button, so it can't have the `type="button"` attribute. If you want to stay on the same page while the form is being submitted (allowing the ripple to complete fully), you're probably going to need to submit the form data with JavaScript.
Personally, I think it's more important that everything works as intended rather than looks as intended (though looks are still important). I don't think the ripple being interrupted is going to negatively influence UX in any major way.
Happy coding!
Thank you very much for your hard work!
+premier69 oh yeah, definitely! Comments like this make it all worth it! :-)
I also subscribed! just found your channel! awesome stuff!
That's great! Thanks so much!
Bro it's awesome!
Thank you soo much)
Thanks for watching! :)
Great Tutorial !
It would be great if you make tutorial of comment box using AJAX!
Thanks for the comment and the idea! I'll add it to my "list". Any specific details you'd like included or covered?
+GeekLaunch Thank you for your reply!
Also If you cover more about the php classes and functions with AJAX more specifically then It helps me a lot!!
Request granted, check it out: th-cam.com/video/-f3KtXibLxU/w-d-xo.html :)
you are awesome and thank you very very much, your explain is very helpful
+yosef rahahleh Definitely! Thank you for watching!
Thks its helpful i cant wait to subscribe
+herbert kavuma You're welcome!
Thank you!
+Luis J. Albizu You're welcome!
U should zoom ur video when u r going to type
+Krrish Thanks for the suggestion, but I'm not good enough at video editing (nor do I have time) to do that. As far as I know, my screen recorder doesn't support that automatically either. Sorry.
GeekLaunch when u r recording, just zoom in then, that's all,
Actually it helps to watch ur video with no obstacles nothing else 😊..
you could just hit ctrl + on atom
❤❤❤
if only this worked.
I'm sorry - are you having problems? Have you tried the code from GitHub?
Google has now made this public to everyone. Include "" in . If you would like to add the ripple to anything, follow these steps:
1. Find an object to add a ripple to.
Hello World
2. Include "mdl-js-ripple-effect"
Hello World
That's all (I've added a link to a codepen; codepen.io/Tizen20/pen/Bgepzz?editors=1000#0)
ziehne
+opalgemstone ごめんなさい、わかりません。それはドイツ語ですか。ドイツ語は話ない。
you could call:
$(".ripple").bind("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd", function () {
$(".ripple").remove()
});
after each ripple and it would remove the ripple after the animation has finished playing.
Just don't forget to link the jquery cdn!