$('#btn-center').click(function(event) { var outerContent = $('.cat-container'); var innerContent = $('.cat-container > ul'); outerContent.animate({scrollLeft:(innerContent.width() - outerContent.width())/2}, 500) }); $('#btn-center-element').click(function(event) { var middleElement = Math.round($('.cat-container ul li').length / 2); var outerContent = $('.cat-container'); var innerContent = $('.cat-container > ul'); var targetElement = innerContent.children('li').eq(middleElement -1); targetElement.css('border', 'solid 2px red'); outerContent.animate({scrollLeft: (getTotalWidth(middleElement -1) - 20) }, 500); }); $('#btn-element').click(function(event) { var input = $(this).prev('input').val(); var catCount = $('.cat-container ul li').length; var innerContent = $('.cat-container > ul'); var outerContent = $('.cat-container'); if(input && input > 0 && input <= catCount) { var targetElement = innerContent.children('li').eq(input -1); targetElement.css('border', 'solid 2px red'); outerContent.animate({scrollLeft: (getTotalWidth(input -1) - 20)}, 500); } else { alert('Please enter a valid number in') } }); $('#btn-reset').click(function(event) { var outerContent = $('.cat-container'); var liElements = $('.cat-container > ul li'); $.each(liElements, function() { $(this).css('border', 'solid 2px orange'); }); outerContent.animate({scrollLeft: 0}, 500); }); function getTotalWidth(number) { var liElements = $('.cat-container > ul li').slice(0,number); var total = 0; $.each(liElements, function() { total += $(this).width(); }); return total; }
<div class="main"> <h1>Cool Cats</h1> <div class="cat-container"> <ul> <li> <a href="http://thecatapi.com"><img src="http://thecatapi.com/api/images/get?format=src&type=gif"></a> <div class="cat-title"> <h3>Cat 1</h3> <p>description</p> </div> </li> <li> <a href="http://thecatapi.com"><img src="http://thecatapi.com/api/images/get?format=src&type=gif"></a> <div class="cat-title"> <h3>Cat 2</h3> <p>description</p> </div> </li> <li> <a href="http://thecatapi.com"><img src="http://thecatapi.com/api/images/get?format=src&type=gif"></a> <div class="cat-title"> <h3>Cat 3</h3> <p>description</p> </div> </li> <li> <a href="http://thecatapi.com"><img src="http://thecatapi.com/api/images/get?format=src&type=gif"></a> <div class="cat-title"> <h3>Cat 4</h3> <p>description</p> </div> </li> <li> <a href="http://thecatapi.com"><img src="http://thecatapi.com/api/images/get?format=src&type=gif"></a> <div class="cat-title"> <h3>Cat 5</h3> <p>description</p> </div> </li> <li> <a href="http://thecatapi.com"><img src="http://thecatapi.com/api/images/get?format=src&type=gif"></a> <div class="cat-title"> <h3>Cat 6</h3> <p>description</p> </div> </li> <li> <a href="http://thecatapi.com"><img src="http://thecatapi.com/api/images/get?format=src&type=gif"></a> <div class="cat-title"> <h3>Cat 7</h3> <p>description</p> </div> </li> </ul> </div> <div class="button-container"> <button id="btn-reset"><span>Reset</span></button> <button id="btn-center"><span>Center-Size</span></button> <button id="btn-center-element"><span>Center-Element</span></button> <div class="input-button-container"> <label for="element-num">Pick a Cat item number to center on:</label> <input type='text' name="element-num" id="" /> <button id="btn-element"><span>Selected-Element</span></button> </div> </div> </div>
div.main { display: flex; flex-direction: column; align-items: center; width: 100%; } h1 { display: block; color: white; background-color: orange; width: 100%; text-align: center; } div.cat-container { overflow-x: scroll; overflow-y: hidden; height: 250px; width: 400px; } div.cat-container ul { width: 1000px; padding: 0; } div.cat-container ul li { float: left; margin-right: 20px; list-style: none; border: solid 2px orange; padding: 5px; } div.cat-container ul li a { display: inline; } div.cat-container ul li a img { height: 100px; width: 100px; } div.cat-title { margin-top: -15px; text-align: center; } div.cat-title h3 { background-color: orange; color: white; width: 110%; text-align: center; position: relative; left: -5px; } .button-container button { font-weight: bold; color: white; background-color: orange; display: block; margin-top: 20px; outline: none; cursor: pointer; text-align: center; text-decoration: none; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .2); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); } .button-container button:hover { backgound-color: red; } .input-button-container { margin: 20px 0; } .input-button-container label{ display:block; } .input-button-container button{ display:inline; margin-top: 15px; } .input-button-container input{ height: 30px; width: 35px; display:inline; text-align:center; }