CODEWITHSUNDEEP
javascriptjqueryhtmlcss
clestcruz
clestcruz

Reputation: 1111

Cannot read property CSS undefined

I'm trying to figure out why the code I'm currently working on produces an error

Cannot read property css underfined.

Currently using jQuery 3.3.1. Not sure if the .css is deprecated. Can't seem to find a workaround it 

(function($) {
  'use strict';

  var Slider = {
    init: function() {
      this.$sliderBanner = $('.slider-banner');
      this.$sliderItemsWrapper = $('.slider-items', this.$sliderBanner);
      this.$slides = $('.slides', this.$sliderItemsWrapper);
      this.$sliderButtons = $('.arrow', this.$sliderBanner);
      this.slideCount = $('.slides', this.$sliderItemsWrapper).length;

      this.sliderBannerWidth = $(this.$sliderBanner).width();
      this.$setSliderWrapperWidth = $(this.$sliderItemsWrapper).width(this.sliderBannerWidth * this.slideCount);

      this.$slides.width(this.sliderBannerWidth);
      this.bindButtons();

      // $('.-next').on('click', function() {
      //     console.log('test');
      // })
    },

    bindButtons: function() {
      var position = 0;

      $('.arrow.-next').on('click', function() {
        // console.log('slide next');
        var that = this;

        position++;
        if (position == -1) {
          position = that.slideCount - 1;
        }
        console.log('test');
        that.$sliderItemsWrapper.css('left', -(that.sliderBannerWidth * position));
      });
    }
  };

  $(document).ready(function() {
    Slider.init();
  });
})(jQuery);
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<div class="slider-banner">
  <a href="#" class="arrow -prev">prev</a>
  <a href="#" class="arrow -next">next</a>
  <div class="slider-items">
    <div class="slides">
      <div class="image" style="background-image:url(images/danny-howe-422500-unsplash.jpg)">
      </div>
    </div>
    <div class="slides">
      <div class="image" style="background-image:url(images/danny-howe-422500-unsplash.jpg)">
      </div>
    </div>
    <div class="slides">
      <div class="image" style="background-image:url(images/danny-howe-422500-unsplash.jpg)">
      </div>
    </div>
  </div>
  <div class="banner-detail">
    <h2 class="preamble-heading" data-preamble="Test Preamble">Sample Page</h2>
  </div>
</div>

Upvotes: 0

Views: 2844

Answers (1)

Nandita Sharma
Nandita Sharma

Reputation: 13407

Move var that = this; outside of the click function.

(function($) {
  'use strict';

  var Slider = {

    init: function() {

      this.$sliderBanner = $('.slider-banner');
      this.$sliderItemsWrapper = $('.slider-items', this.$sliderBanner);
      this.$slides = $('.slides', this.$sliderItemsWrapper);
      this.$sliderButtons = $('.arrow', this.$sliderBanner);
      this.slideCount = $('.slides', this.$sliderItemsWrapper).length;

      this.sliderBannerWidth = $(this.$sliderBanner).width();
      this.$setSliderWrapperWidth = $(this.$sliderItemsWrapper).width(this.sliderBannerWidth * this.slideCount);

      this.$slides.width(this.sliderBannerWidth);
      this.bindButtons();

      // $('.-next').on('click', function() {
      //     console.log('test');
      // })

    },

    bindButtons: function() {
      var position = 0;
      var that = this;
      $('.arrow.-next').on('click', function() {
        // console.log('slide next');


        position++;
        if (position == -1) {
          position = that.slideCount - 1;
        }
        console.log('test');
        that.$sliderItemsWrapper.css('left', -(that.sliderBannerWidth * position));

      });

    }

  };

  $(document).ready(function() {

    Slider.init();
  });

})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider-banner">
  <a href="#" class="arrow -prev">prev</a>
  <a href="#" class="arrow -next">next</a>
  <div class="slider-items">

    <div class="slides">
      <div class="image" style="background-image:url(images/danny-howe-422500-unsplash.jpg)">

      </div>
    </div>

    <div class="slides">
      <div class="image" style="background-image:url(images/danny-howe-422500-unsplash.jpg)">

      </div>
    </div>

    <div class="slides">
      <div class="image" style="background-image:url(images/danny-howe-422500-unsplash.jpg)">

      </div>
    </div>
  </div>

  <div class="banner-detail">
    <h2 class="preamble-heading" data-preamble="Test Preamble">Sample Page</h2>
  </div>
</div>

Upvotes: 4

Related Questions