trying to disable click even through CSS pointer-events

Question

I am currently working on a project which has a slideshow and allows the user to slide left or right, depending on what arrow they have clicked.

The slider itself is working fine. What I am now trying to achieve is disabling the respective arrow button which triggers the slide once it has reached its end. At the moment, when I click on the arrow, despite the div reaching its end, it continues sliding, and no content is shown of course because there is nothing there. I am currently using the CSS pointer-event prop in an attempt to disable it.

All help and responses, as always, are greatly appreciated.

if ($(".topsellingrange").css("left", "0%")) {
  $("#left-scroll).css("pointer - events "," none ");
}

if ($(".topsellingrange").css("left", "-300%")) {
  $("#right-scroll).css("pointer - events "," none ");
}

$(".topsellingrange").animate({
    left: "+=100%"
  }, 900, function() { })
})

$("#right-scroll").click(function() {
  $(".topsellingrange").animate({
    left: "-=100%"
  }, 900, function() { })
})

.protein-products {
  width: 100%;
  position: relative;
  justify-content: space-around;
  height: 85vh;
  overflow: hidden;
}

.scroll-div {
  width: 100%;
  text-align: center;
}

.scrolling-icon {
  font-size: 1em;
  color: green;
  display: inline-block;
  margin: 1em 13em;
}

.topsellingrange {
  width: 400%;
  display: flex;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="protein-products">
  <h1>TOP SELLING PROTEIN RANGE</h1>
  <div class="scroll-div">
    <span id="left-scroll" class="scrolling-icon"><i class="fas fa-chevron-left"></i></span>
    <span id="right-scroll" class="scrolling-icon"><i class="fas fa-chevron-right"></i></span>
  </div>
  <div class="topsellingrange">
    <div class="protein-product">
      <img src="images/index/protein1.jpg">
      <img src="images/5star.jpg">
      <span class="heading">100% Whey Protein Professional</span>
      <span class="product-price">&pound26.39</span>
      <button class="more-info">MORE INFO</button>
      <button id="product1" class="shopnow">ADD TO BASKET</button>
    </div>
    <div class="protein-product">
      <img src="images/index/protein2.jpg">
      <img src="images/5star.jpg">
      <span class="heading">MUSCLE MILK (Vanilla) 1120g</span>
      <span class="product-price">&pound31.20</span>
      <button class="more-info">MORE INFO</button>
      <button id="product2" class="shopnow">ADD TO BASKET</button>
    </div>
    <div class="protein-product">
      <img src="images/index/protein3.jpg">
      <img src="images/5star.jpg">
      <span class="heading">Organic Protein Plant-Based Protein Powder</span>
      <span class="product-price">&pound13.78</span>
      <button class="more-info">MORE INFO</button>
      <button id="product3" class="shopnow">ADD TO BASKET</button>
    </div>
    <div class="protein-product">
      <img src="images/index/protein4.jpg">
      <img src="images/5star.jpg">
      <span class="heading">Combat 100% Ultra Premium Whey</span>
      <span class="product-price">&pound12.99</span>
      <button class="more-info">MORE INFO</button>
      <button id="product4" class="shopnow">ADD TO BASKET</button>
    </div>
    <div class="protein-product">
      <img src="images/index/protein5.jpg">
      <img src="images/5star.jpg">
      <span class="heading">Builder's Protein Bars Box Chocolate - 12 Bars</span>
      <span class="product-price">&pound15.39</span>
      <button class="more-info">MORE INFO</button>
      <button id="product5" class="shopnow">ADD TO BASKET</button>
    </div>
    <div class="protein-product">
      <img src="images/index/protein6.jpg">
      <img src="images/5star.jpg">
      <span class="heading">Ultimate Nutrition: CarneBOLIC protein</span>
      <span class="product-price">&pound42.99</span>
      <button class="more-info">MORE INFO</button>
      <button id="product6" class="shopnow">ADD TO BASKET</button>
    </div>
    <div class="protein-product">
      <img src="images/index/protein7.jpg">
      <img src="images/5star.jpg">
      <span class="heading">Pure Protein: 100% Whey (vanilla)</span>
      <span class="product-price">&pound18.99</span>
      <button class="more-info">MORE INFO</button>
      <button id="product7" class="shopnow">ADD TO BASKET</button>
    </div>
    <div class="protein-product">
      <img src="images/index/protein8.jpg">
      <img src="images/5star.jpg">
      <span class="heading">BodyLab: Fat Burning Protein (Vanilla)</span>
      <span class="product-price">&pound16.99</span>
      <button class="more-info">MORE INFO</button>
      <button id="product8" class="shopnow">ADD TO BASKET</button>
    </div>
    <div class="protein-product">
      <img src="images/index/protein9.jpg">
      <img src="images/5star.jpg">
      <span class="heading">Plant Based: Tone It Up Protein</span>
      <span class="product-price">&pound12.99</span>
      <button class="more-info">MORE INFO</button>
      <button id="product9" class="shopnow">ADD TO BASKET</button>
    </div>
    <div class="protein-product">
      <img src="images/index/protein10.jpg">
      <img src="images/5star.jpg">
      <span class="heading">Olly: Nourishing Smoothie Protein</span>
      <span class="product-price">&pound17.99</span>
      <button class="more-info">MORE INFO</button>
      <button id="product10" class="shopnow">ADD TO BASKET</button>
    </div>
    <div class="protein-product">
      <img src="images/index/protein11.jpg">
      <img src="images/5star.jpg">
      <span class="heading">Premier Protein x 4 (Chocolate)</span>
      <span class="product-price">&pound11.99</span>
      <button class="more-info">MORE INFO</button>
      <button id="product11" class="shopnow">ADD TO BASKET</button>
    </div>
    <div class="protein-product">
      <img src="images/index/protein12.jpg">
      <img src="images/5star.jpg">
      <span class="heading">Orgain: Organic Slim Protein</span>
      <span class="product-price">&pound16.49</span>
      <button class="more-info">MORE INFO</button>
      <button id="product12" class="shopnow">ADD TO BASKET</button>
    </div>
    <div class="protein-product">
      <img src="images/index/protein13.jpg">
      <img src="images/5star.jpg">
      <span class="heading">Only Protein: Whey Vanilla</span>
      <span class="product-price">&pound15.99</span>
      <button class="more-info">MORE INFO</button>
      <button id="product13" class="shopnow">ADD TO BASKET</button>
    </div>
    <div class="protein-product">
      <img src="images/index/protein14.jpg">
      <img src="images/5star.jpg">
      <span class="heading">Muscle Milk: Strawberry Whey</span>
      <span class="product-price">&pound21.99</span>
      <button class="more-info">MORE INFO</button>
      <button id="product14" class="shopnow">ADD TO BASKET</button>
    </div>
    <div class="protein-product">
      <img src="images/index/protein15.jpg">
      <img src="images/5star.jpg">
      <span class="heading">Kodiak Cakes: Protein Flapjack On The Go x 12</span>
      <span class="product-price">&pound19.99</span>
      <button class="more-info">MORE INFO</button>
      <button id="product15" class="shopnow">ADD TO BASKET</button>
    </div>
    <div class="protein-product">
      <img src="images/index/protein16.jpg">
      <img src="images/5star.jpg">
      <span class="heading">EAS: 100% Whey Protein 907g Chocolate</span>
      <span class="product-price">&pound12.99</span>
      <button class="more-info">MORE INFO</button>
      <button id="product16" class="shopnow">ADD TO BASKET</button>
    </div>
  </div>
</section>

TYPO: $("#right-scroll).css("pointer-events","none"); should be $("#right-scroll").css("pointer-events","none"); Voting to close. — Scott Marcus
– Scott Marcus, Commented May 3, 2018 at 15:41
For each respective div which slides into the screen, there are four images — jimmy118
– jimmy118, Commented May 3, 2018 at 15:41
Notice how even here, in your posted code, that line is gray, while the line for the left-scroll is colored? — Scott Marcus
– Scott Marcus, Commented May 3, 2018 at 15:43
Thanks for the correction scott. That was a copy and paste error whilst I was editing the code in the input field before posting. I have updated how it appears in my code now — jimmy118
– jimmy118, Commented May 3, 2018 at 15:45

Vandesh · Accepted Answer · 2018-05-03 16:00:05Z

3

You are using the .css() method incorrectly in the if condition. If you need to check if particular CSS style is applied, the you should do it like - $(el).css('css-property') === 'value'

In your code, you can check like -

if ($(".topsellingrange").css("left") === "0%") {
  $("#left-scroll").css("pointer-events","none");
}

if ($(".topsellingrange").css("left") === "-300%") {
  $("#right-scroll").css("pointer-events","none");
}

There's a lot more things you can fix in the code or handle the disabling in other ways, but this should help you understand if your problem is fixed in your code. My suggestion would be to not reinvent the wheel for such things when there are many plugins which would handle that well for you, unless you're trying to learn or build one yourself!

edited May 3, 2018 at 16:00

answered May 3, 2018 at 15:53

Vandesh

6,9642 gold badges31 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jimmy118 Over a year ago

HI Vandesh, Many thanks for your feedback and helpful response. You may be able to tell from my code that I am just starting out and am in the process of trying to land a job. That is why I am attempting all these things. I know I can get plugins but I am enjoying this learning process as it is helping me understand new concepts all the time. Once again many thanks for the response :)

Collectives™ on Stack Overflow

trying to disable click even through CSS pointer-events

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related