Stefan Stefan - 4 years ago 113
jQuery Question

jQuery animate and size settings works only in Chrome

I am trying to get a slider to work on all browsers, but it only works on Chrome.
I wrote it once, then I rewrote it thinking I did some mistake. But it seems that I fail find what causes my code not to work in any browser except Chrome.
Also the responsiveness of how many thumbnails it should show is only working on Chrome.
My best guess is that it's because I am not using selectors right.

I only wrote the code for the right arrow, and stopped at that because I was trying to find out what causes the animation not to work and also the calculations which determine margins and maximum slides.

https://jsfiddle.net/b050k4re/

HTML:

<div id="slider-wrapper">
<h2>Check out our Shows!</h2>
<p>You can check out each of the hosts bios and podcast list by clicking on their image below!</p>
<div class="slider-container">
<img src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-round/700/01_arrow_left-128.png" class="arrow" id="go-left">
<div id="slider">
<ul class="slides">
<li class="slide">
<a href="http://google.com" target="_blank">
<img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
<div class="show-title">Cat</div>
</a>
</li>
<li class="slide">
<a href="http://google.com" target="_blank">
<img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
<div class="show-title">Cat</div>
</a>
</li>
<li class="slide">
<a href="http://google.com" target="_blank">
<img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
<div class="show-title">Cat</div>
</a>
</li>
<li class="slide">
<a href="http://google.com" target="_blank">
<img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
<div class="show-title">Cat</div>
</a>
</li>
<li class="slide">
<a href="http://google.com" target="_blank">
<img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
<div class="show-title">Cat</div>
</a>
</li>
<li class="slide">
<a href="http://google.com" target="_blank">
<img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
<div class="show-title">Cat</div>
</a>
</li>
<li class="slide">
<a href="http://google.com" target="_blank">
<img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
<div class="show-title">Cat</div>
</a>
</li>
<li class="slide">
<a href="http://google.com" target="_blank">
<img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
<div class="show-title">Cat</div>
</a>
</li>

</ul>
</div>
<img src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-round/700/01_arrow_left-128.png" class="arrow" id="go-right">
</div>
</div>


CSS:

body {
margin: 0 0;
}
#slider {
width: 100%;
height: 130px;
overflow: hidden;
margin: 0px 10px;
float: left;
}

#slider .slides {
display: block;
width: 6000px;
height: 130px;
margin: 0;
padding: 0;
left: 0;
position: relative;
}

#slider .slide {
float: left;
list-style-type: none;
width: 121px;
height: 120px;
border: 1px solid #fff;
margin: 5px 10px;
position: relative;
box-shadow: 2px 1px 2px #888888;
}

#go-left {
float: left;
}

#go-right {
float: right;
}

.arrow {
width: 40px;
height: 40px;
margin-top: 50px;
cursor: pointer;
}

.arrow#go-right {
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}

.slider-container {
max-width: 960px;
width: 100%;
margin: 0px auto;
height: 100px;
margin-top: 50px;
}

#slider > ul > li > a > img {
height: 100%;
width: 100%;
}

.show-title {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
background-color: rgba(0, 8, 21, 0.7);
line-height: 121px;
vertical-align: middle;
color: #fff;
font-family: 'Ubuntu', sans-serif;
font-weight: 650;
border-top: 2px #eee solid;
display: none;
height: 100%;
}

.slide a {
width: inherit;
height: inherit;
display: block;
}

#slider-wrapper {
background-color: #eee;
height: 220px;
padding-top: 40px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00112c+0,000000+100 */
background: rgb(0,17,44); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(0,17,44,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,17,44,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, rgba(0,17,44,1) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00112c', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#slider-wrapper h2 {
color: #fff;
font-family: 'Ubuntu', sans-serif;
padding: 0px;
margin-top: -20px;
text-align: center;
text-transform: uppercase;
}

#slider-wrapper p {
color: #fff;
text-align: center;
font-family: 'Ubuntu', sans-serif;
padding: 0;
margin-bottom: -30px;
margin-top: -10px;
}

.slide > a > div > p {
display: none;
}


jQuery:

jQuery(document).ready(function($) {


// The total number of thumbnails
var thumbnailCount = $("#slider .slides .slide").length;

// Thumbnail size
var thumbWidth = 120;
var thumbHeight = 120;

// Minimum margin between thumbnails
var minMargin = 5;

// Variables through which we determine how many thumbnails
// we can show. We decide this by calculating how many
// fit, taking in consideration margins, thumbnail sizes
// and borders.
var arrowWidth = parseInt($("img#go-left").css("width").replace("px", ""), 10);
var thumbMargin = parseInt($(".slides .slide").css("margin-right").replace("px", ""), 10);
var sliderMargin = parseInt($("#slider").css("margin-right").replace("px", ""), 10);
var slideBorder = parseInt($(".slides .slide").css("border-width").replace("px", ""), 10);

// Slider container holds the arrows and the slides together.
// We want the slider container to have a maximum width
// Default is 960px
// Get the size of the slider-container
var sliderContainer = parseInt($(".slider-container").css("width").replace("px", ""), 10);
// The slides container width must be the slider container width
// minus the arrow widths and the margins of the slides container
// itself.
var slidesContainer = sliderContainer - (2 * arrowWidth + 2 * sliderMargin);
$("#slider").css("width", slidesContainer);
// The displayed slides limit is decided by the slides container
// width and the width of the thumbnails
var slideLimit = slidesContainer / thumbWidth;
var maxSlides = Math.floor(slideLimit);
// We know the number of maximum slides for the current screen size
// We have to calculate the margins from the remaining size
// depending on the thumbnail border sizes
var remainingSpace = (slideLimit - maxSlides) * thumbWidth;
var newMarginSizes = (remainingSpace - 2 * maxSlides * slideBorder) / (2 * maxSlides);

// If the new Margin Sizes are smaller than the minimum margin sizes that we want
// We are going to lower the the slide limit by 1 until the new margins are
// bigger or equal to the wanted minimum margin sizes
while (newMarginSizes <= minMargin && maxSlides >= 1) {
maxSlides--;
remainingSpace = (slideLimit - maxSlides) * thumbWidth;
newMarginSizes = (remainingSpace - 2 * maxSlides * slideBorder) / (2 * maxSlides);
}

// We need to know how much we have to slide the
// slides container in order to show it perfectly.
var slideSize = thumbWidth + newMarginSizes * 2 + slideBorder * 2;

// We assign the new margin sizes for the slides
$(".slides .slide").css({"margin-left": newMarginSizes, "margin-right": newMarginSizes});


// Functionality for left and right arrows
var leftArrow = $(".slider-container #go-left");
var rightArrow = $(".slider-container #go-right");
var slides = $("#slider .slides");
// We need to know how many slides are left to show on either
// sides.
var remainingSlidesRight = thumbnailCount - maxSlides;
var remainingSlidesLeft = 0;


leftArrow.click(function() {

});

rightArrow.click(function() {
console.log("remaining left: " + remainingSlidesLeft + "\n" + "remaining right: " + remainingSlidesRight);
if (remainingSlidesRight > 0) {
slides.animate({'left': "-=" + slideSize}, 1000);
remainingSlidesRight--;
remainingSlidesLeft++;
} else {
slides.animate({'left': "0"}, 1000);
remainingSlidesRight = thumbnailCount - maxSlides;
remainingSlidesLeft = 0;
}
});

});

Answer Source

Referring to Retrieval of shorthand CSS properties you need to change

border-width to border-top-width

in `var slideBorder = parseInt($(".slides .slide").css("border-top-width").replace("px", ""), 10);

For more details on border see MDN

So the snippet is:

jQuery(document).ready(function($) {


  // The total number of thumbnails
  var thumbnailCount = $("#slider .slides .slide").length;

  // Thumbnail size
  var thumbWidth = 120;
  var thumbHeight = 120;

  // Minimum margin between thumbnails
  var minMargin = 5;

  // Variables through which we determine how many thumbnails
  // we can show. We decide this by calculating how many
  // fit, taking in consideration margins, thumbnail sizes
  // and borders.
  var arrowWidth = parseInt($("img#go-left").css("width").replace("px", ""), 10);
  var thumbMargin = parseInt($(".slides .slide").css("margin-right").replace("px", ""), 10);
  var sliderMargin = parseInt($("#slider").css("margin-right").replace("px", ""), 10);

  // FIX: border-width to border-top-width
  var slideBorder = parseInt($(".slides .slide").css("border-top-width").replace("px", ""), 10);


  // Slider container holds the arrows and the slides together.
  // We want the slider container to have a maximum width
  // Default is 960px
  // Get the size of the slider-container
  var sliderContainer = parseInt($(".slider-container").css("width").replace("px", ""), 10);
  // The slides container width must be the slider container width
  // minus the arrow widths and the margins of the slides container
  // itself.
  var slidesContainer = sliderContainer -  (2 * arrowWidth + 2 * sliderMargin);
  $("#slider").css("width", slidesContainer);
  // The displayed slides limit is decided by the slides container
  // width and the width of the thumbnails
  var slideLimit = slidesContainer / thumbWidth;
  var maxSlides = Math.floor(slideLimit);
  // We know the number of maximum slides for the current screen size
  // We have to calculate the margins from the remaining size
  // depending on the thumbnail border sizes
  var remainingSpace = (slideLimit - maxSlides) * thumbWidth;
  var newMarginSizes = (remainingSpace - 2 * maxSlides * slideBorder) / (2 * maxSlides);

  // If the new Margin Sizes are smaller than the minimum margin sizes that we want
  // We are going to lower the the slide limit by 1 until the new margins are
  // bigger or equal to the wanted minimum margin sizes
  while (newMarginSizes <= minMargin && maxSlides >= 1) {
    maxSlides--;
    remainingSpace = (slideLimit - maxSlides) * thumbWidth;
    newMarginSizes = (remainingSpace - 2 * maxSlides * slideBorder) / (2 * maxSlides);
  }

  // We need to know how much we have to slide the
  // slides container in order to show it perfectly.
  var slideSize = thumbWidth + newMarginSizes * 2 + slideBorder * 2;

  // We assign the new margin sizes for the slides
  $(".slides .slide").css({"margin-left": newMarginSizes, "margin-right": newMarginSizes});


  // Functionality for left and right arrows
  var leftArrow = $(".slider-container #go-left");
  var rightArrow = $(".slider-container #go-right");
  var slides = $("#slider .slides");
  // We need to know how many slides are left to show on either
  // sides.
  var remainingSlidesRight = thumbnailCount - maxSlides;
  var remainingSlidesLeft = 0;


  leftArrow.click(function() {

  });

  rightArrow.click(function() {
    console.log("remaining left: " + remainingSlidesLeft + "\n" + "remaining right: " + remainingSlidesRight);
    if (remainingSlidesRight > 0) {
      slides.animate({'left': "-=" + slideSize}, 1000);
      remainingSlidesRight--;
      remainingSlidesLeft++;
    } else {
      slides.animate({'left': "0"}, 1000);
      remainingSlidesRight = thumbnailCount - maxSlides;
      remainingSlidesLeft = 0;
    }
  });

});
body {
  margin: 0 0;
}
#slider {
  width: 100%;
  height: 130px;
  overflow: hidden;
  margin: 0px 10px;
  float: left;
}

#slider .slides {
  display: block;
  width: 6000px;
  height: 130px;
  border: 1px solid #fff;
  margin: 0;
  padding: 0;
  left: 0;
  position: relative;
}

#slider .slide {
  float: left;
  list-style-type: none;
  width: 121px;
  height: 120px;
  border: 1px solid #fff;
  margin: 5px 10px;
  position: relative;
  box-shadow: 2px 1px 2px #888888;
}

#go-left {
  float: left;
}

#go-right {
  float: right;
}

.arrow {
  width: 40px;
  height: 40px;
  margin-top: 50px;
  cursor: pointer;
}

.arrow#go-right {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

.slider-container {
  max-width: 960px;
  width: 100%;
  margin: 0px auto;
  height: 100px;
  margin-top: 50px;
}

#slider > ul > li > a > img {
  height: 100%;
  width: 100%;
}

.show-title {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  background-color: rgba(0, 8, 21, 0.7);
  line-height: 121px;
  vertical-align: middle;
  color: #fff;
  font-family: 'Ubuntu', sans-serif;
  font-weight: 650;
  border-top: 2px #eee solid;
  display: none;
  height: 100%;
}

.slide a {
  width: inherit;
  height: inherit;
  display: block;
}

#slider-wrapper {
  background-color: #eee;
  height: 220px;
  padding-top: 40px;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00112c+0,000000+100 */
  background: rgb(0,17,44); /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover,  rgba(0,17,44,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,17,44,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(ellipse at center,  rgba(0,17,44,1) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00112c', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}

#slider-wrapper h2 {
  color: #fff;
  font-family: 'Ubuntu', sans-serif;
  padding: 0px;
  margin-top: -20px;
  text-align: center;
  text-transform: uppercase;
}

#slider-wrapper p {
  color: #fff;
  text-align: center;
  font-family: 'Ubuntu', sans-serif;
  padding: 0;
  margin-bottom: -30px;
  margin-top: -10px;
}

.slide > a > div > p {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>


<div id="slider-wrapper">
    <h2>Check out our Shows!</h2>
    <p>You can check out each of the hosts bios and podcast list by clicking on their image below!</p>
    <div class="slider-container">
        <img src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-round/700/01_arrow_left-128.png" class="arrow" id="go-left">
        <div id="slider">
            <ul class="slides">
                <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>
                <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>
                <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>
                <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>
                <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>
                <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>
                <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>
                <li class="slide">
                    <a href="http://google.com" target="_blank">
                        <img src="http://www.online-image-editor.com//styles/2014/images/example_image.png">
                        <div class="show-title">Cat</div>
                    </a>
                </li>

            </ul>
        </div>
        <img src="https://cdn0.iconfinder.com/data/icons/basic-ui-elements-round/700/01_arrow_left-128.png" class="arrow" id="go-right">
    </div>
</div>

`

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download