Scroll through content using buttons in JavaScript can be utilized repeatedly as needed

Question

Scroll through content using buttons in JavaScript can be utilized repeatedly as needed

I want to showcase a collection of movies on my website through a horizontal, scrollable div. Since I disabled the scrollbar, users can no longer scroll, leading me to incorporate two buttons - one for moving right and one for moving left.

However, the issue arises when users repeatedly press the buttons, causing the movies to get obstructed due to the additional margin applied through Javascript.

How can I tackle this problem? I aim to deactivate the left-button when the starting position is reached and deactivate the right-button when the end position is reached.

$('#right-button').click(function() {
event.preventDefault();
$('.movie-scroll').animate({
marginLeft: "-=200px"
}, "fast");
});
$('#left-button').click(function() {
event.preventDefault();
$('.movie-scroll').animate({
marginLeft: "+=200px"
 }, "fast");
});

::-webkit-scrollbar {
display: none;
}

.sc_content {
overflow-y: scroll;
}

.title_home {
font-size: 18px;
margin: 30px 0px -10px 30px;
}

.movie-scroll {
height: 300px;
white-space: nowrap; 
overflow-x: scroll;
margin-right: 30px;
}

.thumbnail-movie-box {
width: 130px;
margin: 30px 0px 0px 30px;
display: inline-block;
}

.thumbnail-movie-content {
display: block;
 position: relative;
}

.thumbnail-movie-poster {
width: 130px;
height: 195px;
}

.thumbnail-movie-title {
    font-size: 12px;
    font-weight: bold;
margin: 5px 0px 10px 0px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.thumbnail-movie-year {
font-size: 12px;
margin: -5px 10px 10px 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>  
<div class="sc_content">
  <h1 class="title_home">Movies</h1>
  <a href="#" id="left-button">Left</a>
  <div class="movie-scroll">
    <div class="thumbnail-movie-box">
      <a href="">
        <div class="thumbnail-movie-content">
          <img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
        </div>
      </a>
      <a href="">
        <p class="thumbnail-movie-title">Split</p>
      </a>
      <p class="thumbnail-movie-year">2016</p>
   </div>
   <div class="thumbnail-movie-box">
      <a href="">
        <div class="thumbnail-movie-content">
          <img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
        </div>
      </a>
      <a href="">
        <p class="thumbnail-movie-title">Split</p>
      </a>
      <p class="thumbnail-movie-year">2016</p>
   </div>
   <div class="thumbnail-movie-box">
      <a href="">
        <div class="thumbnail-movie-content">
          <img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
        </div>
      </a>
      <a href="">
        <p class="thumbnail-movie-title">Split</p>
      </a>
      <p class="thumbnail-movie-year">2016</p>
   </div>
   <div class="thumbnail-movie-box">
      // Repeat for other movie boxes
   </div>
</div>
<a href="#" id="right-button">Right</a>

javascript jquery html css

Answer 1

Answer №1

Check out this Fiddle for the solution: https://jsfiddle.net/zbavtpj4/

To make the necessary changes in your javascript, use the code below:

var positionIndex = 0;

$('#right-button').click(function() {
        event.preventDefault();
    if(positionIndex <= 7){
      $('.movie-scroll').animate({
          marginLeft: "-=200px"
      }, "fast");
      positionIndex++;
    }
});
$('#left-button').click(function() {
        event.preventDefault();
    if(positionIndex >= -2){
      $('.movie-scroll').animate({
          marginLeft: "+=200px"
       }, "fast");
       positionIndex--;
     }
});

This code tracks the position with an index and adjusts the margin only within specified boundaries. In this example, the boundaries are set manually. While it is possible to set boundaries programmatically, it was not implemented in this case due to time constraints.

Answer 2

Check out this Fiddle for the solution: https://jsfiddle.net/zbavtpj4/

To make the necessary changes in your javascript, use the code below:

var positionIndex = 0;

$('#right-button').click(function() {
        event.preventDefault();
    if(positionIndex <= 7){
      $('.movie-scroll').animate({
          marginLeft: "-=200px"
      }, "fast");
      positionIndex++;
    }
});
$('#left-button').click(function() {
        event.preventDefault();
    if(positionIndex >= -2){
      $('.movie-scroll').animate({
          marginLeft: "+=200px"
       }, "fast");
       positionIndex--;
     }
});

This code tracks the position with an index and adjusts the margin only within specified boundaries. In this example, the boundaries are set manually. While it is possible to set boundaries programmatically, it was not implemented in this case due to time constraints.

Answer 3

Answer №2

Prior to initiating any animation, it is crucial to verify the current margin-left value of .movie-scroll.

If the margin-left value is greater than or equal to 0, the action for #left-button should not be executed.

Similarly, if the margin-left value exceeds the width of .movie-scroll, the action for #right-button should be prevented from occurring.

Answer 4

Prior to initiating any animation, it is crucial to verify the current margin-left value of .movie-scroll.

If the margin-left value is greater than or equal to 0, the action for #left-button should not be executed.

Similarly, if the margin-left value exceeds the width of .movie-scroll, the action for #right-button should be prevented from occurring.

Answer 5

Answer №3

This section focuses on width calculations and comparisons.

Click here for the latest Fiddle update.

console.clear();

var filmWidth = $('.movie-scroll').outerWidth();
console.log(filmWidth);
var screenWidth = $(window).outerWidth();
console.log(screenWidth);
var posterWidth = $(".thumbnail-movie-poster").outerWidth();
console.log(posterWidth);

var leftBound = false;
var rightBound = false;

$('#right-button').click(function() {

  event.preventDefault();
  if(!rightBound){
    $('.movie-scroll').animate({
      marginLeft: "-=200px"
    }, "fast");
  }
  checkScrolling("right");
});

$('#left-button').click(function() {
  event.preventDefault();
  if(!leftBound){
    $('.movie-scroll').animate({
      marginLeft: "+=200px"
    }, "fast");
  }

  checkScrolling("left");
});

function checkScrolling(direction){
  setTimeout(function(){
    var scroll = parseInt($('.movie-scroll').css("marginLeft"));
    console.log(scroll);

    leftBound = false;
    rightBound = false;

    if(scroll>screenWidth-2*posterWidth && direction=="left"){
      console.log("left "+scroll);
      leftBound = true;
    }
    if(-scroll>=screenWidth+filmWidth+0.10*posterWidth && direction=="right"){
      console.log("right "+scroll);
      rightBound = true;
    }
  },300);
}

I included numerous console logs to aid in understanding the functionality...

Answer 6

This section focuses on width calculations and comparisons.

Click here for the latest Fiddle update.

console.clear();

var filmWidth = $('.movie-scroll').outerWidth();
console.log(filmWidth);
var screenWidth = $(window).outerWidth();
console.log(screenWidth);
var posterWidth = $(".thumbnail-movie-poster").outerWidth();
console.log(posterWidth);

var leftBound = false;
var rightBound = false;

$('#right-button').click(function() {

  event.preventDefault();
  if(!rightBound){
    $('.movie-scroll').animate({
      marginLeft: "-=200px"
    }, "fast");
  }
  checkScrolling("right");
});

$('#left-button').click(function() {
  event.preventDefault();
  if(!leftBound){
    $('.movie-scroll').animate({
      marginLeft: "+=200px"
    }, "fast");
  }

  checkScrolling("left");
});

function checkScrolling(direction){
  setTimeout(function(){
    var scroll = parseInt($('.movie-scroll').css("marginLeft"));
    console.log(scroll);

    leftBound = false;
    rightBound = false;

    if(scroll>screenWidth-2*posterWidth && direction=="left"){
      console.log("left "+scroll);
      leftBound = true;
    }
    if(-scroll>=screenWidth+filmWidth+0.10*posterWidth && direction=="right"){
      console.log("right "+scroll);
      rightBound = true;
    }
  },300);
}

I included numerous console logs to aid in understanding the functionality...

Answer 7

Answer №4

I apologize for the delay in sharing my response, but I believe this solution is scalable and will meet your requirements.

/* JavaScript Code */
var scrollWidth = parseInt($('.movie-scroll .thumbnail-movie-box').first().next().position().left) - parseInt($('.movie-scroll .thumbnail-movie-box').first().position().left);
var noOfItems = $('.movie-scroll .thumbnail-movie-box').length;
var count = 0;
$('#right-button').click(function() {
  event.preventDefault();
  var movieScroll = $('.movie-scroll');
  movieScroll.filter(function() {
    if (count == (noOfItems - 1))
      return false;
    count++;
    return true;
  }).animate({
    marginLeft: "-=" + scrollWidth + "px"
  }, "fast");
});
$('#left-button').click(function() {
  event.preventDefault();
  var movieScroll = $('.movie-scroll');
  movieScroll.filter(function() {
    if (count == 0)
      return false;
    count--;
    return true;
  }).animate({
    marginLeft: "+=" + scrollWidth + "px"
  }, "fast");
});

/* CSS Styles */
::-webkit-scrollbar {
  display: none;
}

.sc_content {
  overflow-y: scroll;
}

.title_home {
  font-size: 18px;
  margin: 30px 0px -10px 30px;
}

/* Additional CSS styles for movie-scroll and thumbnail-movie-box classes */

<!-- HTML Content -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="sc_content">
  <h1 class="title_home">Movies</h1>
  <a href="#" id="left-button">Left</a>
  <div class="movie-scroll">
    <div class="thumbnail-movie-box">
      <a href="">
        <div class="thumbnail-movie-content">
          <img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
        </div>
      </a>
      <a href="">
        <p class="thumbnail-movie-title">Split</p>
      </a>
      <p class="thumbnail-movie-year">2016</p>
    </div>
    /* Additional thumbnail-movie-box elements */
  </div>
  <a href="#" id="right-button">Right</a>

Answer 8

I apologize for the delay in sharing my response, but I believe this solution is scalable and will meet your requirements.

/* JavaScript Code */
var scrollWidth = parseInt($('.movie-scroll .thumbnail-movie-box').first().next().position().left) - parseInt($('.movie-scroll .thumbnail-movie-box').first().position().left);
var noOfItems = $('.movie-scroll .thumbnail-movie-box').length;
var count = 0;
$('#right-button').click(function() {
  event.preventDefault();
  var movieScroll = $('.movie-scroll');
  movieScroll.filter(function() {
    if (count == (noOfItems - 1))
      return false;
    count++;
    return true;
  }).animate({
    marginLeft: "-=" + scrollWidth + "px"
  }, "fast");
});
$('#left-button').click(function() {
  event.preventDefault();
  var movieScroll = $('.movie-scroll');
  movieScroll.filter(function() {
    if (count == 0)
      return false;
    count--;
    return true;
  }).animate({
    marginLeft: "+=" + scrollWidth + "px"
  }, "fast");
});

/* CSS Styles */
::-webkit-scrollbar {
  display: none;
}

.sc_content {
  overflow-y: scroll;
}

.title_home {
  font-size: 18px;
  margin: 30px 0px -10px 30px;
}

/* Additional CSS styles for movie-scroll and thumbnail-movie-box classes */

<!-- HTML Content -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="sc_content">
  <h1 class="title_home">Movies</h1>
  <a href="#" id="left-button">Left</a>
  <div class="movie-scroll">
    <div class="thumbnail-movie-box">
      <a href="">
        <div class="thumbnail-movie-content">
          <img class="thumbnail-movie-poster" src="https://image.tmdb.org/t/p/w500/ijoPd2gdt8jW982fGemySKDOGtv.jpg">
        </div>
      </a>
      <a href="">
        <p class="thumbnail-movie-title">Split</p>
      </a>
      <p class="thumbnail-movie-year">2016</p>
    </div>
    /* Additional thumbnail-movie-box elements */
  </div>
  <a href="#" id="right-button">Right</a>

Scroll through content using buttons in JavaScript can be utilized repeatedly as needed

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Integrating fresh components into a JSON structure

Using AJAX for uploading files upon a change event rather than upon submission

A guide on displaying containers with jQuery and CSS

Transferring multiple parameters between components using Navigate and ParamMap

How can we enforce that the input consists of digits first, followed by a space, and then

Prevent Float Filtering in AngularJS

Unable to locate and interact with a specific element within a dropdown menu while utilizing Protractor

Utilizing combined selectors in styled-components: A comprehensive guide

Extracting information from a table containing both obscured and accessible rows

How to retrieve the output of a nested function in Node.js

Fixing the issue with animated scrolling in React Native's Flatlist component

"Placing the save button on top of a div - a step

MUI-Datatable rows that can be expanded

Conditions in Controller Made Easy with AngularJS

Angular 2 - Module 'ng-factory' not found

What methods can be used to protect (encrypt using Java code) the information in a login form before it is sent to a servlet for

How to create ::after pseudo-element with identical width as its preceding sibling

`The challenge of a single web page not displaying correctly`

AngularJS and KendoUI integration experiencing delays during script evaluation

Implementing Laravel's functionality for calculating average ratings with the help of jQuery