Davide Giorgetta Davide Giorgetta - 2 months ago 7
Javascript Question

Check element is in view port using isOnScreen

I am working on a function that should get the text inside a span with class ".dida" of each post (Tumblr) and append them in a specific place (a div with id "#bottom-stripe") only when the image of the posts (img with class ".miniatura") are 50% in viewport.

I am using this external library to detect the elements on viewport:
https://github.com/moagrius/isOnScreen

This is my JS code:

<script>
$( window ).on('load scroll', function(e) {
$( "img.miniatura" ).each(function() {
if ( $( this ).isOnScreen(0.5, 0.5) ) {
var dida = $(".dida").each(function() {
$(this).html();
});
$( "#bottom-stripe" ).empty();
$( "#bottom-stripe" ).append( dida );
}
});
});
</script>


The script get all the captions together and append them all in the #bottom-stripe div. I want it to do this only when the img.miniatura are 50% in the viewport.

Any suggestions on where is the mistake?
Many thanks for your help!

Answer

It seems that you want to detect which image is currently in viewport.

$("img.miniatura").each(function() {
      if ($(this).isOnScreen(0.5, 0.5)) {
        var text = $(this).parents('div').find('.number').html();
        //Detect which image is in viewport
        $('#bottom-stripe').html(text);
      } 
});

I've add images text under number class, see the working example to detect the current view port image.

// https://github.com/moagrius/isOnScreen
!function(t){t.fn.isOnScreen=function(o,e){(null==o||"undefined"==typeof o)&&(o=1),(null==e||"undefined"==typeof e)&&(e=1);var i=t(window),r={top:i.scrollTop(),left:i.scrollLeft()};r.right=r.left+i.width(),r.bottom=r.top+i.height();var f=this.outerHeight(),n=this.outerWidth();if(!n||!f)return!1;var h=this.offset();h.right=h.left+n,h.bottom=h.top+f;var l=!(r.right<h.left||r.left>h.right||r.bottom<h.top||r.top>h.bottom);if(!l)return!1;var m={top:Math.min(1,(h.bottom-r.top)/f),bottom:Math.min(1,(r.bottom-h.top)/f),left:Math.min(1,(h.right-r.left)/n),right:Math.min(1,(r.right-h.left)/n)};return m.left*m.right>=o&&m.top*m.bottom>=e}}(jQuery);

// show only captions related to visible images
$(window).on('load scroll', function(e) {
    $( "img.miniatura" ).each(function() {
      if ($(this).isOnScreen(0.5, 0.5)) {
        var text = $(this).parents('div').find('.number').html();
        //Detect which image is in viewport
        $('#bottom-stripe').html(text);
      } 
    });
});
.info ul.tags {
  display: none;
}

#bottom-stripe {
  width: 100%;
  height: auto;
  position: fixed;
  bottom: 0px;
  left: 0px;
  background-color: #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="post">
  <div class="post-content">
    <div class="media">
      <a href="#">
          <img class="miniatura" src="https://placehold.it/350x300">
      </a>
      <div class="number">First Image</div>
      <div class="info">
        <ul class="tags">
          <li>FirstWord</li>
          <li>SecondWord</li>
          <li>ThirdWord</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="post">
  <div class="post-content">
    <div class="media">
      <a href="#">
          <img class="miniatura" src="https://placehold.it/350x300">
      </a>
      <div class="number">Second Image</div>
      <div class="info">
        <ul class="tags">
          <li>FirstWord</li>
          <li>SecondWord</li>
          <li>ThirdWord</li>
          <li>FourthWord</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div class="post">
  <div class="post-content">
    <div class="media">
      <a href="#">
          <img class="miniatura" src="https://placehold.it/350x300">
      </a>
      <div class="number">Third Image</div>
      <div class="info">
        <ul class="tags">
          <li>FirstWord</li>
          <li>SecondWord</li>
          <li>ThirdWord</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<div id="bottom-stripe">test</div>

Comments