Javascript - Make div sliding with buttons

Question

I've made a container around the car pictures, and use overflow-y: scroll so I can scroll through them. How can I make it so I have two buttons I can click so I can scroll through them with buttons via javascript or jquery?

Current html is:

<div  class="event_container">

            <a href="/index.php?con=events&id=5">
        <div style="display: inline-block; background-image: url('img/events/event5.jpg')" class="">
            <p>Kør med de store!</p>
            <p>18-01-2017</p>
            <div style="display: inline-block" class="tile"></div>
        </div>
    </a>
                <a href="/index.php?con=events&id=3">
        <div style="display: inline-block; background-image: url('img/events/event3.jpg')" class="">
            <p>Den nye FIAT 500!</p>
            <p>24-01-2017</p>
            <div style="display: inline-block" class="tile"></div>
        </div>
    </a>
                <a href="/index.php?con=events&id=1">
        <div style="display: inline-block; background-image: url('img/events/event1.jpg')" class="">
            <p>Event 1</p>
            <p>30-04-2017</p>
            <div style="display: inline-block" class="tile"></div>
        </div>
    </a>
                <a href="/index.php?con=events&id=2">
        <div style="display: inline-block; background-image: url('img/events/event2.jpg')" class="">
            <p>Test kør bughatti!</p>
            <p>03-06-2017</p>
            <div style="display: inline-block" class="tile"></div>
        </div>
    </a>
                <a href="/index.php?con=events&id=4">
        <div style="display: inline-block; background-image: url('img/events/event4.jpg')" class="">
            <p>Skal du køre suziki?</p>
            <p>30-06-2017</p>
            <div style="display: inline-block" class="tile"></div>
        </div>
    </a>

Answer 1

I've made a container around the car pictures, and use overflow-y: scroll so I can scroll through them. How can I make it so I have two buttons I can click so I can scroll through them with buttons via javascript or jquery?

Here are 3 approaches using:

• jQuery
• plain javascript
• CSS and javascript

The last approach which uses CSS Transitions delivers the smoothest and best animation.

Approach 1 (of 3)

You can use jQuery's custom animate({scrollTop: [value]}) method to scroll the images up and down.

Working example in jQuery:

 $(document).ready(function(){ $('button').eq(0).click(function(){ $('div').animate({scrollTop: $('div').scrollTop() -158 + 'px'}); }); $('button').eq(1).click(function(){ $('div').animate({scrollTop: $('div').scrollTop() +158 + 'px'}); }); }); 

 div, img, button { display: inline-block; vertical-align: top; } div { width: 596px; height: 152px; padding: 12px; background-color: rgb(63,63,63); overflow-y: auto; } img { display: inline-block; width: 100px; height: 140px; margin: 6px 6px 12px; color: rgb(255,255,255); background-color: rgb(255,127,0); } img:last-of-type { margin-bottom: 24px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <img alt="image-1" /> <img alt="image-2" /> <img alt="image-3" /> <img alt="image-4" /> <img alt="image-5" /> <img alt="image-6" /> <img alt="image-7" /> <img alt="image-8" /> <img alt="image-9" /> <img alt="image-10" /> <img alt="image-11" /> <img alt="image-12" /> <img alt="image-13" /> <img alt="image-14" /> <img alt="image-15" /> </div> <button type="button">Scroll Up</button> <button type="button">Scroll Down</button> 

---

Approach 2 (of 3)

If you want to skip jQuery, here is an alternative version using plain javascript.

Working example in plain javascript:

 var buttons = document.getElementsByTagName('button'); var imageContainer = document.getElementsByTagName('div')[0]; var scrollValue; var scrollDirection; function scroll() { scrollDirection = (this.textContent === 'Scroll Down' ? 1 : -1); scrollValue = (this.textContent === 'Scroll Down' ? 158 : -158); var startPoint = imageContainer.scrollTop; var scrollDiv = setInterval(function() { imageContainer.scrollTop += scrollDirection; if (imageContainer.scrollTop === (startPoint + scrollValue)) { scrollDirection = 0; clearInterval(scrollDiv); } }, 1); } for (var i = 0; i < buttons.length; i++) { buttons[i].addEventListener('click', scroll, false); } 

 div, img, button { display: inline-block; vertical-align: top; } div { width: 596px; height: 152px; padding: 12px; background-color: rgb(63,63,63); overflow-y: auto; } img { display: inline-block; width: 100px; height: 140px; margin: 6px 6px 12px; color: rgb(255,255,255); background-color: rgb(255,127,0); } img:last-of-type { margin-bottom: 24px; } 

 <div> <img alt="image-1" /> <img alt="image-2" /> <img alt="image-3" /> <img alt="image-4" /> <img alt="image-5" /> <img alt="image-6" /> <img alt="image-7" /> <img alt="image-8" /> <img alt="image-9" /> <img alt="image-10" /> <img alt="image-11" /> <img alt="image-12" /> <img alt="image-13" /> <img alt="image-14" /> <img alt="image-15" /> </div> <button type="button">Scroll Up</button> <button type="button">Scroll Down</button> 

Approach 3 (of 3)

As you will have noted, the plain javascript approach immediately above comes across as a bit slow and jerky. So in the end (as with all animations), the optimum approach is to deploy some CSS to handle the animation.

Working example in CSS and plain javascript:

 var buttons = document.getElementsByTagName('button'); var images = document.getElementsByTagName('img'); var scrollValue; function scroll() { var imageTransformStyle = window.getComputedStyle(images[0]).transform; var yStart = (imageTransformStyle.lastIndexOf(',') + 2); var yEnd = imageTransformStyle.lastIndexOf(')'); var currentPosition = Number(imageTransformStyle.substring(yStart, yEnd)); scrollValue = (this.textContent === 'Scroll Down') ? -158 : 158; var newPosition = currentPosition + scrollValue; if (newPosition > 0) {newPosition = 0;} if (newPosition < -316) {newPosition = -316;} for (var i = 0; i < images.length; i++) { images[i].style.transform = 'translateY(' + newPosition + 'px)'; } } for (var i = 0; i < buttons.length; i++) { buttons[i].addEventListener('click', scroll, false); } 

 div, img, button { display: inline-block; vertical-align: top; } div { width: 578px; height: 152px; padding: 12px; background-color: rgb(63,63,63); overflow-y: hidden; } img { display: inline-block; width: 100px; height: 140px; margin: 6px 6px 12px; color: rgb(255,255,255); background-color: rgb(255,127,0); transform: translateY(0); transition: transform 0.5s ease-out; } img:last-of-type { margin-bottom: 24px; } 

 <div> <img alt="image-1" /> <img alt="image-2" /> <img alt="image-3" /> <img alt="image-4" /> <img alt="image-5" /> <img alt="image-6" /> <img alt="image-7" /> <img alt="image-8" /> <img alt="image-9" /> <img alt="image-10" /> <img alt="image-11" /> <img alt="image-12" /> <img alt="image-13" /> <img alt="image-14" /> <img alt="image-15" /> </div> <button type="button">Scroll Up</button> <button type="button">Scroll Down</button> 

Answer 2

You can make action animated with jQuery to be more comfortable with moved image. Try example below:

 var outer = $('.container'); $('#right').click(function() { outer.animate({scrollLeft: '+=30px'}, 500); }); $('#left').click(function() { outer.animate({scrollLeft: '-=30px'}, 500); }); $('#top').click(function() { outer.animate({scrollTop: '-=30px'}, 500); }); $('#bottom').click(function() { outer.animate({scrollTop: '+=30px'}, 500); }); 

 .container { width: 100px; height: 100px; overflow: scroll; } .inner { width: 300px; background-color: red; font-size: 50px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <div class="inner"> ABCDEFG 1 2 3 4 5 6 7 8 9 ------------------------------- 9 8 7 6 5 4 3 2 1 ABCDEFG </div> </div> <button id="left"> < </button><button id="right"> > </button> <button id="top"> ^ </button><button id="bottom"> V </button>