Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Buttons don't work when I place them outside the carousel

Tags:

javascript

html

jquery

css

I have this code and when I put the anchor (arrow img) outside, .MultiCarousel div it doesn't work. I didn't write the code but I think I should change something in JavaScript. I want the anchor outside the container div but with the same functionality. I am not very familiar with JavaScript so I don't know what to change. Can someone help?

$(document).ready(function () {
    var itemsMainDiv = ('.MultiCarousel');
    var itemsDiv = ('.MultiCarousel-inner');
    var itemWidth = "";

    $('.leftLst, .rightLst').click(function () {
        var condition = $(this).hasClass("leftLst");
        if (condition)
            click(0, this);
        else
            click(1, this)
    });

    ResCarouselSize();

    $(window).resize(function () {
        ResCarouselSize();
    });

    //this function define the size of the items
    function ResCarouselSize() {
        var incno = 0;
        var dataItems = ("data-items");
        var itemClass = ('.item');
        var id = 0;
        var btnParentSb = '';
        var itemsSplit = '';
        var sampwidth = $(itemsMainDiv).width();
        var bodyWidth = $('body').width();
        $(itemsDiv).each(function () {
            id = id + 1;
            var itemNumbers = $(this).find(itemClass).length;
            btnParentSb = $(this).parent().attr(dataItems);
            itemsSplit = btnParentSb.split(',');
            $(this).parent().attr("id", "MultiCarousel" + id);

            if (bodyWidth >= 1200) {
                incno = itemsSplit[3];
                itemWidth = sampwidth / incno;
            }
            else if (bodyWidth >= 992) {
                incno = itemsSplit[2];
                itemWidth = sampwidth / incno;
            }
            else if (bodyWidth >= 768) {
                incno = itemsSplit[1];
                itemWidth = sampwidth / incno;
            }
            else {
                incno = itemsSplit[0];
                itemWidth = sampwidth / incno;
            }
            $(this).css({ 'transform': 'translateX(0px)', 'width': itemWidth * itemNumbers });
            $(this).find(itemClass).each(function () {
                $(this).outerWidth(itemWidth);
            });

            $(".leftLst").addClass("over");
            $(".rightLst").removeClass("over");

        });
    }


    //this function used to move the items
    function ResCarousel(e, el, s) {
        var leftBtn = ('.leftLst');
        var rightBtn = ('.rightLst');
        var translateXval = '';
        var divStyle = $(el + ' ' + itemsDiv).css('transform');
        var values = divStyle.match(/-?[\d\.]+/g);
        var xds = Math.abs(values[4]);
        if (e == 0) {
            translateXval = parseInt(xds) - parseInt(itemWidth * s);
            $(el).siblings(rightBtn).removeClass("over");

            if (translateXval <= itemWidth / 2) {
                translateXval = 0;
                $(el).siblings(leftBtn).addClass("over");
            }
        }
        else if (e == 1) {
            var itemsCondition = $(el).find(itemsDiv).width() - $(el).width();
            translateXval = parseInt(xds) + parseInt(itemWidth * s);
            $(el).siblings(leftBtn).removeClass("over");

            if (translateXval >= itemsCondition - itemWidth / 2) {
                translateXval = itemsCondition;
                $(el).siblings(rightBtn).addClass("over");
            }
        }
        $(el + ' ' + itemsDiv).css('transform', 'translateX(' + -translateXval + 'px)');
    }

    //It is used to get some elements from btn
    function click(ell, ee) {
        var Parent = "#" + $(ee).siblings( '.MultiCarousel' ).attr("id");
        var slide = $(Parent).attr("data-slide");
        ResCarousel(ell, Parent, slide);
    }
});
.MultiCarousel { 
    float: left; 
    overflow: hidden;
    padding: 15px; 
    width: 100%; 
    position:relative; 
    box-sizing: border-box;
}
.MultiCarousel .MultiCarousel-inner {
    transition: 1s ease all;
    float: left; 
}
.MultiCarousel .MultiCarousel-inner .item { 
    float: left;
}
.MultiCarousel .MultiCarousel-inner .item > div { 
    text-align: center;
    padding:10px;
    margin:10px;  
    color:#666;
}
.leftLst, .rightLst { 
    position:absolute;
    border-radius:50%;
    top:calc(50% - 20px);
    background: red;
    width: 50px;
    height: 50px;
}
.leftLst {
    left:0; 
}
.rightLst {
    right:0; 
}

.leftLst.over,  .rightLst.over {
    pointer-events: none; 
    background:#ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="row">
      <div class="MultiCarousel" data-items="1,2,3,4" data-slide="1" id="MultiCarousel"  data-interval="1000">
              <div class="MultiCarousel-inner">
                  <div class="item">
                        <div class="col-xl-3 pad15">
                          <img src="images/cert4.png" class="d-block w-100" alt="...">
                          <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                      </div>
                  </div>
                  <div class="item">
                    <div class="col-xl-3 pad15"> 
                      <img src="images/cert2.png" class="d-block w-100" alt="...">
                      <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                  </div>
                  <div class="item">
                    <div class="col-xl-3 pad15">
                      <img src="images/cert3.png" class="d-block w-100" alt="...">
                      <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                  </div>
                  </div>
                  <div class="item">
                    <div class="col-xl-3 pad15">
                      <img src="images/cert7.png" class="d-block w-100" alt="...">
                      <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>    
                  </div> 
                  </div>
                  <div class="item">
                    <div class="col-xl-3 pad15">
                      <img src="images/cert4.png" class="d-block w-100" alt="...">
                      <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                  </div>
                  </div>
                  <div class="item">
                    <div class="col-xl-3 pad15"> 
                      <img src="images/cert2.png" class="d-block w-100" alt="...">
                      <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                  </div>
                  <div class="item">
                    <div class="col-xl-3 pad15">
                      <img src="images/cert3.png" class="d-block w-100" alt="...">
                      <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                  </div>
                  </div>
                  <div class="item">
                    <div class="col-xl-3 pad15">
                      <img src="images/cert7.png" class="d-block w-100" alt="...">
                      <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>    
                  </div> 
                  </div>
              </div>
              <a class=" leftLst"><img src="images/left_arrow.svg" alt=""></a>
              <a class=" rightLst"><img src="images/right_arrow.svg" alt=""></a>
          </div>
       
    </div>
  
  </div>
like image 829
Alea Avatar asked Nov 07 '22 04:11

Alea

1 Answers

The problem is that the click() function is searching for the parent element of the arrow key button, which it expects to be the .MultiCarousel div in order for the rest of the code to work. So when you place the arrow keys outside of the .MultiCarousel div a different parent will be found and your slider will not work.

In this case you could use the jQuery siblings() function to find the .MultiCarousel div, as the arrow key buttons are now siblings.

The same goes for the ResCarousel() function. It expects the arrow key buttons to be children of the .MultiCarousel div. So you can also use siblings() here.

$(document).ready(function () {
    var itemsMainDiv = ('.MultiCarousel');
    var itemsDiv = ('.MultiCarousel-inner');
    var itemWidth = "";

    $('.leftLst, .rightLst').click(function () {
        var condition = $(this).hasClass("leftLst");
        if (condition)
            click(0, this);
        else
            click(1, this)
    });

    ResCarouselSize();

    $(window).resize(function () {
        ResCarouselSize();
    });

    //this function define the size of the items
    function ResCarouselSize() {
        var incno = 0;
        var dataItems = ("data-items");
        var itemClass = ('.item');
        var id = 0;
        var btnParentSb = '';
        var itemsSplit = '';
        var sampwidth = $(itemsMainDiv).width();
        var bodyWidth = $('body').width();
        $(itemsDiv).each(function () {
            id = id + 1;
            var itemNumbers = $(this).find(itemClass).length;
            btnParentSb = $(this).parent().attr(dataItems);
            itemsSplit = btnParentSb.split(',');
            $(this).parent().attr("id", "MultiCarousel" + id);

            if (bodyWidth >= 1200) {
                incno = itemsSplit[3];
                itemWidth = sampwidth / incno;
            }
            else if (bodyWidth >= 992) {
                incno = itemsSplit[2];
                itemWidth = sampwidth / incno;
            }
            else if (bodyWidth >= 768) {
                incno = itemsSplit[1];
                itemWidth = sampwidth / incno;
            }
            else {
                incno = itemsSplit[0];
                itemWidth = sampwidth / incno;
            }
            $(this).css({ 'transform': 'translateX(0px)', 'width': itemWidth * itemNumbers });
            $(this).find(itemClass).each(function () {
                $(this).outerWidth(itemWidth);
            });

            $(".leftLst").addClass("over");
            $(".rightLst").removeClass("over");

        });
    }


    //this function used to move the items
    function ResCarousel(e, el, s) {
        var leftBtn = ('.leftLst');
        var rightBtn = ('.rightLst');
        var translateXval = '';
        var divStyle = $(el + ' ' + itemsDiv).css('transform');
        var values = divStyle.match(/-?[\d\.]+/g);
        var xds = Math.abs(values[4]);
        if (e == 0) {
            translateXval = parseInt(xds) - parseInt(itemWidth * s);
            $(el).siblings(rightBtn).removeClass("over");

            if (translateXval <= itemWidth / 2) {
                translateXval = 0;
                $(el).siblings(leftBtn).addClass("over");
            }
        }
        else if (e == 1) {
            var itemsCondition = $(el).find(itemsDiv).width() - $(el).width();
            translateXval = parseInt(xds) + parseInt(itemWidth * s);
            $(el).siblings(leftBtn).removeClass("over");

            if (translateXval >= itemsCondition - itemWidth / 2) {
                translateXval = itemsCondition;
                $(el).siblings(rightBtn).addClass("over");
            }
        }
        $(el + ' ' + itemsDiv).css('transform', 'translateX(' + -translateXval + 'px)');
    }

    //It is used to get some elements from btn
    function click(ell, ee) {
        var Parent = "#" + $(ee).siblings( '.MultiCarousel' ).attr("id");
        var slide = $(Parent).attr("data-slide");
        ResCarousel(ell, Parent, slide);
    }
});
.MultiCarousel { 
    float: left; 
    overflow: hidden;
    padding: 15px; 
    width: 100%; 
    position:relative; 
    box-sizing: border-box;
}
.MultiCarousel .MultiCarousel-inner {
    transition: 1s ease all;
    float: left; 
}
.MultiCarousel .MultiCarousel-inner .item { 
    float: left;
}
.MultiCarousel .MultiCarousel-inner .item > div { 
    text-align: center;
    padding:10px;
    margin:10px;  
    color:#666;
}
.leftLst, .rightLst { 
    position:absolute;
    border-radius:50%;
    top:calc(50% - 20px);
    background: red;
    width: 50px;
    height: 50px;
}
.leftLst {
    left:0; 
}
.rightLst {
    right:0; 
}

.leftLst.over,  .rightLst.over {
    pointer-events: none; 
    background:#ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="row">
        <div class="MultiCarousel" data-items="1,2,3,4" data-slide="1" id="MultiCarousel"  data-interval="1000">
            <div class="MultiCarousel-inner">
                <div class="item">
                    <div class="col-xl-3 pad15">
                        <img src="https://www.fillmurray.com/640/360" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15"> 
                        <img src="https://www.fillmurray.com/640/360" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15">
                        <img src="https://www.fillmurray.com/640/360" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15">
                        <img src="https://www.fillmurray.com/640/360" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>    
                    </div> 
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15">
                        <img src="https://www.fillmurray.com/640/360" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15"> 
                        <img src="https://www.fillmurray.com/640/360" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15">
                        <img src="https://www.fillmurray.com/640/360" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15">
                        <img src="https://www.fillmurray.com/640/360" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>    
                    </div> 
                </div>
            </div>
        </div>

        <a class=" leftLst"><img src="images/left_arrow.svg" alt=""></a>
        <a class=" rightLst"><img src="images/right_arrow.svg" alt=""></a>

    </div>
</div>

Alternative solution

Your question stated specifically that you wanted to place the arrow key buttons outside the .MultiCarousel div but I think it might be better to keep them inside the div as it functions as a wrapper for the whole carousel.

You can then use the closest() function to find the .MultiCarousel div in the click() function, and the find() function to find the buttons in the ResCarousel() function.

This way the buttons are always connected to the correct slider, for instance when you want to use multiple sliders next to each other, as in the example below.

$(document).ready(function () {
    var itemsMainDiv = ('.MultiCarousel');
    var itemsDiv = ('.MultiCarousel-inner');
    var itemWidth = "";

    $('.leftLst, .rightLst').click(function () {
        var condition = $(this).hasClass("leftLst");
        if (condition)
            click(0, this);
        else
            click(1, this)
    });

    ResCarouselSize();

    $(window).resize(function () {
        ResCarouselSize();
    });

    //this function define the size of the items
    function ResCarouselSize() {
        var incno = 0;
        var dataItems = ("data-items");
        var itemClass = ('.item');
        var id = 0;
        var btnParentSb = '';
        var itemsSplit = '';
        var sampwidth = $(itemsMainDiv).width();
        var bodyWidth = $('body').width();
        $(itemsDiv).each(function () {
            id = id + 1;
            var itemNumbers = $(this).find(itemClass).length;
            btnParentSb = $(this).parent().attr(dataItems);
            itemsSplit = btnParentSb.split(',');
            $(this).parent().attr("id", "MultiCarousel" + id);

            if (bodyWidth >= 1200) {
                incno = itemsSplit[3];
                itemWidth = sampwidth / incno;
            }
            else if (bodyWidth >= 992) {
                incno = itemsSplit[2];
                itemWidth = sampwidth / incno;
            }
            else if (bodyWidth >= 768) {
                incno = itemsSplit[1];
                itemWidth = sampwidth / incno;
            }
            else {
                incno = itemsSplit[0];
                itemWidth = sampwidth / incno;
            }
            $(this).css({ 'transform': 'translateX(0px)', 'width': itemWidth * itemNumbers });
            $(this).find(itemClass).each(function () {
                $(this).outerWidth(itemWidth);
            });

            $(".leftLst").addClass("over");
            $(".rightLst").removeClass("over");

        });
    }


    //this function used to move the items
    function ResCarousel(e, el, s) {
        var leftBtn = ('.leftLst');
        var rightBtn = ('.rightLst');
        var translateXval = '';
        var divStyle = $(el + ' ' + itemsDiv).css('transform');
        var values = divStyle.match(/-?[\d\.]+/g);
        var xds = Math.abs(values[4]);
        if (e == 0) {
            translateXval = parseInt(xds) - parseInt(itemWidth * s);
            $(el).find(rightBtn).removeClass("over");

            if (translateXval <= itemWidth / 2) {
                translateXval = 0;
                $(el).find(leftBtn).addClass("over");
            }
        }
        else if (e == 1) {
            var itemsCondition = $(el).find(itemsDiv).width() - $(el).width();
            translateXval = parseInt(xds) + parseInt(itemWidth * s);
            $(el).find(leftBtn).removeClass("over");

            if (translateXval >= itemsCondition - itemWidth / 2) {
                translateXval = itemsCondition;
                $(el).find(rightBtn).addClass("over");
            }
        }
        $(el + ' ' + itemsDiv).css('transform', 'translateX(' + -translateXval + 'px)');
    }

    //It is used to get some elements from btn
    function click(ell, ee) {
        var Parent = "#" + $(ee).closest( '.MultiCarousel' ).attr("id");
        var slide = $(Parent).attr("data-slide");
        ResCarousel(ell, Parent, slide);
    }
});
.MultiCarousel { 
    float: left; 
    overflow: hidden;
    margin: 5%; 
    width: 40%; 
    position:relative; 
    box-sizing: border-box;
}
.MultiCarousel .MultiCarousel-inner {
    transition: 1s ease all;
    float: left; 
}
.MultiCarousel .MultiCarousel-inner .item { 
    float: left;
}
.MultiCarousel .MultiCarousel-inner .item > div { 
    text-align: center;
    padding:10px;
    margin:10px;  
    color:#666;
}
.leftLst, .rightLst { 
    /*position:absolute;*/
    border-radius:50%;
    /*top:calc(50% - 20px);*/
    background: red;
    width: 50px;
    height: 50px;
    display: block;
}
.leftLst {
    float: left; 
}
.rightLst {
    float: right;
}

.leftLst.over,  .rightLst.over {
    pointer-events: none; 
    background:#ccc;
}

.buttons {
    width: 100%;
    clear:both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="row">
        
        <div class="MultiCarousel" data-items="1,2,3,4" data-slide="1" id="MultiCarousel"  data-interval="1000">
            <div class="MultiCarousel-inner">
                <div class="item">
                    <div class="col-xl-3 pad15">
                        <img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15"> 
                        <img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15">
                        <img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15">
                        <img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>    
                    </div> 
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15">
                        <img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15"> 
                        <img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15">
                        <img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15">
                        <img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>    
                    </div> 
                </div>
            </div>
            <div class="buttons">
                <a class=" leftLst"><img src="images/left_arrow.svg" alt=""></a>
                <a class=" rightLst"><img src="images/right_arrow.svg" alt=""></a>
            </div>
        </div>

        <div class="MultiCarousel" data-items="1,2,3,4" data-slide="1" id="MultiCarousel"  data-interval="1000">
            <div class="MultiCarousel-inner">
                <div class="item">
                    <div class="col-xl-3 pad15">
                        <img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15"> 
                        <img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15">
                        <img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15">
                        <img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>    
                    </div> 
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15">
                        <img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15"> 
                        <img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15">
                        <img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>
                    </div>
                </div>
                <div class="item">
                    <div class="col-xl-3 pad15">
                        <img src="https://www.fillmurray.com/200/200" class="d-block w-100" alt="...">
                        <div class="onhover"><span>Certifikata per Atesimin e Kaldajes Elektrike</span></div>    
                    </div> 
                </div>
            </div>
            <div class="buttons">
                <a class=" leftLst"><img src="images/left_arrow.svg" alt=""></a>
                <a class=" rightLst"><img src="images/right_arrow.svg" alt=""></a>
            </div>
        </div>

    </div>
</div>
like image 197
Terminator-Barbapapa Avatar answered Nov 14 '22 21:11

Terminator-Barbapapa
Sign in to Comment

Related questions

How can I easily measure the complexity of a JSON object?
Truncate text splitting by sentences
How to handle launch application confirm box with javascript
Three.js - can't render cube on Mapbox GL JS custom WebGL layer
Update the displayed number to match its position in the order of elements in pure javascript
How can you capitalize this word in VIM snippet?
Vue Composition Reactive properties are not updating in components
get copied content inside onCopy hook (plugin)
Why is this.props undefined when I'm passing in actions to mapDispatchToProps?
Custom Shiny Input Update Reactives
How to save the value of a variable converted to base64?
Is there anyway to get Node.JS and V8 to automatically vectorize simple loops?
Create yeoman generator with API's calls
Can you destroy the document element and event listeners without using document.write()?
Vue.js 3 : a `v-model` looses reactivity when `data()` converted to `setup()`
JHipster Entities Menu is Empty after succeed import-jdl
How to integrate FileReader in Redux?
jQuery.each implementation differs from native Array.forEach
TypeORM cannot find entities if entity directory was not set in configuration files
How to create the Super Saiyan effect in CSS / JS ?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!