Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bar" class="hide">delete selected images?</div>
​
<div class="delete">delete</div>
<img src="https://apollo2.dl.playstation.net/cdn/UP2131/CUSA01736_00/Ll2fJdBTPQylZO0Z4JQ9rtsIJsojwBxn.png" alt="">
​
<div class="delete">delete</div>
<img src="https://apollo2.dl.playstation.net/cdn/UP2131/CUSA01736_00/lYG2Mgzz878Z8rU3yvlx9MwmR5dhDsyy.png" alt="">
​
<div class="delete">delete</div>
<img src="https://apollo2.dl.playstation.net/cdn/UP2131/CUSA01736_00/Zp2VXCJxT764bqDPyyIy0Yf2ZRFHzr3g.png" alt="">
 
#bar {
  height: 100px;
  width: 100%;
  background-color: firebrick;
  color: white;
}
​
.hide {
  margin-top: -100px;
}
​
.show {
  margin-top: 0;
}
​
.delete {
  width: 50px;
  height: 50px;
  background: yellow;
  cursor: pointer;
}
​
.selected {
  border-bottom: 3px solid red;
}
 
var bar = $('#bar');
var deleteBtn = $('.delete');
var selection = 0;
​
​
​
deleteBtn.click(function() {
​
  if ($(this).hasClass("selected")) {
    $(this).removeClass("selected");
  } else {
    $(this).addClass("selected");
  }
​
  var selected = $('.selected');
  var selection = selected.length;
​
  if (bar.hasClass("hide")) {
    bar.addClass("show");
  } else {
    if (selection === 0) {
      bar.removeClass("barShowY");
    }
  }
  
  console.log(selection + " selected images");
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers