How to add class to an element if another div width reach its position

Question

I am stuck in something and need your help, i have been trying to figure out a javascript function but i am unable to get it with easy and light weight formula for a cms use.

I have a progress bar of the song. and below the progress bar there is a strip which contains images and those images have a hover effect as well, i want if the above progress reaches to anyone the image position in the below strip it ads and active class to the image and removes the class right after it passes the end of the image. Please check fiddle for working player.

#containment-wrapper2 {
  width: 100%;
  height: 30px;
  background: #aaa;
}

#progress {
  background: #000;
  height: 30px;
}

#containment-wrapper {
  width: 100%;
  height: 30px;
  background: #eee;
}

.comment {
  background: #000;
  position: absolute;
}

.comment:hover,
.comment.active {
  background: red;
  transform: scale(1.5);
}

i am seeking something like soundcloud does on its comments system.

I am really stuck in this, and seeking for a light weight and simple solution that can work dymanically because comment id's will be coming from database and i wont be able write manual id's to any js function.

I want when this class "jp-play-bar" reach the start of the image in the bottom it ads class "active" to the image and as it reaches the end of the image it removes the active class

Thanks in advance

here is a fiddle

Marouen Mhiri · Accepted Answer

You have use a function comparing the with of the progress bar with the left position of an image and then call this function every time the progress bar changes. You can call this function on the event timeupdate so you are sure that the progress bar is changing:

$('#jquery_jplayer_2').on($.jPlayer.event.timeupdate, function(e){
   var progress = document.querySelector('.jp-play-bar').style.width;
   highlightImg(progress);
  });

and now the highlightImg function:

function highlightImg(progress){    
  progress = parseFloat(parseFloat(''+progress).toFixed(1)); // normalize the values to be compared easily
  var imgs = $('img.comment');
  imgs.map(function (i, im)
    {   
      var img = $(im);
      var currentImgLeftPos = parseFloat(parseFloat(im.style.left).toFixed(1)); // get the left position of the current image
      console.log(progress); // logs the progress bar width
      console.log('left' ,currentImgLeftPos); // logs the left postion of the images
      img.removeClass('active'); // remove active from other images
            if (progress > currentImgLeftPos - 1 && progress < currentImgLeftPos + 3  ) { // I just added an interval where the images can be shown otherwise the effect will very quick
        img.addClass('active'); // add the class when needed
      }
    }
  );
}

Hope this will help. I also updated your fiddle: http://jsfiddle.net/XLNCY/22626/

How to add class to an element if another div width reach its position

Answers (1)

Related Questions