0

The title says it all. I got a list of LI elements. When clicked on navigation the active li gets a class 'current' but this takes a second. But when I use my code I need to click on the nav then the li opens and I need to click again to make the code register. The place of the videos cannot be hardcoded! It needs to be dynamic.

(function($) {
$(document).ready(function(){
  $('video').each(function() {
      $(this).get(0).pause();
  });
  $('.slides').children('li').addClass('test');
});   

$(document).on('click','span',function(){

    if ( $('li').hasClass('current') ) {
      $('li.test').find('video').each(function() {
          $(this).get(0).pause();
      });  
      $('li.current.test').find('video').each(function() {
          $(this).get(0).play();
      }); 

    } 
});  
})(jQuery);

http://codepen.io/hennysmafter/pen/aNrVKG?editors=1010

Unfortunately I won't be available for the next hour or so but will be back after that! Everyone thank you for helping.

purple11111
  • 709
  • 7
  • 20

1 Answers1

2

I found what is causing the issue :

You are playing the elements whose parent has ".current" class when a span is clicked.

But when you click an element, it et the ".show" class, and the previously selected span get the ".hide" class AND keeps the ".current" class, until the animation is finished (then the ".show" & ".hide" class are removed and the ".current" class switch elements).

One solution is changing the selectors like this :

$(document).on('click','span',function(){
      console.log('the if is running');
      $('.current, .hide').find('video').each(function() {
          $(this).get(0).pause();
      });  
      $('.show').find('video').each(function() {
          $(this).get(0).play();
      });

});

By doing this, whenever a span is clicked, you pause the element whose parents have the ".hide" class, and play the ones whose parents have the ".show" class.

Another solution should be creating an event when a class is applied (See jQuery - Fire event if CSS class changed).

Community
  • 1
  • 1
Seblor
  • 6,947
  • 1
  • 25
  • 46
  • Thank you very much for your answer. I am currently walking the dog and will try your code in about 30 - 45 min. Did you try your code in the Codepen? – purple11111 May 17 '16 at 17:48
  • Just tried your code and not only is it working in the Codepen: http://codepen.io/hennysmafter/pen/LNodZd?editors=1010 It is also working on the site I need it. So thank you so much for this code it helps me a lot! – purple11111 May 17 '16 at 18:32
  • Could you post this answer also at: http://stackoverflow.com/questions/37277923/tiltslider-play-pause-video-elements-if-li-has-class-current/ This was the first question I made regarding this subject. I made another question because the code in the previous question was changed so much it didn't really fit anymore. And the title was wrong. I already posted my own answer and clearly stated that it was you who provided the answer but it would be better if you posted a answer so I can upvote you as you deserve the credits and not me. – purple11111 May 17 '16 at 18:40
  • just want to thank you again for the work you did yesterday. Especially for pointing out the firing of events if css changes. That is such a usefull link! Anyway I did some modifications to the script to make it run the video when it is in the first slide. Once again thank you so much and have a wonderful day! – purple11111 May 18 '16 at 12:21
  • You don't have to thank me again :) I'm helping because people helped me before, and I have the possibilities to do so. Have a nice day too. – Seblor May 18 '16 at 22:09