CODEWITHSUNDEEP
javascripthtml
kirous
kirous

Reputation: 21

Add an audio player, Enable and Disable tab

here in this blog I found an interesting effect that I put into practice programming using the footer attribute. The effect is to slide the footer as if it were like a tab for which to program I worked.

Now the problem is if I add an audio player above the tab, when I want to start the audio playback, the tab slides to click on my player for example click on PLAY or stop, what I want is that only this Activated the FOOTER tab to click on it to slide, instead the audio player that does not perform any action in sliding as a bullet and only play when I click on it. Here the codes:

HTML

<span class="fTab">
   <!- - AUDIO- - >
   <section id="repro">
    <audio controls="controls" autoplay>
     <source src="music.mp3" type="audio/mpeg" />  
    </audio>
   </section>

    ***CONTENT***

 </span>

 <footer>
    <section class="credit">

      <div id="slideout_inner">    

        **CONTENT**

      </div>

    </section>
 </footer>

JAVASCRIPT

jQuery(function($){
  $('.fTab').on('click', function(){
    $(this).toggleClass('active');
  });    
})

The css is long because it is not very important. The important thing is the javascript since it is the one that will execute the effect of sliding the FOOTER.

I hope you understand what I say, I hope your help from everyone. Thank you

Upvotes: 1

Views: 58

Answers (1)

Peter Kota
Peter Kota

Reputation: 8340

You can use stopPropagation. If #repro element is clicked then the $(this).toggleClass('active'); won't be fired.

The event.stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed.

$("#repro").click(function(event){
    event.stopPropagation();
});

Upvotes: 1

Related Questions