CODEWITHSUNDEEP
javascriptjquerycss
dineshkashera
dineshkashera

Reputation: 1502

Transform() div not working correctly on click

I have created the page in wordpress, it loads each section one at a time on mousewheel event, on mousewheel event the transform property working fine.

But when i bind the click event for transform then at every click it tranform the div at the bottom of screen and then it goes to the section.

Please see this link : Click Here

When you will click on the Testimonials from top right menu bar then it goes at the bottom of screen and then move up-word on the testimonial section.

I am using the below code on click :

jQuery( window ).on( "load", function($) {

        //go to specific slider on menu click
        var item = document.getElementsByClassName("scroll-custom-js");
          jQuery.each( item, function( i, val ) {

             this.addEventListener("click",function(e){

                 var link = jQuery(this).attr('href');
                 jQuery('.scroll-custom-js').removeClass('arrow-custom');
                 jQuery(this).addClass('arrow-custom');
                 gotoSlide(link);

               });
          });
 });

 var gotoSlide = function () {

     document.querySelector(sliderElement).style.transform = 'translate3d(0, ' + -(currentSlide - 1) * 100 + '%,0)';

     document.querySelector(sliderElement).style.transition = 'transform 1000ms ease 0s';

  });

In jQuery :

jQuery('a.scroll-custom-js').click(function(e){
                var link = jQuery(this).attr('href');
                jQuery('.scroll-custom-js').removeClass('arrow-custom');
                 jQuery(this).addClass('arrow-custom');
                 e.preventDefault();
                 var move_slides = jQuery(link).attr('data-slider-index');
                 move_slides = move_slides - 1;


                 jQuery('.slides_custom').css({
                     transform: 'translate3d(0, ' + -(move_slides) * 100 + '%,0)',
                });
          });

Upvotes: 0

Views: 131

Answers (1)

madalinivascu
madalinivascu

Reputation: 32354

Use unbind() to remove any click event that is bind to that div

jQuery('a.scroll-custom-js').unbind('click').click(function(e){

Upvotes: 2

Related Questions