Mad_Griffith Posted November 19, 2016 Share Posted November 19, 2016 (edited) Hi, below, I am creating a slider. I am passing the sliding method to the click handler, but such method doesn't fire when I call it. Do you have any idea why? Thank you this.sliding = function(e) { that.slide_width = $(that.article).width(); that.slide_number = $(that.article).size(); that.max_pos = that.slide_width * (that.slide_number - 1); that.left_pos = $(that.inner).position().left; if ($(this).hasClass('article-previous') && that.left_pos < 0) { $(that.inner).css({ 'left': '+=' + that.slide_width + 'px' }); } if ($(this).hasClass('article-next') && -that.left_pos < that.max_pos) { $(that.inner).css({ 'left': '-=' + that.slide_width + 'px' }); that.animateSkills(); } }; element.find('.article-previous, .article-next').off('click').on('click', { slidingAction : this.sliding}, function(e){ e.stopImmediatePropagation; e.data.slidingAction; // doesn't fire! }); Edited November 19, 2016 by Mad_Griffith Link to comment Share on other sites More sharing options...
Ingolme Posted November 19, 2016 Share Posted November 19, 2016 To call a function you need parentheses. In these two lines, speifically: e.stopImmediatePropagation; e.data.slidingAction; // doesn't fire! Change it to be like this: e.stopImmediatePropagation(); e.data.slidingAction(); However, are you sure that e.data is an object with a slidingAction() method? Link to comment Share on other sites More sharing options...
Mad_Griffith Posted November 19, 2016 Author Share Posted November 19, 2016 (edited) Thank you! I edited the code but it doesn't work. I consolelogged the event and this is what I get: I have also tried doing the following, unsuccessfully: var that = this; this.sliding = function(e) { // blah blah } element.find('.article-previous, .article-next').off('click').on('click', function(e){ e.stopImmediatePropagation(); that.sliding(); }); Edited November 19, 2016 by Mad_Griffith Link to comment Share on other sites More sharing options...
Ingolme Posted November 19, 2016 Share Posted November 19, 2016 I would add a breakpoint inside the slidingAction function to see if it's running, and if it is, then which line of code inside the function is failing. Link to comment Share on other sites More sharing options...
dsonesuk Posted November 19, 2016 Share Posted November 19, 2016 What does element refer to? Link to comment Share on other sites More sharing options...
Mad_Griffith Posted November 19, 2016 Author Share Posted November 19, 2016 (edited) Thanks for your help. In the end I fixed it by passing the event from the click handler to the object method, but I didn't solve the original problem. Basically, when I click on the left or right arrow in the slideshow, there is an animation lasting a few milliseconds. During such animation, if the user clicks a second time on the same button, this ends up destroying the slideshow pretty badly (as in: the last slide, be it on the left or on the right, ends up outside the viewport). How could I make only the first click matter or at least wait until the sliding animation is done? Edited November 19, 2016 by Mad_Griffith Link to comment Share on other sites More sharing options...
Ingolme Posted November 19, 2016 Share Posted November 19, 2016 When the animation starts, set an "animating" flag to true. When the animation ends, set the flag to false. Before starting an animation, make sure that "animating" is false. If it's true then do nothing. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now