A lateral sliding motion

Here is the HTML code I am working with: 

<div class="menuTabs">
        <div class="mtabArrowLeft">Left</div>

       <input class="menutabBTN" name="" type="button" value="a" />
       <input class="menutabBTN" name="" type="button" value="b" />
       <input class="menutabBTN" name="" type="button" value="c" />
       <input class="menutabBTN" name="" type="button" value="d" />
       <input class="menutabBTN" name="" type="button" value="e" />
       <input class="menutabBTN" name="" type="button" value="f"/>
         <div class="mtabArrowRight">Right</div>
      </div>

I need help in displaying the first four inputs with values from A to D, and then revealing the remaining hidden inputs when the user clicks on the mtabArrowLeft div. The maximum number of additional inputs to show at once should be 4. If the user hits the mtabArrowRight div, the process should reverse back to the original state.

Unfortunately, I am unsure how to achieve this functionality.

Below is the CSS code being used:

.menuTabs {
    float: left;
    width: 537px;
}

.mtabArrowLeft {
    float: left;
    height: 25px;
    width: 35px;
    margin-left: 15px;
    margin-right: 4px;
}

.mtabArrowRight {
    float: left;
    height: 25px;
    width: 35px;
    margin-left: 3px;
    margin-right: 15px;

}

.menutabBTN {
    float: left;
    height: 25px;
    width: 65px;
    margin-right: 3px;
    margin-left: 3px;
    padding: 0px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    color: #000;
    text-align: center;
    line-height: 25px;
}

Your assistance in solving this issue would be greatly appreciated. Thank you in advance.

javascriptjquerycss

Answer №1

To implement a solution, you can follow a similar approach outlined here:

Additionally, you may refer to the code used for sliding image thumbnails left and right at this link:

The following example demonstrates code tailored to your scenario, inspired by the code from the second mentioned site:

<!doctype html>
<html>
<head>
    <title></title>
    <style type="text/css">
.menuTabs {
    float: left;
    width: 284px;
    overflow:hidden;
    position:relative;
    height:50px;
}

.img-reel { position:absolute; left:0; top:0; height:50px; }

.mtabArrowLeft {
    float: left;
    height: 25px;
    width: 35px;
    margin-left: 15px;
    margin-right: 4px;
}

.mtabArrowRight {
    float: left;
    height: 25px;
    width: 35px;
    margin-left: 3px;
    margin-right: 15px;

}

.menutabBTN {
    float: left;
    height: 25px;
    width: 65px;
    margin-right: 3px;
    margin-left: 3px;
    padding: 0px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    color: #000;
    text-align: center;
    line-height: 25px;
}

    </style>
</head>
<body>

<div class="mtabArrowLeft">Left</div>
<div class="menuTabs">
        <div class="img-reel">
            <input class="menutabBTN" name="" type="button" value="a" />
            <input class="menutabBTN" name="" type="button" value="b" />
            <input class="menutabBTN" name="" type="button" value="c" />
            <input class="menutabBTN" name="" type="button" value="d" />
            <input class="menutabBTN" name="" type="button" value="e" />
            <input class="menutabBTN" name="" type="button" value="f"/>
        </div>
</div>
<div class="mtabArrowRight">Right</div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">


    $(function() {
            var imageWidth = 71;
            var reelSize = 4;
            var imageSum = $('.img-reel input').size();
            var imageReelWidth = imageWidth * imageSum;
            $('.img-reel').css({'width' : imageReelWidth});

            rotate = function(){
                var trigger = $btn.attr('class');
                var image_reelPosition = (trigger=='mtabArrowLeft') ? -imageWidth : imageWidth;
                var reel_currentPosition = $('.img-reel').css('left').replace('px','');
                var pos = reel_currentPosition-image_reelPosition;
                var maxPos = (imageSum-reelSize)*-imageWidth;
                //console.log('pos='+pos+', max='+maxPos);
                if(pos>=maxPos && pos<=0){
                    $('.img-reel').animate({left:pos},300);
                    $('.mtabArrowLeft,.mtabArrowRight').fadeTo(250,1);
                    //console.log('move');
                    if(pos==maxPos){$('.mtabArrowRight').fadeTo(250,0.5);}
                    else if(pos==0){$('.mtabArrowLeft').fadeTo(250,0.5);}
                }
            };
            if (imageSum > 4) {
                $('.mtabArrowLeft,.mtabArrowRight').click(function(){
                    $btn = $(this);
                    rotate();
                    return false;
                });
            }
            else {
                $('.mtabArrowLeft,.mtabArrowRight').fadeTo(0,0.5).click(function(){return false});
            }
    })
</script>
</body>
</html>

Answer №2

Discover a fantastic solution for creating sliders with Scrollable. Visit the tutorial and download the script using the link above – this HTML / CSS / jQuery code is directly sourced from the website.

To customize it to fit your design, you may need to adjust the widths of elements in the CSS. I hope this information proves helpful.

HTML

<div class="mtabArrowLeft prev left">Left</div>

    <div class="menuTabs scrollable">       
         <div class="items">
           <input class="menutabBTN" name="" type="button" value="a" />
           <input class="menutabBTN" name="" type="button" value="b" />
           <input class="menutabBTN" name="" type="button" value="c" />
           <input class="menutabBTN" name="" type="button" value="d" />
           <input class="menutabBTN" name="" type="button" value="e" />
           <input class="menutabBTN" name="" type="button" value="f"/>   
         </div>
    </div>

    <div class="mtabArrowRight next right">Right</div>

CSS

.scrollable {
    position:relative;
    overflow:hidden;
    width: 660px;
    height:90px;
}

.scrollable .items {
    width:20000em;
    position:absolute;
}

.items input {
    float:left;
}

jQuery

$(function() {

    // initialize scrollable
    $(".scrollable").scrollable();

});

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

Expanding a table by including a new column using Node.js and Knex

Currently building a service for my router using Node.js and Knex, but I'm struggling to add a column to an existing table. Any assistance would be greatly appreciated. Even though I am working with PostgreSQL, I believe the solution will be similar r ...

javascriptnode.jspostgresqlbackendknex.js

What is the process for creating a hover linear wipe transition using CSS/JS?

It's worth noting that I can't simply stack one image on top of the other because I'll be dealing with transparent images as well. preview of linear wipe ...

javascriptcssfrontend

How to automatically close a JavaScript popup once a form is submitted and refresh the parent page

I am facing an issue with a popup on my website. I have a separate page called math.ejs that pops up when a button is pressed on the index.ejs page. However, after clicking the submit Ok button in the math.ejs popup, I want it to close and display the calc ...

javascripthtmlnode.jsexpress

Exploring methods to access the state of a component nested within a slot in Vue

I'm facing a challenging issue that I can't seem to solve ...

javascriptvue.jsvuejs3vue-composition-api

The tooltip of the Material UI IconButton is displaying incorrectly

Within my ReactJS application, I am utilizing Material UI along with react-bootstrap-table components. One particular cell in my application utilizes the Material UI IconButton as shown below: <IconButton tooltip={t('tooltips:editRegulation&apos ...

cssreactjsmaterial-ui

I encountered an issue with route handlers in Next.js version 13.2. Sadly, they are not

I am trying to implement an API on my website with the endpoint /api/popular-movie. Here is an overview of my file structure: https://i.stack.imgur.com/e8Pf8.png Additionally, this is my route.ts code: import { NextResponse } from "next/server"; ...

javascriptreactjsapinext.jsfrontend

The dependencies were not updated after running `npm install`

When attempting to update the dependencies in my react-native CLI app by running npm install for the package.json, I encountered issues. Subsequently, I tried using npm audit fix and npm audit fix --force without success. In an effort to resolve the probl ...

javascriptnode.jsreact-nativenpm

Solving the Cross-Origin Resource Sharing problem in AngularJS

While using the http dependency in AngularJS and setting headers for CORS, I am encountering an error. Please check the console.log for more information on the error. The error message reads: "XMLHttpRequest cannot load . Response to preflight request doe ...

javascripthtmlangularjshttpcors

Execute a simulated click function in JavaScript without causing the viewport to move

I have successfully implemented a sticky add to cart feature on my Shopify store. However, there seems to be an issue where clicking on the variations in the sticky area also triggers the same variations on the product page, making it difficult for users t ...

javascript

Keyframes and CSS Animation for Border Effects

I've been struggling to achieve a specific animation that I can't seem to get right. Despite searching online for solutions, none of them quite match the desired effect. What I'm looking for is a border animation that starts at the bottom l ...

htmlcsscss-transitions

Verifying the number of div elements within an if condition

I've been attempting to determine the number of div elements in my DOM. However, when I try to assign this count to a variable, it displays as undefined in the console. Strangely, when I utilize an alert, it correctly shows the value as "8". My goal ...

jqueryhtml

Printing without page borders

Is there a way to prevent the border on my pages from being printed? I've tried various solutions without success. Here is the code I am currently using: CSS: #pagy2 { background: #f3fff3; border:1px solid #c9dbab; width: 100%; margi ...

cssprintingborder

Increase division height when mouse hovers over it

I want the height of the div to be 50px by default and change to 300px onmouseover. I have implemented this as follows: <style type="text/css"> #div1{ height:50px; overflow:hidden; } #div1:hover{ height:300px; } </style> <body> <div i ...

javascriptjqueryhtmlcss

Verify the dates in various formats

I need to create a function that compares two different models. One model is from the initial state of a form, retrieved from a backend service as a date object. The other model is after conversion in the front end. function findDateDifferences(obj1, ...

javascripttypescript

Altering the way in which URL parameters are attached to links depending on the destination

Our company utilizes Unbounce to create PPC landing pages on a subdomain, which then direct users back to our main website. We have implemented code that appends the AdWords gclid variable to outgoing links: $(document).ready(function() {var params = win ...

javascriptjquerygoogle-analytics

Is it possible for me to transfer a class attribute to a directive template in AngularJS?

I recently came across this directive in AngularJS: productApp.directive('notification', function($timeout) { return { restrict : 'E', replace : true, scope : { type: "@", message: "@ ...

javascriptangularjs

`18n implementation in Node.js and front-end JavaScript for localization`

I am currently utilizing express js 4.0 and have set up the i18n module from https://github.com/mashpie/i18n-node in combination with ejs views. My goal is to extend this i18n functionality to .js files as well. Is there a way to enable the i18n function ...

javascriptnode.jsexpressinternationalization

Transforming screen recording video chunks from blob into multipart for transmission via Api as a multipart

Seeking guidance in Angular 8 - looking for advice on converting screen recorded video chunks or blogs into a multipart format to send files via API (API only accepts multipart). Thank you in advance! ...

javascriptangularapiangular8multipartform-data

What could be causing the inconsistency in the success rate of my Get request, with it working occasionally but returning a

Why is it that my Get request works on occasion, but most of the time it returns a 404 error? I've been experimenting by removing the "next()" function, but it doesn't make a difference. I've also tried placing "res.json(req.user.firstName) ...

javascriptnode.jsreactjsexpresspassport.js

Rendering High-quality Images in Internet Explorer Browser

Currently, I am working on optimizing my website for high resolution monitors, particularly the new iPad. The site is already formatted to my liking, with images having increased resolutions while still fitting into specific DIVs. For instance, an image wi ...

htmlcssimageresizeimage-size