tiltSlider play/pause video elements if li has class current

Question

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

The code in question is this:

(function($) {
  $(document).ready(function(){
    $('video').each(function() {
        $(this).get(0).pause();
    });
  });   

  $(document).on('click','span',function(){
    if ( $('li').hasClass('current') ) {
      $('li.current').find('video').each(function() {
          $(this).get(0).play();
      }); 
    } else if ( !$('li').hasClass('current') ) {
      $('li').find('video').each(function() {
          $(this).get(0).pause();
      });       
    }
  });

})(jQuery);

The problem.

The moment the user clicks on the 3rd nav button the li element has not yet assigned the custom class to it. So it now requires the user to manually click a 2nd time on the same nav button(which clearly is stupid.).

Requirements

The li with video elements can be any slide so I can't hardcode it in.

What have I tried.

I have tried Ayyoub Dahhane suggestion which works brilliantly but at the moment it is hardcoded which slides are video slides and this cannot be. I have tried some other codes that can be seen at: http://codepen.io/hennysmafter/pen/PNvEPN & http://codepen.io/hennysmafter/pen/MydEBw I tried working with a delay. Codepen is already changed so no link for this. But it did not work anyway.

I find it absolutely bonkers that this proves to be so freaking difficult. So here my latest attempt which is working but shows a couple of errors in the console and it still requires double clicking: http://codepen.io/hennysmafter/pen/aNrVKG?editors=1010

So back to the drawing board.

score 2 · Accepted Answer · edited May 23 '17 at 12:24

Well as I was asked, here's my answer from onclick function requires double click because of class assignment delay :

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).

Thank you so much. It is accepted and upvoted and it deserves a lot more upvotes if you ask me! I deleted my post making the page clearer for everyone. — purple11111, May 17 '16 at 18:54

Le-Mr-Ruyk · Answer 2 · 2016-05-17T16:09:25.583

0

     $(function(){
  $("nav").on('click','span:nth-child(3)',function(){
    $('video').each(function() {
      $(this).get(0).play();
          });   
});

 $("nav").on('click','span:not(:nth-child(3))',function(){
    $('video').each(function() {
      $(this).get(0).pause();
          });   
});
})

Link to Test Here

edited May 17 '16 at 16:09

answered May 17 '16 at 15:17

Le-Mr-Ruyk

179
2
17

Hey thank you I just tried it but it don't seem to work in the codepen. So I probably did something wrong could you please try it in Codepen and send me the link. I would highly appreciate it! – purple11111 May 17 '16 at 15:22
I just updated the question with a new Codepen which is almost working now. Would appreciate it if you could take a look at it! @ayyoub-dahhane – purple11111 May 17 '16 at 15:32
@purple11111 Check this solution, – Le-Mr-Ruyk May 17 '16 at 16:09
Thank you for all the effort you put into it. It is working in the Codepen excellent. But is there a way to remove the `:nth-child(3)` because I can't hardcode it in. Thanks so much for helping! Somehow SO is constantly removing your name when I add it. @ayyoub-dahhane Except if I put it somewhere in the middle or at the end? – purple11111 May 17 '16 at 16:15
Hey I just notices that it also plays the videos in slide 5. So when you go to slide 5 and click on slide 3 the videos in slide 5 starts playing. – purple11111 May 17 '16 at 16:32

tiltSlider play/pause video elements if li has class current

2 Answers2

Linked