Replacing scrollbars of a div using overflow:auto with arrow indicators: A step-by-step guide

Currently, I am in the process of creating a small div element that will enable users to scroll between images within a jquery image zoom plugin designed for an eCommerce website.

Below is the code snippet that I have developed thus far:

<div style="width:125px;height:300px;overflow:auto;margin:auto;">
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:red;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:blue;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:pink;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:green;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:yellow;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:orange;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:black;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:brown;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:purple;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:grey;"></div>
</div>

You can view it in action on this jsfiddle https://jsfiddle.net/2o482ofp/

My objective now is to eliminate the scroll bars within the div and instead implement fixed arrow buttons that allow users to navigate up and down through the images. This functionality is inspired by the design seen on

Despite conducting extensive research online, I have been unable to find any tutorials, guides, or plugins that address the specific requirements of my project. If anyone could provide assistance, it would be greatly appreciated.

javascriptjqueryhtmlcss

Answer №1

const boxHeight = 75;
const marginTopValue = 10;

$('.up').click(function(){
    
    const $element = $('div>div:eq(0)');

let currentMarginTop = parseInt(window.getComputedStyle($element[0], null)['marginTop'].split('px')[0], 10);
    
    console.log('currentMarginTop', currentMarginTop);
    const resultValue = currentMarginTop - boxHeight - marginTopValue;

$element.css("margin-top", resultValue + "px");
});

$('.down').click(function(){

     const $element = $('div>div:eq(0)');

let currentMarginTop = parseInt(window.getComputedStyle($element[0], null)['marginTop'].split('px')[0], 10);
    const resultValue = currentMarginTop + boxHeight + marginTopValue;
    
    console.log('.currentMarginTop', currentMarginTop)

$element.css("margin-top", resultValue + "px");

})
div > div {
  
  transition: margin 1s ease;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br>
<br>
<br>
<br>
<button class="up">up</button>
<button class="down">down</button>
<div style="width:125px;height:300px;overflow:hidden;margin:auto;">
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:red;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:blue;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:pink;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:green;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:yellow;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:orange;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:black;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:brown;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:purple;"></div>
  <div style="width:75px;height:75px;margin:auto;margin-top:10px;margin-bottom:10px;background-color:grey;"></div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am experiencing difficulty in retrieving the result for the following code snippet

I'm currently attempting to retrieve data for my chart from a data.csv file. <!DOCTYPE html> <html> <head> <title>D3 test</title> <style> .grid .tick { ...

javascripthtmlcsssvgd3.js

Using Javascript to extract formatted text from a webpage and save it to the clipboard

I've developed a straightforward tool for employees to customize their company email signature. The tool generates text with specific styling, including bold fonts and a touch of color - nothing too extravagant. When I manually copy and paste the styl ...

javascripthtmlmootools

Comparing elements in one array to elements in another array

In AngularJS, the $scope.categories array is populated from a multi-select element. $scope.categories = ["Adventure", "Strategy"] To compare this array with the categories in the items array below: $scope.items = [ { title: "Star Wars", ...

javascriptarraysangularjsloopsfor-loop

Pagination Component for React Material-UI Table

I am interested in learning about Table Pagination in React UI Material. Currently, my goal is to retrieve and display data from an API in a Material UI Table. While I have successfully implemented some data from the API into the Material UI Table, I am ...

javascriptreactjsmaterial-ui

Struggling to reset the first item in an HTML select dropdown with Angular - any tips?

I am having an issue with my dropdown in a modal window. When I first open the modal, the dropdown works as expected. However, if I make a selection and then close and reopen the modal, the selected value remains instead of resetting to 'None selected ...

javascripthtmlangulardrop-down-menu

Is there a way to execute JavaScript code before any other scripts on the page? I need to perform a session check in JavaScript that redirects to a different page

My website has session and JavaScript checks to see if it exists. Everything is working correctly, but there is a slight issue where the dashboard page briefly appears for milliseconds before redirecting. I need the webpage to redirect before any HTML co ...

javascripthtmlvue.js

Initiate the animation on the progress bar only when it comes into view by using jQuery

As a beginner in jQuery, I have a question about starting an animation on a progress bar when it becomes visible on the screen using jQuery. Below is the code snippet that I have been working on but need help completing: $(".progress-bar").each( ...

jquerybootstrap-4

Dynamically Allocating Page Heights

I am tasked with creating an ASP.NET MVC page that will display a template of controls. The controls will be retrieved from an XML file. One issue I am facing is that the number of controls is not fixed, so the page height needs to be dynamic. Our site has ...

cssasp.net-mvc

Building a table using a JSON object in a React component

I have been dynamically creating a table in React based on the API response received. data = {"name":"tom", "age":23, "group":null, "phone":xxx} Everything was working fine until I encountered a scenario w ...

javascripthtmlreactjshtml-table

What could be the reason for the emptiness of my AngularJS scope object?

The code snippet in my controller looks like this: app.controller("weeklyLogViewer", function ($scope, $http){ $scope.allLogs = {}; $http({ method: 'POST', url: '../Utilities/WeeklyLog.php', data: $scope.dateSelected, ...

javascriptphpangularjs

The ticking clock between the beginning and final moments

I am using jQuery and trying to create a countdown timer between a start time and end time. While I have successfully calculated the difference between the two times, I am unsure how to count down the time stored in the difference variable in my code: v ...

jquery

"Learn how to dynamically bind static data from an AJAX call using jQuery in a seamless

Hey there! I'm fairly new to jquery and I have a graph that currently receives data statically. However, I'd like to make it dynamic instead. Here's the current static data: var data = [ { label: "New Request", data: 1.7, color: "# ...

javascriptjqueryajax

Is there a way to extract text from a span element using selenium?

Below is my current code implementation: from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_conditions as EC import time as t P ...

pythonhtmlpython-3.xseleniumselenium-webdriver

Three.js displaying only a fraction of gltf model on screen

I've been experimenting with adding this gltf model () using threeJS. The current code snippet is the only approach that has shown me a glimpse of the object, albeit just a small part. If anyone has insights on what modifications are needed, any assis ...

javascriptthree.js

How can I fix the 'Null is not an object' error that occurs while trying to assess the RNRandomBytes.seed function?

Currently, I am in the process of creating a mobile application using expo and react-native. One of the features I am working on involves generating a passphrase for users on a specific screen. To achieve this task, I have integrated the react-native-bip39 ...

javascriptreactjsreact-nativenpmexpo

What are some techniques for concealing error messages?

Can you assist in resolving this issue? There is a form which displays the inscription "You break my heart" immediately after loading, but I need it to only appear after the user attempts to enter text in the form. <div ng-app=""> <f ...

javascriptangularjs

"Setting the minimum length for multiple auto-complete suggestions in

How can I dynamically set the minLength of an input field based on whether a numeric value is coming from the "#lookup" field? Is there a way to achieve this using JavaScript and jQuery? <script type="text/javascript"> $(document).ready(function() ...

javascriptjquery

What could be causing the first() rxjs operator to repeatedly return an array?

I'm currently facing an issue with a service that has the following function signature: getSummary(id: string, universe: string): Observable<INTsummary[]> My requirement is to retrieve only the first item in the INTsummary[] array when calling ...

javascriptarraysangularionic2rxjs

Launching the Bootstrap 5 modal will cause the header and background to shift towards the right side

Currently, I am working with Angular 2 and Bootstrap 5 for the front-end of my project. I noticed that when I open a modal, the header and background shift to the right, covering the scrollbar. Upon closer inspection, I discovered that the HTML code trans ...

htmlcssangularbootstrap-modalbootstrap-5

Enhancing Navigation in React Native by Passing Multiple Values to the Next Screen

I have a challenge where I can successfully pass the first value of (postONE) from the current screen to Screen Two, and it displays perfectly there. However, I am unable to show the second value of (postTwo). This means that the Next screen only shows the ...

javascripthtmliosreact-nativedom