Jquery Horizontal Scroll on Click

Question

I am trying to get this horizontal section of the page to auto scroll when the left or right arrows are clicked. I can get the Jquery code to run correctly in the console. However, the auto scroll events won't run at all on my page. Could anyone provide any insight into this issue?

The code is as follows :

HTML

<div class = "horizon horizon-prev">
      <img src = "../images/left-arrow.png" />
    </div>
    <div class = "horizon horizon-next">
      <img src = "../images/right-arrow.png" />
    </div>

  <div class="center" id="content">
      <div class=internal>
        div 1
      </div>
       <div class=internal>
        div 2
      </div>
       <div class=internal>
        div 3
      </div>
       <div class=internal>
        div 4
      </div>
       <div class=internal>
        div 5
      </div>
       <div class=internal>
        div 6
      </div>
       <div class=internal>
        div 7
      </div>
       <div class=internal>
        div 8
      </div>
    </div>

CSS

div.center {
 width: 90%;
 height: 210px;
 border: 1px solid #000;
 margin: auto;
 overflow-x: hidden;
 overflow-y: hidden;
 white-space: nowrap;
  }
  div.internal {
   display: inline-block;
   vertical-align: middle;
   width: 100%;
   text-align: center;
  }

Jquery

$('.horizon-prev').click(function() {
  event.preventDefault();
  $('#content').animate({
    scrollLeft: "-=775px"
  }, "slow");
});

 $('.horizon-next').click(function() {
  event.preventDefault();
  $('#content').animate({
   scrollLeft: "+=775px"
  }, "slow");
});

@Error404 I've just edited the example to show where they are. Sorry for the lack of code. — Seth Spivey
– Seth Spivey, Commented May 26, 2016 at 14:14
jsbin.com/wokofepuvi/1/edit?html,css,js,output It works for me — user3141603
– user3141603, Commented May 26, 2016 at 14:18
As @VladGincher points this works ... Also I suggest you since you have % width to take the Scroll value from the actual width of center ... Check this jsfiddle.net/fwnv28hu — DaniP
– DaniP, Commented May 26, 2016 at 14:25
@VladGincher check out sethspivey.com. For some reason, it's only working when I run the code in the console. — Seth Spivey
– Seth Spivey, Commented May 26, 2016 at 14:26

libcthorne · Accepted Answer · 2016-05-26 14:37:01Z

5

(based on looking at your site sethspivey.com)

You need to add the missing event parameter you are using, and also move the click handlers into document.ready, like so:

$(function() {
  $('.horizon-prev').click(function(event) {
    event.preventDefault();
    $('#content').animate({
      scrollLeft: "-=775px"
    }, "slow");
  });

   $('.horizon-next').click(function(event) {
    event.preventDefault();
    $('#content').animate({
     scrollLeft: "+=775px"
    }, "slow");
  });
});

answered May 26, 2016 at 14:37

libcthorne

4173 silver badges11 bronze badges

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

Comments

wilovent · Accepted Answer · 2016-05-26 14:25:08Z

I take your code as this, and it work perfectly.

$('.horizon-prev').click(function() {
  event.preventDefault();
  $('#content').animate({
    scrollLeft: "-=775px"
  }, "slow");
});

 $('.horizon-next').click(function() {
  event.preventDefault();
  $('#content').animate({
   scrollLeft: "+=775px"
  }, "slow");
});

div.center {
 width: 90%;
 height: 210px;
 border: 1px solid #000;
 margin: auto;
 overflow-x: hidden;
 overflow-y: hidden;
 white-space: nowrap;
  }
  div.internal {
   display: inline-block;
   vertical-align: middle;
   width: 100%;
   text-align: center;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center" id="content">
      <div class=internal>
        div 1
      </div>
       <div class=internal>
        div 2
      </div>
       <div class=internal>
        div 3
      </div>
       <div class=internal>
        div 4
      </div>
       <div class=internal>
        div 5
      </div>
       <div class=internal>
        div 6
      </div>
       <div class=internal>
        div 7
      </div>
       <div class=internal>
        div 8
      </div>
    </div>
    
    <button class="horizon-prev">Prev</button>    <button class="horizon-next">Next</button>

score 1 · Accepted Answer · 2016-05-26 14:39:28Z

1

The problem is that jQuery binded an event handler to the "click" JavaScript event on a div that isn't loaded yet. You should execute it only when the DOM is fully loaded.

To fix it, in the http://sethspivey.com/js/index.js file, change the code to:

/* CLICK SCROLL FUNCTIONS JQUERY */
$(function(){
  $('.horizon-prev').click(function(event) {
    event.preventDefault();
    $('#content').animate({
      scrollLeft: "-="+toScroll+"px"
    }, "slow");
  });

  $('.horizon-next').click(function(event) {
    event.preventDefault();
    $('#content').animate({
      scrollLeft: "+="+toScroll+"px"
    }, "slow");
  });
});

edited May 26, 2016 at 14:39

answered May 26, 2016 at 14:33

user3141603

3 Comments

Seth Spivey Over a year ago

Works like a charm after combining this and defining the scrollTo that DaniP provided in his jsfiddle. Thank you

DaniP Over a year ago

Re-edit your answer ... since you are using the code I provided on the comments please copy the complete code...Here is no toScroll value

user3141603 Over a year ago

@DaniP I used the code in sethspivey.com/js/index.js line 217, all I've done is adding $(function(){ at the beginning and }); at the end...

LaZza · Accepted Answer · 2021-12-02 12:51:01Z

1

this is an old post and maybe there is an easier way to achive this now, but nevertheless it helped me with a project I am working on now. This scrollLeft recommendation above works a treat, but when you get to the end of the div if you continue clicking right 5 times for example, it adds 5 x 200px to scrollLeft, so you have to click left 6 times to move back 200px. This additional code solved the issue for me. Alternatively you could disable the button when reaching the end/beginning of the content div:

$('.horizon-prev').click(function() {
  event.preventDefault();
  let currentScroll = $('#content').get(0).scrollLeft;
  let scrollWidth = $('#content').get(0).scrollWidth;
  if((currentScroll - 200) <= 0){
        return;
  }else{
        $('#content').animate({
            scrollLeft: '-=200px'
        }, "slow");
  }
});


$('.horizon-next').click(function() {
  event.preventDefault();
  let currentScroll = $('#content').get(0).scrollLeft;
  let scrollWidth = $('#content').get(0).scrollWidth;
  if((200 + currentScroll) >= scrollWidth){
        return;
  }else{
        $('#content').animate({
            scrollLeft: '+=200px'
        }, "slow");
  }
});

edited Dec 2, 2021 at 12:51

answered Jun 8, 2020 at 18:23

LaZza

4386 silver badges9 bronze badges

2 Comments

Bojan Over a year ago

Works great, thanks, but I think you have two next selectors instead of next and prev

LaZza Over a year ago

Indeed I did. Updated this now thanks.

iMarh · Accepted Answer · 2016-05-26 14:38:35Z

With some modifications for better demonstration seems to me working fine:

<div class="horizon horizon-prev">
  <img src="../images/left-arrow.png" />
</div>
<div class="horizon horizon-next">
  <img src="../images/right-arrow.png" />
</div>

<div class="center" id="content">
  <div class=internal>
    div 1
  </div>
  <div class=internal>
    div 2
  </div>
  <div class=internal>
    div 3
  </div>
  <div class=internal>
    div 4
  </div>
  <div class=internal>
    div 5
  </div>
  <div class=internal>
    div 6
  </div>
  <div class=internal>
    div 7
  </div>
  <div class=internal>
    div 8
  </div>

div.center {
  width: 200px;
  height: 210px;
  border: 1px solid #000;
  margin: auto;
  overflow-x: hidden;
  overflow-y: hidden;
  white-space: nowrap;
}

div.internal {
  margin: -2px;
  display: inline-block;
  vertical-align: middle;
  width: 198px;
  text-align: center;
}

$('.horizon-prev').click(function() {
  event.preventDefault();
  $('#content').animate({
    scrollLeft: "-=198px"
  }, "slow");
});

$('.horizon-next').click(function() {
  event.preventDefault();
  $('#content').animate({
    scrollLeft: "+=198px"
  }, "slow");
});

https://jsfiddle.net/w87xycrq/1

Collectives™ on Stack Overflow

Jquery Horizontal Scroll on Click

5 Answers 5

Comments

Comments

3 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related