i'm trying to get the window hight and the y rect of the element i got a message '.getBoundingClientRect() is not a function'
hint : here is the complete project so u can see my problem. i'm getting the error in the log here is my code:
var messageGetter = $('.message');
var clientH = document.documentElement.clientHeight;
var memoY = messageGetter.getBoundingClientRect().height;
alert(memoY);
$(document).scroll(function(){
if(messageGetter.isInViewport()){
messageGetter.fadeIn('slow').css('visibility', 'visible');
}
})
<div class="lower-container">
<div class="message message-right">
<p class="message-content">I agree that your message is awesome!</p>
<div class="message-timestamp-right">SMS 13:37</div>
<div class="ball-right"></div>
</div>
<div class="message message-left">
<p class="message-content">I agree that your message is awesome!</p>
<div class="message-timestamp-right">SMS 13:37</div>
<div class="ball-left"></div>
</div>
<div class="message message-right">
<p class="message-content">gggg</p>
<div class="message-timestamp-right">SMS 13:37</div>
<div class="ball-right"></div>
</div>
<div class="message message-left">
<p class="message-content">I agree that your message is awesome!</p>
<div class="message-timestamp-right">SMS 13:37</div>
<div class="ball-left"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="index.js" charset="utf-8"></script>
</body>
</html>I believe this is happening because under the jQuery hood $(".message") is calling document.querySelectorAll('.message') which returns an array of the elements, rather than an element itself, therefore when you try to call .getBoundingClientRect() it's not a function because you're not directly accessing any element.
Try doing
$(".message")[0].getBoundingClientRect()