How do you hide an element when another element has a left position of more than 0?

mrmotivator

I have left/right arrows that when clicked uses jQuery to move an element to the left/right.

How would I hide that left arrow element when the left position is <1?

I have tried this but it didn't work:

$('.arrow-left').toggle($('.sliding-element').curPos() < '1');

I have also tried this but it also didn't work.

if ($('.sliding-element').css("left") == 0) {
    $('.arrow-left').hide(); 
} else {
    $('.arrow-left').show();
}

I have added a runnable code snippet below. I just need the left/right buttons to hide depending on the position of the sliding-element.

Thank you

    jQuery(document).ready(function( $ ){

        $(".js-carousel").each(function(){
            var $carousel = $(this),
                $carouselContainer = $carousel.find(".books-container"),
                $carouselList = $carousel.find(".sliding-element"),
                $carouselItem = $carousel.find(".book"),
                $carouselButton = $carousel.find(".js-carousel-button"),
                setItemWidth = function(){
                    $carouselList.removeAttr("style");
                    var curWidth = $($carouselItem[0]).outerWidth() * $carouselItem.length;
                    $carouselList.css("width", curWidth);
                },
                slide = function(){
                    var $button = $(this),
                        dir = $button.data("dir"),
                        curPos = parseInt($carouselList.css("left")) || 0,
                        moveto = 0,
                        containerWidth = $carouselContainer.outerWidth(),
                        listWidth = $carouselList.outerWidth(),
                        before = (curPos + containerWidth),
                        after = listWidth + (curPos - containerWidth);
                    if(dir=="next"){
                        moveto = (after < containerWidth) ? curPos - after : curPos - containerWidth;
                    } else {
                        moveto = (before >= 0) ? 0 : curPos + containerWidth;
                    }
                    
                    
                    $carouselList.animate({
                        left: moveto
                    });
                };
            $(window).resize(function(){
                setItemWidth();
            });
            setItemWidth();
            
            $carouselButton.on("click", slide);
        
        
        /*THIS BIT HERE*/
            if ($('.sliding-element').css("left") == 0) {
               $('.arrow-left').hide(); 
            } else {
               $('.arrow-left').show();
            }
        
        
        
        
        });


    });
.books-container {
            overflow: hidden;
        }
        .sliding-element {
            position: relative;
            display: flex;
        }
        .book {
            padding: 1em;
        }   
        

        .arrows {
            position:relative;
            width: 100%;
        }
        
        .arrow-right {
            right: -5px;
        }
        .arrow-left {
            left: -5px;
        }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="js-carousel">
    <div class="books-container">

        <div class="flex flex-wrap sliding-element">
        
        
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 1</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 2</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 3</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 4</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 5</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 6</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 7</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 8</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 9</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 10</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 11</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 12</p>
                </a>
            </div>
            <div class="book flex flex-column">
                <a href="#apage">
                    <p>Element 13</p>
                </a>
            </div>
            
            
        </div>
      
      <div class="arrows">
                        <div class="js-carousel-button arrow arrow-left animate" data-dir="prev">Left</div>
                        <div class="js-carousel-button arrow arrow-right animate" data-dir="next">Right</div>
                    </div>

    </div>
    </div>

Victor

$('.books-list').css("left") will be 0 when the animation finished. If you check earlier, the condition never will be true. Try with:

$carouselList.on('webkitAnimationEnd oanimationend msAnimationEnd animationend', 
    function(e) {
       // Check here your condition
    });

UPDATE

It's true, the event never fire. Try this (I checked, it's working). The function fire when the animation is completed.

      $carouselList.animate({
        left: moveto
      }, 400, function() {
        if (moveto == 0) {
          $('.arrow-left').hide(); 
        } else {
          $('.arrow-left').show();
        }
      });

You can use

$('.sliding-element').css("left") == '0px'

But including the units and maybe rem, em... instead of px. Having "moveto" variable available I prefer use it.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How do you hide an element in JQuery when posting data to .html?

In beautifulsoup4, when scraping a website purely based off of an element and the text within, how do you return more than one result?

position html element left of another

How do you hide an element using JQuery?

How to distribute array elements into another array while no array has more than 1 element that the other?

How do I display the updated element information when there is more than one element in the arrayList?

How to show an element and hide when click on another

How do I set "all windows" by default when left clicking on a application that has more than one window?

How to position an element to the LEFT of an other element?

How to move or copy more than one div element into another div?

Hide element when another element is present on the page

How do I hide an element when a certain slide has a class of active in fullpage.js slider?

How to change the position of an element to left when a radio button is checked?

How do you put text to the right or left of a canvas element?

How to hide an element if another element exist

how do i place an element X, to the left of another element Y, if it comes after element Y in the HTML

How to ensure that my left div element does not change the position of my right div element, when left div element gets long?

How do you find the position of an automatically positioned element?

How do you horizontally center an element with "position: absolute"?

How do you position a MathJax element within a box using JQuery?

When not more nested lists hide an element

How do you get the index number of an array rather than the element?

How do you set CSS property values when another element is active in CSS?

How to change text-decoration to underline when hovering the a element, if the a element is below another element with position absolute?

How to hide nested element when parents width is 0?

element moves left on hide

How can you toggle a class on an element when an input has text in it?

How to hide an element when I hover on an element

How to Align One Element to the Left and Another to the Right Inside a Div, with Center Alignment for the Right Element when the Left Element Expands?