CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dee
Dee

Reputation: 331

stop jQuery button event on last slide

https://jsfiddle.net/z3q2wtLf/29/embedded/result/

In the attached jsfiddle link above .cd-hero has 3 slides that are activated by click. I'm trying to add a stop event to the jQuery only on the third slide ("thank you") so that the user stops on that slide (doesn't slide right or go back to the previous slides). I am new to jQuery any help on how to achieve this is much appreciated!

I have tried applying the below without success:

$('.cd-btn').on('click', function(event) {
      event.preventDefault();
      if($(this).hasClass('.thanks')){
       event.stopPropagation();
      } else {
        var activePosition = $('.cd-hero-slider .selected').index();
        var selectedPosition =  activePosition + 1;
        nextSlide($('.cd-hero-slider'), $(''), selectedPosition);

        updateNavigationMarker(selectedPosition + 1);
      }
  });

Upvotes: 0

Views: 124

Answers (5)

diegochavez
diegochavez

Reputation: 662

Dee i just updated your jsFiddle, adding a simple condition solution, if count of items "n" is equal to the length don't fire the events.

function nextSlide(container, pagination, n) {

if(n != container.children('li').length){

var visibleSlide = container.find('.selected'),
  navigationDot = pagination.find('.selected');

visibleSlide.removeClass('selected from-left from-right').addClass('is-moving').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function() {
  visibleSlide.removeClass('is-moving');
});

container.children('li').eq(n).addClass('selected from-right').prevAll().addClass('move-left');
navigationDot.removeClass('selected')
pagination.find('li').eq(n).addClass('selected');

checkVideo(visibleSlide, container, n);

}else{ //Thank You events }

}

https://jsfiddle.net/z3q2wtLf/35/

Upvotes: 0

Suganth G
Suganth G

Reputation: 5156

Try this:

HTML

<a href="" class="cd-btn" id="BtnThankyou">Thank you</a>

JS

$('.cd-btn').on('click', function(event) {
           if($(this)[0].id == "BtnThankyou"){

           return false;
           }

            event.preventDefault();
            var activePosition = $('.cd-hero-slider .selected').index();
            var selectedPosition =  activePosition + 1;
            nextSlide($('.cd-hero-slider'), $(''), selectedPosition);

          updateNavigationMarker(selectedPosition + 1);
           });

DEMO

Upvotes: 1

Alex
Alex

Reputation: 8695

You can add one more class to the last .cd-btn(thank you button, for example, .btn-thank-you) and then use $('.cd-btn:not(.btn-thank-you)') to exclude it from click event.

Jsfiddle

Upvotes: 0

Abhilash Augustine
Abhilash Augustine

Reputation: 4208

Unbind the click event from the button.

$('.cd-btn').on('click', function(event) {
      event.preventDefault();
      if($(this).hasClass('.thanks')){
       $('body').unbind('click','.cd-btn'); // Unbind the click event
      } else {
        var activePosition = $('.cd-hero-slider .selected').index();
        var selectedPosition =  activePosition + 1;
        nextSlide($('.cd-hero-slider'), $(''), selectedPosition);

        updateNavigationMarker(selectedPosition + 1);
      }
  });

Upvotes: 0

PaulB
PaulB

Reputation: 131

Add a button that removes the other buttons by setting their "display" property to "none" or use $(this).hide()

Upvotes: 0

Related Questions