Thank you, Sir, your explanation was so accurate it helped me a lot, to understand how this works, when someone asks me about this or other JavaScript-related topics I will refer people to your channel.
Tanks you a lot ! I'd like to say i was following a french tutorial on the same topic but it appears something was not working for me and some viewers, but yours is perfect ! It helped me !
Well presented - has gist page too - well researched. Would not have known about this API. I am a subscriber and watch out for your videos. Keep up the great work! thanks.
Wonderful tutorial! Quick question: in the line entry.target.classList.add('active'); isn't each entry an HTML element from the entry array? What is 'target' doing? You mention that 'target' is the actual HTML element, so I'm a confused. Thanks!
if 2 elements are in viewport,then how to handle them? i m using intersection observer for videos.i want to play one video and pause the second one if they are in viewport how to achieve this?please help sir...
Steve I noticed when I try to do something like : function beTouching(entries){ if(entries.isIntersecting){ console.log('intersected'); } else { console.log('not intersected'); } } It doesn't work, it only works in the foreach loop, do you know why that is?
Thanks so much for this it helped me understand this a bit more. Am a beginner and am working on a project that requires the use of this API. Can you help me out please. So my problem is that ( I have multiple sections on my page and I want to add an active class to each one of them when they're are in viewport, and toggle the class when it's not in viewport. )
@@SteveGriffith-Prof3ssorSt3v3 I finally got my code to work using the getBoundingClientRect() method. I find it way easier than this method. But great video man.
some of the best explaining tutorials about js. you deserve way more views and subscriptions! keep up the good work Steve.
Agreed with you @marco. Its A+
This tutorial is simply... AMAZING.
Two words! FANTASTIC TUTORIAL!
Finally, I understand Intersection Observer. Thank you very much! I might be the only one but you do sound like Bryan Cranston. Amazing!
Thank you for this.the Best explanation of intersectionObserver on youtube.good luck
Thank you, Sir, your explanation was so accurate it helped me a lot, to understand how this works, when someone asks me about this or other JavaScript-related topics I will refer people to your channel.
Thx. So well explained in a way that is structured and easy to understand. Every detail is introduced at the right place and at the right time.
One of the most informative tutorials I've ever watched on js. Subscribed and rung that bell. Keep it up!
This is so clearly explained and put into examples! Thank you for this!
Tanks you a lot ! I'd like to say i was following a french tutorial on the same topic but it appears something was not working for me and some viewers, but yours is perfect ! It helped me !
Thank you Steve! It is the tutorial I've been looking for! Subscribed and thumb up!
after 3 days of struggling to understand and find a good video about this . i finally found one and understand it on the fly. gj. like subscribe. :D
Superb instruction. Thank you, Steve!
Omg I just watched the whole video, you saved my life, this is exactly what I needed.
Thank you for taking the time to make this
Very well explained for an intricate subject. Thanks for gists too!
Thanks for making this video, It's really helped my studies.
Your voice and your pedagogy are delicious, Big Up
The Jimmy Page of Javascript! The Maestro. . .
Very nicely explained. Thank you very much.
Very good and clear. A very usseful API.
Well presented - has gist page too - well researched. Would not have known about this API. I am a subscriber and watch out for your videos. Keep up the great work! thanks.
You saved my time
Thanks man, cool
Great work! Thank You!
Wow. What a clear and simple explanation! Thanks a lot :)
You are awesome. God bless you 🙏
👍 nice explaining ❤️
amazing .. i enjoy your way of teaching
You are such a great teacher, thank you so much for sharing your knowledge in such a concise way. One unrelated question: why do you use Avast? :)
I have used several different anti virus programs over the years on different computers
you make it simple for me thank you
Thank you, Steve!
You're welcome Tetyana
Greate tut and love the soft voice
thank you Steve! :)
you are awesome ,as always
I have a question about how you would implement the code if you want just one p tag to come to the view?
Amazing video !
Thanks!!! It is very helpful for a beginner
Great video!
Thank you sooo much Sir. This video is really helpful for me. Thanks
i love your video! as well as your voice
Wonderful tutorial! Quick question: in the line
entry.target.classList.add('active');
isn't each entry an HTML element from the entry array? What is 'target' doing? You mention that 'target' is the actual HTML element, so I'm a confused. Thanks!
never mind, I answered my own question by logging 'entry' to the console and carefully looking at the various properties on it.
Thanks for detailed explanation, but I don't understand what "ob" parameter in "beTouching" function represents
It is the Observer object that is created on line 233.
excellent thanks !
Great explanation! thanks for sharing this! you should make asmr programming videos too! LOL
😀
nice one
Thank you!!!
Thanks!
life saver🙂
This guy needs to be the next David Attenborough, but American edition.
Canadian edition. 😀
@@SteveGriffith-Prof3ssorSt3v3 Dammit! Luckily, we love our Canadian neighbors so I'll take it.
Top! works seemless… after a bit of patience with my code :)
if 2 elements are in viewport,then how to handle them? i m using intersection observer for videos.i want to play one video and pause the second one if they are in viewport
how to achieve this?please help sir...
Steve I noticed when I try to do something like :
function beTouching(entries){
if(entries.isIntersecting){
console.log('intersected');
} else {
console.log('not intersected');
}
}
It doesn't work, it only works in the foreach loop, do you know why that is?
Entries is an array.
@@SteveGriffith-Prof3ssorSt3v3 ty
Nice tutorial :D
Sub'd!
thanks ;)
thanks
Perfect :)
Thanks so much for this it helped me understand this a bit more. Am a beginner and am working on a project that requires the use of this API. Can you help me out please. So my problem is that ( I have multiple sections on my page and I want to add an active class to each one of them when they're are in viewport, and toggle the class when it's not in viewport. )
What you are describing is pretty much what I do in the video.
@@SteveGriffith-Prof3ssorSt3v3 I finally got my code to work using the getBoundingClientRect() method. I find it way easier than this method. But great video man.
WOW!!!!