lgoncalv lgoncalv - 1 month ago 12
HTML Question

Each time window resizes, the append method keeps adding to container

I'm trying to switch out my images in Bootstrap's carousel at the 768px breakpoint only for responsive purposes. So I decided to use the resize() method and append the smaller images to the .carousel-inner div when they reach equal to or less than to 768px or maintain large images if window is larger than 768. However, when ever I resize the window it keeps appending those images over and over again until I stop resizing. Only returns to normal when I refresh. Which this all makes sense that it the code executes every time the window gets resized. So I was wondering if there is a method out there that I should be trying instead? I kind want it to act like a media query... I have pasted my code below and you can check it out on my GitHub: https://ldgoncalves.github.io/ChamberStat/html/index.html

I'm using Laravel 5.3 for this as well.



$(window).on("resize load", function () {
if ($(window).width() <= 768) {

var smallerImg = '<div class="item active"><img src="{{asset('images/slide4.png')}}" alt="First slide of a customer review"></div>' +
'<div class="item"><img src="{{asset('images/slide5.png')}}" alt="Second slide of a customer review"></div>' +
'<div class="item"><img src="{{asset('images/slide6.png')}}" alt="Third slide of a customer review"></div>'+
'<div class="item"><img src="{{asset('images/slide7.png')}}" alt="Fourth slide of a customer review"></div>'+
'<div class="item"><img src="{{asset('images/slide8.png')}}" alt="Fifth slide of a customer review"></div>'+
'<div class="item"><img src="{{asset('images/slide9.png')}}" alt="Sixth slide of a customer review"></div>';
$('.carousel-inner').append(smallerImg);
}
else{
var largerImg = '<div class="item active"><img src="{{asset('images/slide1.png')}}" alt="First slide of customer reviews"></div>' +
'<div class="item"><img src="{{asset('images/slide2.png')}}" alt="Second slide of customer reviews"></div>' +
'<div class="item"><img src="{{asset('images/slide3.png')}}" alt="Third slide of customer reviews"></div>';
$('.carousel-inner').append(largerImg);
}
});

<!-- Testimonials -->
<section id="testimonials" class="row">
<h1 class="col-xs-12 col-md-12">Testimonials</h1>
<p class="col-xs-12 col-md-12">ChamberStat will get you organized, but don't take our word for it! See what
our customers are saying.</p>
<!-- bootstrap carousel -->
<div class="clearfix hidden-sm-up"></div>

<div id="testimonials-slide" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators col-lg-1">
<li data-target="#testimonials-slide" data-slide-to="0" class="active"></li>
<li data-target="#testimonials-slide" data-slide-to="1"></li>
<li data-target="#testimonials-slide" data-slide-to="2"></li>
<li data-target="#testimonials-slide" data-slide-to="3"></li>
<li data-target="#testimonials-slide" data-slide-to="4"></li>
<li data-target="#testimonials-slide" data-slide-to="5"></li>
</ol>
<div class="carousel-inner" role="listbox">

</div>
<a class="left carousel-control" href="#testimonials-slide" role="button" data-slide="prev">
<span class="icon-prev" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#testimonials-slide" role="button" data-slide="next">
<span class="icon-next" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</section>




Answer

You only want the content change to happen when the mode changes. And you probably want to empty() the list when changing content. Something like this:

$(window).on("resize load", function () {
  var largerImg = '...';
  var smallerImg = '...';
  var $carousel = $('.carousel-inner');
  var lastMode = $carousel.hasClass('small') ? 'small' : 'large';
  var newMode = $(window).width()  <= 768 ? 'small' : 'large';

  if (lastMode === newMode)
     return;

  if (newMode === 'small') {
      $carousel.addClass('small').empty().append(smallerImg);
  } else{
      $carousel.removeClass('small').empty().append(largerImg);
  }
});
Comments