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() {
	
  var isScrolling = false;  

	var tiles = $(".tiles_container").children();
	var count = tiles.length;
	var height = $(".tiles_container")[0].scrollHeight;
	var rows = Math.floor(height/440);
	var maxTilesDisplayed = Math.floor($(".tiles_container").width()/220);
  maxTilesDisplayed+=maxTilesDisplayed;
  console.log(rows + " " + tilesPerRow);

	if (height == $(".tiles_container").height()) {
		$(".buttons_container").hide();
	} else {
		for (var i = 0; i < tiles; i+=tilesPerRow) {
			$(tiles[i]).prop("id","tile_id_" + i);
			$(".buttons_container").append("<input class='nav_button' id='nav_id_" + i + "' type='radio' name='tile_nav'>");
		}
		$('#nav_id_0').prop("checked", true);  
	}

	// resize handler

	var resizeTimer;

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

			height = $(".tiles_container")[0].scrollHeight;
			rows = Math.floor(height/220);
			tilesPerRow = Math.floor($(".tiles_container").width()/220);

			if (rows == 1) {
				$(".buttons_container").hide();
			} else { 
				$(".buttons_container").show();
			}

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

			for (var i = 0; i < count; i+=tilesPerRow) {
				$(tiles[i]).prop("id","tile_id_" + i);
				$(".buttons_container").append("<input class='nav_button' id='nav_id_" + i + "' type='radio' name='tile_nav'>");
			}
      
      var buttonToUpdate = "";
      var foundResizeResult = false;
			$.each( $(".tiles_container .tile"),function(i,e){
				if (checkInView($(e),false)) {
         	updateNavButton(false,e);
         	foundResizeResult = true;
          return false;
        }
      });
      if (!foundResizeResult) {
      	$.each( $(".tiles_container .tile"),function(i,e){
        	if (checkInView($(e),true)) {
         		updateNavButton(true,e);
         		foundResizeResult = true;
            return false;
        	}
      	});
			}
		},...