jQuery addClass example

Change class name on click in jQuery

by GrumJim

HTML

<div class="tile_browser">
  <div class="tile_nav">
    <div class="buttons_container">
    </div>
  </div>
  <div class="tiles_container">
    <div class="tile grow">1</div>
    <div class="tile grow">2</div>
    <div class="tile grow">3</div>
    <div class="tile grow">4</div>
    <div class="tile grow">5</div>
  </div>
</div>

CSS

.tile_browser {
  width: 100%;
  margin: 0 auto;
  min-width: 250px;
  height: 500px;
}

.tiles_container {
  height: 500px;
  /*width: 90%;*/
  background-color: #36383F;
  /*padding: 5px;*/
  overflow-y: scroll;
  /*float: left;*/
  min-width: 220px;
}

.tiles_container::-webkit-scrollbar { 
    display: none; 
}

.tile {
  width: 200px;
  height: 200px;
  float: left;
  display: block;
  background-color: #27277C;
  margin: 10px;
  color: white;
  font-size: 72pt;
  text-align: center;
}

.tile:hover {
  background-color: #27527C;
}

.grow { transition: all .2s ease-in-out; }

.grow:hover { transform: scale(1.1); }

.tile_nav {
  position: relative;
  float: right;
  width: 25px;
  min-width: 25px;
  height: 500px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.buttons_container {

}

input[type=radio] {
  visibility: hidden;
  position: relative;
  margin-left: 5px;
  width: 20px;
  height: 20px;
}

input[type=radio]:before {
  content: no-open-quote no-close-quote;
  visibility: visible;
  position: absolute;

  border: 2px solid #36383F;
  border-radius: 50%;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

input[type=radio]:checked:before {
  background-color: #36383F;
}

JavaScript

$(document).ready(function() {

	drawButtons();
	$('#nav_id_0').prop("checked", true);

	// resize handler

	var resizeTimer;

	$(window).on('resize', function(e) {
		clearTimeout(resizeTimer);
		resizeTimer = setTimeout(function() {

			$("div.tiles_container > div.first").removeClass("first");
			$(".buttons_container").empty();

			drawButtons();

      var foundResizeResult = false;
			$.each( $(".tiles_container .tile[id]"),function(i,e){
				if (checkInView($(e),false)) {
         	updateNavButton(false,e);
         	foundResizeResult = true;
          return false;
        }
      });
      if (!foundResizeResult) {
      	$.each( $(".tiles_container .tile[id]"),function(i,e){
        	if (checkInView($(e),true)) {
         		updateNavButton(true,e);
         		foundResizeResult = true;
            return false;
        	}
      	});
			}
		}, 250);
	});
  
	// scroll handler

	var scrollTimer;

	$(".tiles_container").on('scroll', function() {
		clearTimeout(scrollTimer);
		scrollTimer = setTimeout(function() {

      var foundScrollResult = false;

      if (!foundScrollResult) {
				$.each( $(".tiles_container .tile[id]"),function(i,e) {
					if (checkInView($(e),false)) {
         		updateNavButton(false,e);
         		foundScrollResult = true;
            return false;
          }
        });
      	if (!foundScrollResult) {
        	$.each( $(".tiles_container .tile[id]"),function(i,e) {
        		if (checkInView($(e),true)) {
              updateNavButton(true,e);
         			foundScrollResult = true;
              return false;
            }
          });
        }
      }
    }, 250);
  });

	// click handler

	$('.buttons_container').on('click', '.nav_button', function(e) {
		var targetId = "#" + e.currentTarget.id.replace("nav_","tile_");
    
		$('.tiles_container').animate({
			scrollTop: $('.tiles_container').scrollTop() + ($(targetId).offset().top - $('.tiles_container').offset().top)
		}, 250);
	});
});

function drawButtons() {
	var tiles =...