Ithuvanian Ithuvanian - 2 months ago 10
CSS Question

Making buttons disappear and reappear on add / remove class

This is for an image slideshow with 'next' and 'previous' buttons, the issue is I want the 'previous' button to be hidden when the first image is showing, and the 'next' button to be hidden when the last one shows. I am using a class 'active' to determine which image is displayed, all other images are hidden by default:

<button id="prev">previous</button>
<img src="img/1.jpeg" class="one active">
<img src="img/2.jpg" class="two">
<img src="img/3.jpeg" class="three">
<button id="next">next</button>


Here is the script I currently have, the if statement being the problem:

$(document).ready(function() {

if($('.one').hasClass('active')) {
$('#prev').css('visibility', 'hidden');
}

function nextImg() {
var active = $('img.active');
var next = active.next();
active.removeClass('active');
next.addClass('active');
}

function prevImg() {
var active = $('img.active');
var prev = active.prev();
active.removeClass('active');
prev.addClass('active');
}

$('#next').click(nextImg);
$('#prev').click(prevImg);

});


This hides the 'previous' button upon loading, but the button remains hidden even when the 'active' class moves to the next image. I've tried 'toggle' and adding an 'else' statement and setting the button's visibility to 'visible' again, but once it disappears I can't make it come back.

I was hoping to find a simple fix for my existing code, but I'm also open to a different method that would work better for this.

Answer

For a slideshow, I suggest you use display instead of visibility for your images...

The difference is that the space of an "invisible" element is reserved.
With display:none;, this space is freed.

And since you use classes, I suggest you use CSS to set these attributes.

In the snippet below, I also took care of the dissapearance of the "next" button when the last image is displayed.

$(document).ready(function() {

  function showButtons(){
    if ( $("img").first().hasClass("active") ){
      $("#prev").addClass("hidden");
    }
    else if ( $("img").last().hasClass("active") ){
      $("#next").addClass("hidden");
    }
    else{
      $("button").removeClass("hidden");
    }
  }

  function nextImg() {
    var active = $('img.active');
    var next = active.next();
    active.removeClass('active');
    next.addClass('active');
    showButtons();
  }

  function prevImg() {
    var active = $('img.active');
    var prev = active.prev();
    active.removeClass('active');
    prev.addClass('active');
    showButtons();
  }

  showButtons();
  $('#next').click(nextImg);
  $('#prev').click(prevImg);

});
img{
  width:60px;
  display:none;
}
.active{
  display:inline-block;
}
.hidden{
  visibility:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="prev">previous</button>
<img src="http://www.freeiconspng.com/uploads/numbers-1-icon-22.png" class="one active">
<img src="http://icons.veryicon.com/ico/System/Icons8%20Metro%20Style/Numbers%202%20filled.ico" class="two">
<img src="http://www.ifixer.gr/wp-content/uploads/2014/02/Numbers-3-filled-icon-300x300.png" class="three">
<button id="next">next</button>

Comments