CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3694391
user3694391

Reputation: 133

Hiding the Second Play/Pause button

I am making a play/pause button for my slider. I have it working and it's perfect. Almost. The slight problem I have (for which I am sure there is a quick fix) is that I want to show only one play/pause image that would switch classes when clicked.

My images work but since I am creating the two classes for play and pause, I have two images showing up next to my slider that have the same function! How do I hide (get rid of) of the second image while preserving the functionality of the second? I cannot just remove the second ul class from my HTML since I'm assigning attributes to it, but I cannot figure out how to not make it show up. I've tried searching online but none of the solutions address my specific problem.

Here's the code:

$('#autocontrols').on("click", '.bx-start', function() {
  alert("Starting!");
  main_slider.startAuto();
});

$('#autocontrols').on("click", '.bx-stop', function() {
  alert("Stoping!");
  main_slider.stopAuto();
});

$('#autocontrols ul').bind("click", function() {
  if ($(this).attr("class") == "bx-start")
    $(this).attr("class", "bx-stop");
  else
    $(this).attr("class", "bx-start");
});
/*auto start button*/

ul.bx-start {
  background: image-url("pause.png") no-repeat 0 0;
  height: 50px;
}

/*auto stop button*/

ul.bx-stop {
  background: image-url("play.png") no-repeat 0 0;
  height: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='autocontrols'>
  <ul class="bx-start">
  </ul>
  <ul class="bx-stop">
  </ul>
</div>

Upvotes: 1

Views: 1539

Answers (2)

Danijel
Danijel

Reputation: 12719

This example will toggle the visibility of elements. Set the initial display property of .bx-stop to none.

CSS:

.bx-start   { background: url( "play.png" ) no-repeat 0 0; height: 50px; }
.bx-stop    { background: url( "pause.png" ) no-repeat 0 0; height: 50px; display: none; }

HTML:

<div id='autocontrols'>
    <ul class="control bx-start"></ul>
    <ul class="control bx-stop"></ul>
</div>

Javascript:

$( '#autocontrols .control' ).on("click", function() {                
    $( '.control' ).hide().not( this ).show();              
});

$( '#autocontrols .bx-start' ).on( "click", function() {
    console.log( "Starting!" );
    main_slider.startAuto();
});

$( '#autocontrols .bx-stop' ).on( "click", function(){
    console.log( "Stoping!" );
    main_slider.stopAuto();
});

Upvotes: 1

Roko C. Buljan
Roko C. Buljan

Reputation: 206627

jsBin demo

First of all
<ul> tag is not meant to be used as a button but rather to contain <li> list elements
so you need is something like this:

<span class="control start"></span>

with the related :

/* auto buttons */
.control{
  display:inline-block;
  width:50px;
  height:50px;
}
.start { background: url("play.png") no-repeat 0 0;}
.stop  { background: url("stop.png") no-repeat 0 0;}

than the you need becomes pretty trivial:

$('.control').click(function(){

  // First toggle the class
  $(this).toggleClass('start stop');

  // now booleanize the current class
  var isPlay = $(this).hasClass('start');

  if(isPlay){
     // do something like: main_slider.startAuto();
  }else{
     // do something like: main_slider.stopAuto();
  }

});

The code above is that flexible that allows you to even start an autoplay on document load assigning a HTML like: 

<span class="control stop"></span> <!-- autoplaying so we need a stop class -->

and all the above will work even for that specific case.

Upvotes: 1

Related Questions