#StackBounty: #jquery Carousel multiple: How to make arrows target a specific set of slides?

Bounty: 100

I am trying to create a portfolio site that contains multiple image sliders on the same page. I had the HTML, CSS & jQuery working for a single slider, but as soon as I added another–with the same classes–things got funky.

My question: how can I make the left & right arrows only target the slides that they are connected to?

$('.carousel-right').click(function() {
    $('.item.product').last().insertBefore($('.item.product').first());
})
$('.carousel-left').click(function() {
    $('.item.product').first().insertAfter($('.item.product').last());
})

I’ve tried using the "this" and "each" selectors in different spots, but no luck. I am new at this, so I could have been using them wrong.

/*$(".carousels .carousel-right").each(function(){
    $('.carousel-right').click(function() {
        $(this).find('.item.product').last().insertBefore($('.item.product').first());
    });
});*/

    /*$(this).on("click", '.carousel-right', function(){
        $(this).find('.item.product').last().insertBefore($('.item.product').first());
        //$(this).find('.item.product').last().insertBefore(.find('.item.product').first());
        //$(this).find('.item.product').last().insertBefore($('.item.product').first());
    });*/
/*$('.carousel-right').click(function() {
            $(this).find('.item.product').last().insertBefore($('.item.product').first());
        })*/

Another problem is that the slider mousedown, ‘mousemove’, mouseup when pressing the left button the container moves all the items and it does not work individually as I want it to work like the buttons.

This is my complete code:

var direction_slider = "up";
    var current_step = 0;
    var scroll_product = false;
    var scroll = -1;

$(function(){
    $(".carousels").each(function(){
        var numItems = $(this).find("div.item").length;
        if (numItems <= 4) {
            $(this).find('.nav-btn').css('display','none');
        }
    });

    $('.carousel-right').click(function() {
        //.last().remove()
        $('.item.product').last().insertBefore($('.item.product').first());
    })
    $('.carousel-left').click(function() {
        $('.item.product').first().insertAfter($('.item.product').last());
    })

    // vars for clients list carousel
    var $product_carousel = $('.slider');
    var products = $product_carousel.children().length;
    var product_width = (products * 140); // 140px width for each client item
    $product_carousel.css('width',product_width);

    var rotating = true;
    //var product_speed = 1800;
    //var see_products = setInterval(rotateClients, product_speed);

    $(document).on({
        mouseenter: function(){
            rotating = false; // turn off rotation when hovering
        },
        mouseleave: function(){
            rotating = true;
        }
    }, '.carousel');

    /*SLIDER CON MOVIMIENTO SLIDER CAROUSEL ANIMADO
  function rotateClients() {
        if(rotating != false) {
            if (direction_slider == "up") {
                rotateClientsUp();
            if (++current_step == $(".slider .item").length) direction_slider = "down";
            } else {
                rotateClientsDown();
                if (--current_step == 0)  direction_slider = "up";
            }
        }
    }

    function rotateClientsUp() {
        var $last   = $('.slider .item:last');
        $last.remove().css("margin-left", "-140px");
        $(".slider").prepend($last);
        $last.animate({ 'margin-left': '0' }, 600);
    }

    function rotateClientsDown() {
        var $first = $('.slider .item:first');
        $first.animate({ 'margin-left': '-140px' }, 600, function() {
            $first.remove().css({ 'margin-left': '0px' });
            $('.slider .item:last').after($first);
        });
    }*/
    $product_carousel.on("mousedown", function(e) {
        scroll_product = true;
        scroll = e.pageX;
        event.preventDefault();
    }).on("mouseup", function(e) {
        scroll_product = false;
        var num = Math.floor(Math.abs(scroll - e.pageX) / 140);
        var dir = scroll - e.pageX < 0 ? "up" : "down";
        for (var x = 0; x < num; x++) {
            var $first = $('.slider .item:first');
            var $last  = $('.slider .item:last');
            if (dir == "up") {
                $last.prependTo(".slider");
            } else {
                $first.appendTo(".slider");
            }
        }
        $(".slider").css("transform", "translate(0, 0)")
    }).on("mousemove", function(e) {
        if (scroll_product) {
            $(".slider").css("transform", "translate(" + ( e.pageX - scroll ) +"px, 0)")
        }
    });
});
.relative {
  position:relative;
}
.carousels {
    width: 100%;
    padding: 1em;
    margin: 0 auto;
    overflow: hidden;
    max-width: 1400px;
    margin-left: auto;
}
.slider {
    display: grid;
    grid-gap: 0.1rem;
    width: 100% !important;
    grid-auto-flow: column;
}
.carousel-left {
    left: 10px;
}
.carousel-right {
    right: 0px;
}
.nav-btn {
    top: 25%;
    width: 40px;
    height: 45px;
    z-index: 100;
    cursor: pointer;
    position: absolute;
    border-radius: 8px;
    background-color: white;
    border: 1px solid #D5D9D9;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    box-shadow: 0 2px 5px 0 rgb(213 217 217 / 50%);
}
.nav-btn:hover {
    background-color: #F7FAFA;
}
.item {
    width: 250px;
    padding: 1em;
    height: 300px;
    margin: 0.5em;
    display: inline-table;
    border: 1px solid #ccc;
    background-color: #fff;
}
.item.product .c-rating {
    transform: scale(0.6);
}
.item.product .rating {
    margin-bottom: .2rem;
}
.item.product .total-avg span {
    margin-right: .4rem;
    color: #be5a0e;
    font-weight: 600;
}
.item.product .valuations {
    margin-left: 5rem;
    color: #73726c;
}
.item.product .valuations span {
    font-size: .8em;
    display: flex;
    line-height: 1.5rem;
}
.thumbnails {
    width: 70%;
    margin: 0 auto;
}
.thumbnails img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}
.topic-1 .price label {
    text-decoration: line-through;
    font-weight: 400;
    margin-right: 6px;
    color: #666;
    font-size: 13px;
}
.topic-1 .price em {
    font-style: normal;
    font-size: 18px;
    color: #17aa1c;
    font-weight: 600;
}
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
    <div id="wrapp">
        <div class="deals">
            <div class="heading mini-title">
                <h2>New Product</h2> <div class="rule"></div>
            </div>
            <div class="carousels relative">
                <button class="carousel-left nav-btn"><i class="icon-arrow-left"><</i></button>
                <button class="carousel-right nav-btn"><i class="icon-arrow-right">></i></button>
                <div class="carousel">
                    <div class="slider">
                        <div class="item product category-info">
                            <div class="banner-info">
                                <a href="">
                                    <h3>Shopping Guide for Trending Styles</h3>
                                    <img src="https://img.alicdn.com/tfs/TB1ZXXNIgHqK1RjSZFkXXX.WFXa-300-320.jpg" style="width: 320px; height: 300px;">
                                    <span>Source Now</span>
                                </a>
                            </div>
                        </div>
                        <div class="item product">
                            <a href="product/tu-producto-aqui-8">
                                <div class="thumbnails image">
                                    <img src="https://i.imgur.com/02NOJHI.jpg" alt="Tú producto aquí 8">
                                </div>
                                <div class="box topic-1">
                                    <div class="heading ellipsis">
                                        <h2>Product 8</h2>
                                    </div>
                                    <div class="price right">
                                        <label></label>
                                        <em class="item-price">$2,00</em>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="item product">
                            <a href="product/tu-producto-aqui-7">
                                <div class="thumbnails image">
                                    <img src="https://i.imgur.com/02NOJHI.jpg" alt="Tú producto aquí 7">
                                </div>
                                <div class="box topic-1">
                                    <div class="heading ellipsis">
                                        <h2>Product 7</h2>
                                    </div>
                                    <div class="price right">
                                        <label></label>
                                        <em class="item-price">$3,00</em>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="item product">
                            <a href="product/tu-producto-aqui-6">
                                <div class="thumbnails image">
                                    <img src="https://i.imgur.com/02NOJHI.jpg" alt="Tú producto aquí 6">
                                </div>
                                <div class="box topic-1">
                                    <div class="heading ellipsis">
                                        <h2>Product 6</h2>
                                    </div>
                                    <div class="price right">
                                        <label></label>
                                        <em class="item-price">$10,00</em>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="item product">
                            <a href="product/tu-producto-aqui-5">
                                <div class="thumbnails image">
                                    <img src="https://i.imgur.com/02NOJHI.jpg" alt="Tú producto aquí 5">
                                </div>
                                <div class="box topic-1">
                                    <div class="heading ellipsis">
                                        <h2>Product 5</h2>
                                    </div>
                                    <div class="price right">
                                        <label></label>
                                        <em class="item-price">$45,00</em>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  
    <div id="wrapp2">
        <div class="deals">
            <div class="carousels relative">
                <button class="carousel-left nav-btn"><i class="icon-arrow-left"><</i></button>
                <button class="carousel-right nav-btn"><i class="icon-arrow-right">></i></button>
                <div id="carousel" class="carousel">
                    <div class="slider">
                        <div class="item ads-store">
                            <div class="adsowners">
                                <a href="">
                                    <h4>¡Oferts!</h4>
                                    <h5>In the store MSShop</h5>
                                    <img src="https://img.joomcdn.net/181508ee57b71b20f26b4a8a14a79f142b9165af_176_176.png">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  
    <div id="wrapp3">
        <div class="deals">
            <div class="heading mini-title">
                <h2>New Product</h2> <div class="rule"></div>
            </div>
            <div class="carousels relative">
                <button class="carousel-left nav-btn"><i class="icon-arrow-left"><</i></button>
                <button class="carousel-right nav-btn"><i class="icon-arrow-right">></i></button>
                <div class="carousel">
                    <div class="slider">
                        <div class="item product category-info">
                            <div class="banner-info">
                                <a href="">
                                    <h3>Shopping Guide for Trending Styles</h3>
                                    <img src="https://img.alicdn.com/tfs/TB1ZXXNIgHqK1RjSZFkXXX.WFXa-300-320.jpg" style="width: 320px; height: 300px;">
                                    <span>Source Now</span>
                                </a>
                            </div>
                        </div>
                        <div class="item product">
                            <a href="product/tu-producto-aqui-8">
                                <div class="thumbnails image">
                                    <img src="https://i.imgur.com/02NOJHI.jpg" alt="Tú producto aquí 8">
                                </div>
                                <div class="box topic-1">
                                    <div class="heading ellipsis">
                                        <h2>Product 8</h2>
                                    </div>
                                    <div class="price right">
                                        <label></label>
                                        <em class="item-price">$2,00</em>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="item product">
                            <a href="product/tu-producto-aqui-7">
                                <div class="thumbnails image">
                                    <img src="https://i.imgur.com/02NOJHI.jpg" alt="Tú producto aquí 7">
                                </div>
                                <div class="box topic-1">
                                    <div class="heading ellipsis">
                                        <h2>Product 7</h2>
                                    </div>
                                    <div class="price right">
                                        <label></label>
                                        <em class="item-price">$3,00</em>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="item product">
                            <a href="product/tu-producto-aqui-6">
                                <div class="thumbnails image">
                                    <img src="https://i.imgur.com/02NOJHI.jpg" alt="Tú producto aquí 6">
                                </div>
                                <div class="box topic-1">
                                    <div class="heading ellipsis">
                                        <h2>Product 6</h2>
                                    </div>
                                    <div class="price right">
                                        <label></label>
                                        <em class="item-price">$10,00</em>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="item product">
                            <a href="product/tu-producto-aqui-5">
                                <div class="thumbnails image">
                                    <img src="https://i.imgur.com/02NOJHI.jpg" alt="Tú producto aquí 5">
                                </div>
                                <div class="box topic-1">
                                    <div class="heading ellipsis">
                                        <h2>Product 5</h2>
                                    </div>
                                    <div class="price right">
                                        <label></label>
                                        <em class="item-price">$45,00</em>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


Get this bounty!!!

#StackBounty: #javascript #jquery #froala quickInsertTags tag is not working in froala-editor

Bounty: 50

I and using froala editor and want to quickInsertTags plugin feature in my froala editor.

As per document, I need to include quick_insert.min.js to use quickInsertTags.

I have included this js file, but still it not showing option to insert div tag.

html

<div id="example"></div>

JS

var editor = new FroalaEditor('#example', {
      toolbarButtons: [['bold', 'italic', 'underline'], ['fontFamily', 'fontSize']],
      quickInsertEnabled: true,
      quickInsertTags: ['p', 'div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6']
});

JSFiddle


Get this bounty!!!

#StackBounty: #javascript #html #jquery #svg #fabricjs Fabric.js svg elements to pop up on click to be edited and then return to its pr…

Bounty: 50

I am developing an app in html5 and need at some point to make the paths from an svg to pop up when clicked in order to be edited on a closer view as thier real size is quite small and it will display on mobile screens. This is what I have done until now:

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es"><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8"><meta name="HandheldFriendly" content="true"><meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no, width=device-width"><meta name="viewport" content="width=device-width">
</head><body>
<div>
<svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 570 770" onload="makeDraggable(evt)">
 <defs><style> body { background: #fff;} svg { border-radius: 10px;} .fgcolor { fill: #fff; opacity: 1; stroke:#1a1a1a; stroke-width:1.5; } .selected { fill: #d50000; opacity: 1; stroke:#1a1a1a; stroke-width:1.5; } .selected2 { fill: #0d47a1; opacity: 1; stroke:#1a1a1a; stroke-width:1.5; } .selected3 { fill: #1a1a1a; opacity: 1; stroke:#1a1a1a; stroke-width:1.5; } .selected4 { fill: #0d47a1; opacity: 1; stroke:#d50000; stroke-width:1.5; }.trans { transition: all 2s ease-in-out 0.5s; } #circle1 #circle2 { z-index:1000;height: 100px;width: 100px;text-align: center;margin: 0 auto; } .grow:hover { transform-origin: 512px 110px;transform: scale(10.0);} .static { cursor: not-allowed; } .draggable, .draggable-group { cursor: move; }</style>
    <script type="text/javascript"><![CDATA[
      function makeDraggable(evt) {
        var svg = evt.target;
        svg.addEventListener('mousedown', startDrag);
        svg.addEventListener('mousemove', drag);
        svg.addEventListener('mouseup', endDrag);
        svg.addEventListener('mouseleave', endDrag);
        svg.addEventListener('touchstart', startDrag);
        svg.addEventListener('touchmove', drag);
        svg.addEventListener('touchend', endDrag);
        svg.addEventListener('touchleave', endDrag);
        svg.addEventListener('touchcancel', endDrag);
        var selectedElement, offset, transform,
            bbox, minX, maxX, minY, maxY, confined;
        var boundaryX1 = 10;
        var boundaryX2 = 560;
        var boundaryY1 = 10;
        var boundaryY2 = 760;
        function getMousePosition(evt) {
          var CTM = svg.getScreenCTM();
          if (evt.touches) { evt = evt.touches[0]; }
          return {
            x: (evt.clientX - CTM.e) / CTM.a,
            y: (evt.clientY - CTM.f) / CTM.d
          };
        }
        function startDrag(evt) {
          if (evt.target.classList.contains('draggable')) {
            selectedElement = evt.target;
            offset = getMousePosition(evt);
            // Make sure the first transform on the element is a translate transform
            var transforms = selectedElement.transform.baseVal;
            if (transforms.length === 0 || transforms.getItem(0).type !== SVGTransform.SVG_TRANSFORM_TRANSLATE) {
              // Create an transform that translates by (0, 0)
              var translate = svg.createSVGTransform();
              translate.setTranslate(0, 0);
              selectedElement.transform.baseVal.insertItemBefore(translate, 0);
            }
            // Get initial translation
            transform = transforms.getItem(0);
            offset.x -= transform.matrix.e;
            offset.y -= transform.matrix.f;
            confined = evt.target.classList.contains('confine');
            if (confined) {
                bbox = selectedElement.getBBox();
                minX = boundaryX1 - bbox.x;
                maxX = boundaryX2 - bbox.x - bbox.width;
                minY = boundaryY1 - bbox.y;
                maxY = boundaryY2 - bbox.y - bbox.height;
            }
          }
        }
        function drag(evt) {
          if (selectedElement) {
            evt.preventDefault();
            var coord = getMousePosition(evt);
            var dx = coord.x - offset.x;
            var dy = coord.y - offset.y;
            if (confined) {
                if (dx < minX) { dx = minX; }
                else if (dx > maxX) { dx = maxX; }
                if (dy < minY) { dy = minY; }
                else if (dy > maxY) { dy = maxY; }
            }
            transform.setTranslate(dx, dy);
          }
        }
        function endDrag(evt) {
          selectedElement = false;
        }
      }
    ]]> </script>
    <script type="application/ecmascript"> <![CDATA[

     var defaultAction = "task";

     function setAction(param) {
         defaultAction = param;
        }

        function click(evt) {
         if (evt.target.classList.contains("fgcolor")) {
         if (defaultAction == "circleschart") {
            hotCircleschartClick(evt.target);
         } else {
            hotTaskClick(evt.target);
            }
         }
        }

        function hotTaskClick(hot) {
            var str = hot.getAttribute("id");
            var hot_id = str.substring(1, str.length);

         if (hot.classList.contains('fgcolor')) {
            hot.classList.add('selected');
            }
        }
     ]]> </script></defs>
 <path id="bg" style="fill:#555;fill-opacity:1;fill-rule:nonzero;stroke:#1a1a1a;stroke-width:1;stroke-opacity:1" d="m 569.48439,0.51561093 0,768.96877907 -568.96877907,0 0,-768.96877907 z"/>
  <path id="circlesmask" style="fill:#f2f2f2;fill-opacity:1;fill-rule:nonzero;stroke:#1a1a1a;stroke-width:1.5;stroke-opacity:1" d="m 494.84341,141.33148 a 9.5804669,9.5804669 0 0 0 3.77981,-13.0109 9.5804669,9.5804669 0 0 0 -13.01092,-3.77981 9.5804669,9.5804669 0 0 0 -3.77978,13.01092 9.5804669,9.5804669 0 0 0 13.01089,3.77979 z m 1.99086,-1.2983 c 3.75292,-3.7878 3.79944,-9.90488 0.0548,-13.70535 l 8.46819,-8.34965 c 8.33458,8.49033 8.23285,22.12334 -0.30978,30.3914 z m 0.0915,-13.92778 c -3.83518,-3.70451 -9.95225,-3.67355 -13.70495,0.11906 l -8.45622,-8.36179 c 8.38404,-8.4415 22.0172,-8.51269 30.39291,-0.0756 z m -13.74675,-0.10709 c -3.75291,3.7878 -3.79945,9.90486 -0.0548,13.70536 l -8.46818,8.34965 c -8.3346,-8.49032 -8.23284,-22.12335 0.30978,-30.39141 z m -0.1842,13.84308 c 3.78702,3.75369 9.90405,3.80157 13.70533,0.0577 l 8.34729,8.47053 c -8.49206,8.33279 -22.12509,8.22809 -30.39133,-0.31635 z m 2.64893,-63.1438 a 9.5804669,9.5804669 0 0 0 -3.82845,12.99668 9.5804669,9.5804669 0 0 0 12.9967,3.82844 9.5804669,9.5804669 0 0 0 3.82842,-12.99669 9.5804669,9.5804669 0 0 0 -12.99667,-3.82843 z m -1.9957,1.29085 c -3.76706,3.77374 -3.83646,9.8906 -0.10601,13.70505 l -8.49937,8.31792 c -8.30277,-8.52144 -8.15005,-22.15398 0.42344,-30.39003 z m -0.1436,13.92734 c 3.82131,3.71883 9.93845,3.71075 13.70531,-0.0678 l 8.42488,8.39336 c -8.41555,8.41008 -22.04888,8.43028 -30.39297,-0.038 z m 13.74626,0.1585 c 3.76705,-3.77374 3.83647,-9.89058 0.10603,-13.70505 l 8.49934,-8.31793 c 8.30279,8.52144 8.15004,22.15399 -0.42345,30.39004 z m 0.23598,-13.84229 C 493.71373,74.46416 487.59692,74.3934 483.78167,78.123 l -8.31556,-8.50169 c 8.52317,-8.30097 22.15571,-8.14528 30.38994,0.43002 z"/>
  <g id="circles" onclick="javascript:click(evt);">
  <g id="circle1" class="trans grow">
    <path class="fgcolor" id="v1" d="M 497.48669,78.23199 C 493.71373,74.46416 487.59692,74.3934 483.78167,78.123 l -8.31556,-8.50169 c 8.52317,-8.30097 22.15571,-8.14528 30.38994,0.43002 z"/>
    <path class="fgcolor" transform-center-y="-0.035180283" transform-center-x="-9.0648938" d="m 497.25071,92.07428 c 3.76705,-3.77374 3.83647,-9.89058 0.10603,-13.70505 l 8.49934,-8.31793 c 8.30279,8.52144 8.15004,22.15399 -0.42345,30.39004 z" id="p1"/>
    <path class="fgcolor" d="m 483.50445,91.91578 c 3.82131,3.71883 9.93845,3.71075 13.70531,-0.0678 l 8.42488,8.39336 c -8.41555,8.41008 -22.04888,8.43028 -30.39297,-0.038 z" transform-center-x="-0.15829128" transform-center-y="9.0368236" id="pa1"/>
    <path class="fgcolor" transform-center-y="0.03518" transform-center-x="9.0648894" d="m 483.64805,77.98844 c -3.76706,3.77374 -3.83646,9.8906 -0.10601,13.70505 l -8.49937,8.31792 c -8.30277,-8.52144 -8.15005,-22.15398 0.42344,-30.39003 z" id="d1"/>
    <path class="fgcolor" d="m 485.64375,76.69759 a 9.5804669,9.5804669 0 0 0 -3.82845,12.99668 9.5804669,9.5804669 0 0 0 12.9967,3.82844 9.5804669,9.5804669 0 0 0 3.82842,-12.99669 9.5804669,9.5804669 0 0 0 -12.99667,-3.82843 z" id="o1"/>
  </g>
  <g id="circle2" class="trans grow">
    <path class="fgcolor" id="v2" d="m 482.99482,139.84139 c 3.78702,3.75369 9.90405,3.80157 13.70533,0.0577 l 8.34729,8.47053 c -8.49206,8.33279 -22.12509,8.22809 -30.39133,-0.31635 z"/>
    <path class="fgcolor" id="p2" d="m 483.17902,125.99831 c -3.75291,3.7878 -3.79945,9.90486 -0.0548,13.70536 l -8.46818,8.34965 c -8.3346,-8.49032 -8.23284,-22.12335 0.30978,-30.39141 z" transform-center-x="-9.0648938" transform-center-y="-0.035180283"/>
    <path class="fgcolor" id="pa2" transform-center-y="9.0368236" transform-center-x="-0.15829128" d="m 496.92577,126.1054 c -3.83518,-3.70451 -9.95225,-3.67355 -13.70495,0.11906 l -8.45622,-8.36179 c 8.38404,-8.4415 22.0172,-8.51269 30.39291,-0.0756 z"/>
    <path class="fgcolor" id="d2" d="m 496.83427,140.03318 c 3.75292,-3.7878 3.79944,-9.90488 0.0548,-13.70535 l 8.46819,-8.34965 c 8.33458,8.49033 8.23285,22.12334 -0.30978,30.3914 z" transform-center-x="9.0648894" transform-center-y="0.03518"/>
    <path class= "fgcolor" id="o2" d="m 494.84341,141.33148 a 9.5804669,9.5804669 0 0 0 3.77981,-13.0109 9.5804669,9.5804669 0 0 0 -13.01092,-3.77981 9.5804669,9.5804669 0 0 0 -3.77978,13.01092 9.5804669,9.5804669 0 0 0 13.01089,3.77979 z"/>
  </g>
  </g>
  <path class="static" id="red" style="opacity:1;fill:#d50000;fill-opacity:1;fill-rule:nonzero;stroke:#1a1a1a;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" d="m 541.2398,608.99416 c 1e-5,12.28836 -9.96168,22.25005 -22.25005,22.25004 -12.28836,10e-6 -22.25004,-9.96168 -22.25004,-22.25004 10e-6,-12.28836 9.96169,-22.25002 22.25004,-22.25002 12.28836,0 22.25005,9.96166 22.25005,22.25002 z"/>
   <path class="static" style="fill:#0000ff;fill-opacity:1;stroke:#1a1a1a;stroke-width:2.73460841;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 394.64632,689.14759 -27.8083,-28.0013 m 27.90481,0.0965 -28.0013,27.80834 M 402.37488,675.039 c 0,11.94741 -9.68528,21.6327 -21.63269,21.6327 -11.94742,10e-6 -21.63271,-9.68528 -21.63271,-21.6327 0,-11.94741 9.6853,-21.6327 21.63271,-21.63269 11.9474,0 21.63269,9.68529 21.63269,21.63269 z"/>
</svg>
</div>
</body></html>

I need integrate this with jQuery and fabric as the rest of the project use those libraries.

Also need that the triggering of the element to pop up would be mouse click/touch-screen events.

The element should fill the whole superior half of the screen no matter the position it was before and after edited return to the exact same position on another mouse/touch event, or maybe via a close/save button appended to the pop up.

The svg objects on the inferior part are going to act as menu items. I need at least the red and another in blue to act as color pickers where the user touch one of them and then apply that color to the editable items above in the screen once they are poped up to be edited.

There will be a lot of this items on the canvas. If I just placed two of them here was for the obvious reason.

I’ve added more code from Peter Collingridge’s tutorial about draggable svg elements.

If someone knows how to solve it, or at least a part of it, I will be very thankfull.


Get this bounty!!!

#StackBounty: #javascript #html #jquery #css #html2canvas How to download customisable color change box as image with the background im…

Bounty: 50

I have a box that can change color once you select the box and then select the color.

However, there is also a background image that shows the outline of the box. I have used HTML2canvas and jquery as libraries so I can download the customise color change box as an image, but it could only be downloaded locally if the image is hidden – as shown on the CSS.

My question is, how do I download the customisable color change box with the background outline box image? – or – Is there an alternative way to save the background image and the SVG locally with download button?

//////// carousel ////////

let sliderImages = document.querySelectorAll('.slide'),
  arrowLeft = document.querySelector('#arrow-left'),
  arrowRight = document.querySelector('#arrow-right'),
  current = 0;

//Clear all images
function reset() {
  for (let i = 0; i < sliderImages.length; i++) {
    sliderImages[i].style.display = 'none';
  }
}
// initialize slider
function startSlide() {
  reset();
  sliderImages[0].style.display = "block";
}

//show previous
function slideLeft() {
  reset();
  sliderImages[current - 1].style.display = "block";
  current--;
}

//show next
function slideRight() {
  reset();
  sliderImages[current + 1].style.display = "block";
  current++;
}

//left arrow click
arrowLeft.addEventListener('click', function() {
  if (current === 0) {
    current = sliderImages.length;
  }
  slideLeft();
});

//right arrow click
arrowRight.addEventListener('click', function() {
  if (current === sliderImages.length - 1) {
    current = -1;
  }
  slideRight();
});

startSlide();

const overlays = [];
document.querySelectorAll(".product").forEach(function(path) {
  path.onclick = chooseProduct;
})

function chooseProduct(e) {
  overlays.push(e.target);
  overlays.forEach((overlay) => overlay.classList.add('highlight'));
}

//////// remove highlight when clicking outside of image ////////
var removeHighlight = function(e) {
  var products = document.querySelectorAll('.product');

  if (!e.target.classList.contains('product') && !e.target.classList.contains('color')) {
    overlays.length = 0;
    document.querySelectorAll('.product').forEach(function(prod) {
      prod.classList.remove('highlight');
    });
  }
}
document.onclick = removeHighlight;

//////// remove highlight of a specific shape ////////
function chooseProduct(e) {
  for (let i = 0; i < overlays.length; i += 1) {
    let currentOverlay = overlays[i];
    if (currentOverlay.isSameNode(e.target)) {
      overlays.splice(i, 1);
      e.target.classList.remove('highlight')
      return;
    }
  }
  overlays.push(e.target);
  overlays.forEach((overlay) => overlay.classList.add("highlight"));
}

//////// get and set colours ////////

// Click on a color
var el = document.getElementsByClassName("color");
for (var i = 0; i < el.length; i++) {
  el[i].onclick = changeColor;
}

function changeColor(e) {
  // get the hex color
  let hex = e.target.getAttribute("data-hex");
  // set the hex color
  overlays.forEach((overlay) => overlay.style.fill = hex);
}

$(document).ready(function() {
  function saveScreenshot(canvas) {
    var downloadLink = document.createElement('a');
    downloadLink.download = 'download.jpg';
    canvas.toBlob(function(blob) {
      downloadLink.href = URL.createObjectURL(blob)
      downloadLink.click();
    });
  }

  $(".download-btn").on("click", function(e) {
    e.preventDefault();
    html2canvas(document.querySelector(".download-container"), {
      scrollX: 0,
      scrollY: 0
    }).then(function(canvas) {
      var image = canvas.toDataURL('image/jpeg');
      document.getElementById("created-element").src = image;
      $(this).attr('href', image);
      saveScreenshot(canvas);
    });
  });
});
.grid-container {
  display: grid;
  grid-template-columns: auto 5% 1fr auto 1fr;
  grid-template-rows: 128px auto 1fr auto auto auto auto 100px;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas: 
    "header . . . ." 
    "main main main color-select color-select" 
    "main main main color-select color-select" 
    "about about about about about" 
    "howto howto howto howto howto" 
    "faqs faqs faqs faqs faqs" 
    "social social social social social" 
    "footer footer footer footer footer";
}

.header {
  grid-area: header;
}

.logo {
  display: inline-block;
  padding-top: 20px;
  padding-left: 65px;
}

.navbar {
  display: inline-block;
  padding-top: 50px;
  padding-right: 20px;
  font-family: 'Roboto Condensed', sans-serif;
  line-height: 38px;
  font-weight: 400;
  font-size: 18px;
  float: right;
}

.nav-link {
  margin: 18px;
  color: #212529;
  text-decoration: none;
}

.main {
  grid-area: main;
  background-color: #f8f8f8;
  padding-top: 20px;
  padding-bottom: 50px;
  display: flex;
  text-align: center;
  position: relative;
  margin-top: 2.5px;
  margin-left: 78px;
}

#slider,
.wrap,
.slide-content {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.slide-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.arrow {
  cursor: pointer;
  position: absolute;
  top: 101%;
  width: 60%;
  height: 0;
  z-index: 1;
  font-size: 20px;
  color: #cccccc;
}

#arrow-left {
  left: 0;
}

#arrow-right {
  right: 0;
}


/* Caption text */

.text {
  position: relative;
  color: #212529;
  font-size: 18px;
  top: 28px;
  width: 100%;
  text-align: center;
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 400;
}

.lion-number {
  color: #8f8f8f;
}

.color-select {
  display: flex;
  align-items: center;
  grid-area: color-select;
  background-color: #f8f8f8;
  margin-top: 2.5px;
  margin-right: 78px;
  padding: 10px;
}

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

#container {
  width: 100%;
  height: auto;
}

#product-svg {
  position: absolute;
  z-index: 2;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  mix-blend-mode: multiply;
  width: 85%;
  height: auto;
}

path {
  fill: #8f8f8f;
}

.background-image {
  position: relative;
  z-index: 1;
  width: 85%;
  height: auto;
}

[data-test] {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: start;
  padding-left: 15px;
  padding-right: 15px;
}

[data-test] span.color {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 60px;
  padding-bottom: 9px;
}

[data-test] span.color span {
  height: 23px;
  width: 20px;
  background: var(--color);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  margin-bottom: -6px;
}

[data-test] span.color span:first-child {
  margin-left: 1px;
}

.highlight {
  stroke-width: 10px;
  stroke: #000;
}

img {
  visibility: hidden;
}

button {
  font-size: 1.25em;
  padding: 1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js" integrity="sha512-n/4gHW3atM3QqRcbCn6ewmpxcLAHGaDjpEBu4xZd47N0W2oQ+6q7oc3PXstrJYXcbNU1OHdQ1T7pAP+gi5Yu8g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.2.2/html2canvas.js" integrity="sha512-Alb3nvf6wRVUhs6H8foMA8fuWAKFFretiYkk2WbrMSbAtTtNBOjKLbDIagmFVypIi4wT1pRhHwz+R/W7nU31wg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div class="grid-container">
  <header class="header">
  
    <img class="logo" src="logo.png" alt="">

    <nav class="navbar">
      <a href=about.html class="nav-link">About</a>
      <a href=howto.html class="nav-link">How to</a>
      <a href=faqs.html class="nav-link">FAQs</a>
      <a href=contact.html class="nav-link">Contact</a>
    </nav>

  </header>
  
  
  
</div>
</div>



  <main class="main">

    <div class="wrap">
      <div id="arrow-left" class="arrow"><span>❮</span></div>
      <div id="arrow-right" class="arrow"><span>❯</span></div>
      <div id="slider">

        <div class="slide slide1">
          <div class="slide-content">
            <div id="container">
              <div class="download-container">
                <svg id="product-svg" viewBox="0 0 256 256">
                  <path id="box1" class="product" d="M24 130.25L24 235L233 235L233 25.5L24 25.5L24 130.25Z" />
                </svg>

                <img class="background-image" src="https://images.vexels.com/media/users/3/139342/isolated/lists/61cddf9cfe50f4baaa8f472c253d1cb4-basic-square-outline.png" alt="">
              </div>
            </div>

            <div class="text">image1</div>
          </div>
        </div>

        <div class="slide slide1">
          <div class="slide-content"
            <div id="container">
              <div class="download-container">
                <svg id="product-svg" viewBox="0 0 256 256">
                  <path id="box2" class="product" d="M24 130.25L24 235L233 235L233 25.5L24 25.5L24 130.25Z" />
                </svg>

                <img class="background-image" src="https://images.vexels.com/media/users/3/139342/isolated/lists/61cddf9cfe50f4baaa8f472c253d1cb4-basic-square-outline.png" alt="">
              </div>
            </div>

            <div class="text">image2</div>
          </div>
        </div>

        <button class="download-btn">Download element!</button>
        <img src="" id="created-element" />

  </main>

  <section class="color-select">
    <div data-test>
      <span class="color red">
        <span class="color-selected" style="--color: #ff6666 " data-hex="#ff6666"></span>
      </span>
    </div>
  </section>

</div>


Get this bounty!!!

#StackBounty: #javascript #jquery #mxgraph How to determine which side of connection is connected in mxgraph

Bounty: 100

i have problem something like this a decision has 3 side Input,Yes,No i want to determine the arrow is connected to which of them

here is how i’m going to connect

enter image description here

Connected from Yes

enter image description here

Question: how to know connection is connected to whether Input,Yes,No sides

Note: if problem can be solved with builtin Rhombus then solution is most welcome

here is codepen link:
https://codepen.io/eabangalore/pen/eYvVGOg?editors=1010

here is code:

var graph;
function initCanvas(){
  graph = new mxGraph(document.getElementById('graph-wrapper'));
  var graphStr = `<mxGraphModel><root><mxCell id="0"/><mxCell id="1" parent="0"/><div xmlns="http://www.w3.org/1999/xhtml" data-v-38092c6f="" data-id="60f14502305ed03160da1fd0" data-name="Upload" class="workflow-bins-item" draggedattached="true" triggerortaskid="8c47f506-d34f-4851-a31a-c66facd957f2" style="background: rgb(1, 98, 247); color: white;" id="2">Upload<mxCell xmlns="" style="fillColor=none;strokeColor=none" vertex="1" customWorkflowType="bins" cell_id="60f14502305ed03160da1fd0" triggerOrTaskId="8c47f506-d34f-4851-a31a-c66facd957f2" parent="1"><mxGeometry x="80" y="90" width="145" height="59" as="geometry"/></mxCell></div><div xmlns="http://www.w3.org/1999/xhtml" class="decision-rhombus" data-id="c51a6443-afcc-8705-6557-b1748094c920" draggedattached="true" triggerortaskid="null" id="3"><span  value="Decision" class="decision-rhombus-name--center show-rhombus">Decision</span><span title="Input" class="decision-rhombus--left decision-color show-rhombus">Input</span><span title="Yes" class="decision-rhombus--right decision-color show-rhombus">Yes</span><span title="No" class="decision-rhombus--bottom decision-color show-rhombus">No</span><mxCell xmlns="" style="fillColor=none;strokeColor=none" vertex="1" customWorkflowType="decisions" cell_id="c51a6443-afcc-8705-6557-b1748094c920" parent="1"><mxGeometry x="430" y="83" width="162" height="73" as="geometry"/></mxCell></div></root></mxGraphModel>
`
  
  var doc = mxUtils.parseXml(graphStr);
    var codec = new mxCodec(doc);
  codec.decode(doc.documentElement, graph.getModel());
  graph.model.endUpdate();
  // render as HTML node always. You probably won't want that in real world though
  graph.convertValueToString = function(cell) {
    return cell.value;
  }
  
  graph.setConnectable(true);
  graph.setAllowDanglingEdges(false);
  
  graph.refresh();
}
#graph-wrapper{
  background: #333;
  //background:gray;
    width: 100%;
    height: 528px;
}

   .decision-rhombus {
        background: gray;
        clip-path: polygon(0 50%, 50% 100%,100% 50%,50% 0);
        width: 162px;
        display: inline-block;
        margin: 5px;
        height: 73px;
        position: relative !important;
        color: #fff;
        font-size: 11px;
        cursor: default;
    }

    .decision-rhombus > span{
      position:absolute;
    }

    .decision-rhombus--left{
        left: 17px;
        top: 30px;
    }

    .decision-rhombus--right{
        left: 137px;
        top: 29px;
    }

    .decision-rhombus--bottom{
        left: 76px;
        top: 52px;
    }
    .decision-rhombus-name--center {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 90px; 
        height: 16px; 
        position: absolute;
        border: none; 
        background: transparent; 
        color: #fff; 
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        user-select: none;
        outline: none;
        font-size: 12px;
    }
    .hide-rhombus{
        display: none;
    }
    .show-rhombus{
        display: inherit;
    }
    .decision-color{
        color: #d1d1d1;
    }

.workflow-bins-item {
/*     border-radius: 28px; */
    justify-content: center;
/*     padding-top: 5px; */
    display: flex;
    /* margin-left: 20px; */
/*     margin-top: 20px; */
/*     padding: 3px 17px; */
    min-height: 35px;
    /* min-width: 34px; */
    min-width: 111.203px;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    max-width: 111.203px;
    white-space: pre-wrap;
     background: gray !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--
  Copyright (c) 2006-2013, JGraph Ltd
  
-->
<html>
<head>
    <title>Rhombus with connection input,yes,no</title>

    <!-- Sets the basepath for the library if not in same directory -->
      <script type="text/javascript">
        mxBasePath = 'https://jgraph.github.io/mxgraph/javascript/src';
      </script>

      <!-- Loads and initializes the library -->
      <script type="text/javascript" src="https://jgraph.github.io/mxgraph/javascript/src/js/mxClient.js"></script>

    <!-- Example code -->
</head>

<!-- Calls the main function after the page has loaded. Container is dynamically created. -->
<body onload="initCanvas()">
  
     <div id="graph-wrapper">

     </div>
</body>
</html>

Please help me thanks in advance!!


Get this bounty!!!

#StackBounty: #javascript #jquery #three.js #aframe #webvr A-frame <a-ring> empty in middle

Bounty: 50

I am creating a scene using A-Frame and I am having a problem where I am using the A-Frame super hands component to move different objects with the controllers in VR and whenever I add a static-body to an <a-ring> (static-body meaning that the cubes can’t pass through the object) everything works fine except for the fact that I cannot throw the cubes through the middle of the ring.

What I want to happen is the boxes should be thrown through the center of the ring but when touching the outer edges of the ring they should interact with physics and bounce backwards.

Currently, when I throw the cubes through the center of the ring, there is some sort of invisible field there that prevents obstacles from passing through the middle of the ring even though there is enough space there or objects can pass through the solid part of the ring.

Current code: (only able to move objects with a VR headset)

<html>
  <head>
    <title>A-Frame Super Hands Component - 6DOF With Physics</title>
    <!-- Replace "../build.js" with the super-hands and
         A-Frame distributions to run : -->
    <script src="../build.js"></script>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script> 
    <script src="https://unpkg.com/super-hands/dist/super-hands.min.js"></script> 
    <script src="https://cdn.jsdelivr.net/gh/n5ro/aframe-physics-system@v4.0.1/dist/aframe-physics-system.js"></script>
    <script src="https://unpkg.com/aframe-event-set-component@^4.1.1/dist/aframe-event-set-component.min.js"></script>
    <script src="https://unpkg.com/aframe-physics-extras/dist/aframe-physics-extras.min.js"></script>
    <script src="https://rawgit.com/feiss/aframe-environment-component/master/dist/aframe-environment-component.min.js"></script>
    <script>
      //color randomizer
      AFRAME.registerComponent('color-randomizer', {
        play: function () {
          this.el.addEventListener('drag-drop', function (evt) {
            evt.detail.dropped.setAttribute('material', 'color',
              '#'+(Math.random()*0xFFFFFF<<0).toString(16))
            // color randomizer credit: http://stackoverflow.com/questions/1484506/random-color-generator-in-javascript#comment6801353_5365036
          })
        }
      })
    </script>
    <link rel="stylesheet" type="text/css" href="../assets/examples.css">
  </head>
  <body>
    <a-scene physics environment="preset: tron; shadow: true">
      <a-assets>
        <img id="colortransform" src="./colortransform.png" />
        <a-mixin id="cube" geometry="primitive: box; width: 0.33; height: 0.33; depth: 0.33"
                 hoverable grabbable stretchable draggable
                 event-set__hoveron="_event: hover-start; material.opacity: 0.7; transparent: true"
                 event-set__hoveroff="_event: hover-end; material.opacity: 1; transparent: false"
                 dynamic-body shadow></a-mixin>

        <a-mixin id="controllers-right" vive-controls="hand: right"
                 oculus-touch-controls="hand: right"
                 windows-motion-controls="hand: right"
                 gearvr-controls daydream-controls
                 oculus-go-controls>
        </a-mixin>
        <a-mixin id="controllers-left" vive-controls="hand: left"
                 oculus-touch-controls="hand: left"
                 windows-motion-controls="hand: left">
        </a-mixin>
        <a-mixin id="point" raycaster="showLine: true; objects: .cube"
                 collision-filter="collisionForces: false"
                 static-body="shape: sphere; sphereRadius: 0.001"
                 super-hands="colliderEvent: raycaster-intersection;
                              colliderEventProperty: els;
                              colliderEndEvent:raycaster-intersection-cleared;
                              colliderEndEventProperty: clearedEls;"></a-mixin>
      </a-assets>
      <a-entity>
        <a-camera positon="0 1.6 0"></a-camera>
        <a-entity id="rhand" mixin="controllers-right point"></a-entity>
        <a-entity id="lhand" mixin="controllers-left point"></a-entity>
      </a-entity>
      <a-entity class="cube" mixin="cube" position="0 0.265 -1" material="color: red"></a-entity>
      <a-entity class="cube" mixin="cube" position="0 0.265 -0.5" material="color: red"></a-entity>
      <a-entity class="cube" mixin="cube" position="-1 0.265 -1" material="color: blue"></a-entity>
      <a-entity class="cube" mixin="cube" position="-1 0.265 -0.5" material="color: blue"></a-entity>
      <a-entity class="cube" mixin="cube" position="1 0.265 -1" material="color: green"></a-entity>
      <a-entity class="cube" mixin="cube" position="1 0.265 -0.5" material="color: green"></a-entity>
      <a-entity class="transformer" mixin="transformer" position = "0 1.6 -1"
                material="src:#colortransform" shadow></a-entity>

      <!-- ground collider keeps objets from falling -->
      <a-box static-body width=100 height=0.001 depth=100 visible="false"></a-box>

      <a-ring static-body color="teal" radius-inner="1.7" radius-outer="2" position="0 0.4 -5" rotation="-90 0 0"></a-ring>
    </a-scene>

  </body>
</html>


Get this bounty!!!

#StackBounty: #javascript #jquery #three.js #aframe #webvr A-frame multiple animations with camera

Bounty: 50

I have some code for a camera using A-frame (https://aframe.io) and I’m wondering how I can add multiple sequential animations. I would like it so that when my first animation is finished, another animation will trigger and the camera will move 5 spaces to the left after the first animation is complete. How can this be done? My current code:

<a-entity id="rig" position="0 1.6 0" animation="property: position; delay: 2000; dur: 7000; easing: linear; to: 0 1.6 -25">
  <a-entity id="camera" wasd-controls camera look-controls></a-entity>
</a-entity>


Get this bounty!!!

#StackBounty: #javascript #html #jquery #css #graph Beeswarm plot not collapsing

Bounty: 250

I’m trying to make my own beeswarm plot, which is a plot of points across one dimension where the points move up as needed in order to not overlap with other points.

Mine has labels for each point, and I’m trying to work out the javascript to move them up from the baseline only if they collide with a previous point. However, they’re moving up regardless of if they collide or not.

Desired behavior: In the first example (depending on your screen width) ● Juliet Francis should be down at the baseline instead of way up near the top, because it can exist at the baseline without colliding with any preceding points (ordered from right to left).

I’ve tested the collision function, and that seems to be working fine. The problem seems to be either in swarm() or collidesAll() functions.

I’ve been poking at this for a couple days and haven’t been able to get it working. A second pair of eyes would be appreciated.

$(function() {
  
  let $graphs = $('.graph')
  let $firstSetOfNames = $('.graph:first-child .graph-dd')
  
  const setup = () => {
    let longest = 0
    $firstSetOfNames.each(function() {
      longest = ($(this).width() > longest) ? $(this).width() : longest
    })
    $graphs.css('padding-right', longest + 'px')
  }
  
  const collides = ($e1, $e2) => {
    let e1x1 = $e1.offset().left
    let e1x2 = e1x1.x1 + $e1.outerWidth( true )
    let e2x1 = $e2.offset().left
    let e2x2 = e2x1.x1 + $e2.outerWidth( true )
    let x = ((e1x1 < e2x1) && (e2x1 < e1x2)) || ((e2x1 < e1x1) && (e1x1 < e2x2))
    let y = parseInt($e1.css('--y'), 10) === parseInt($e2.css('--y'), 10)
    return !!(x || y)
  }
  
  const collidesAll = ($people, $person, j) => {
    for (let i = 0; i < j; i++) {
      if (collides($person, $people.eq(i))) {
        return true
      }
    }
    return false
  }
  
  const swarm = () => {
    $graphs.each(function(i) {
      let $graph = $(this)
      let $people = $($graph.find('.graph-dd').get().reverse())
      $people.each(function(j) {
        let $person = $(this)
        let n = 1
        if (0 === j) {
          $person.css('--y', 1)
        } else {
          do {
            $person.css('--y', n++)
          } while (collidesAll($people, $person, j))
          $graph.css('--yMax', n)
        }
      })
    })
  }
  
  setup()
  swarm()
  
})
.graph {
  margin: 2rem;
  padding: calc(calc(var(--yMax, 0) * 1.1em) + 1rem) 1rem 1rem;
  border: 1px solid black;
  overflow: hidden;
}

.graph-dl {
  position: relative;
  display: flex;
  margin: 0;
  justify-content: space-between;
}
.graph-dl::before {
  content: "";
  position: absolute;
  display: block;
  height: 1px;
  top: calc(50% - 0.5px);
  left: 0;
  right: 0;
  background: gray;
  z-index: -1;
}

.graph-dt {
  background: black;
  width: 1px;
  height: 1em;
  border: 0.5em solid white;
  margin: 0 -0.5em;
}
.graph-dt span {
  display: none;
}

.graph-dd {
  position: absolute;
  display: block;
  top: 0.5em;
  margin: 0 0 0 calc(-0.5ex - 1px);
  left: calc(var(--percent) * 1%);
  white-space: nowrap;
  transform: translateY(calc(var(--y, 0) * -1.1em));
  transition: transform 0.3s;
}
.graph-dd::before {
  content: "";
  display: inline-block;
  background: blue;
  width: 1ex;
  height: 1ex;
  vertical-align: baseline;
  border-radius: 100%;
  margin-right: 0.2em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<figure class="graph">
  <dl class="graph-dl">
    <dt class="graph-dt"><span>0</span></dt>
    <dd class="graph-dd" data-value="9" style="--percent: 9; --y: 1;">Zaccaria Osmant</dd>
    <dt class="graph-dt"><span>10</span></dt>
    <dd class="graph-dd" data-value="11" style="--percent: 11; --y: 1;">Nelli Dunge</dd>
    <dd class="graph-dd" data-value="12" style="--percent: 12; --y: 1;">Ethelind Evers</dd>
    <dd class="graph-dd" data-value="16" style="--percent: 16; --y: 1;">Juliet Francis</dd>
    <dt class="graph-dt"><span>20</span></dt>
    <dt class="graph-dt"><span>30</span></dt>
    <dt class="graph-dt"><span>40</span></dt>
    <dd class="graph-dd" data-value="48" style="--percent: 48; --y: 1;">Myles Burdoun</dd>
    <dt class="graph-dt"><span>50</span></dt>
    <dd class="graph-dd" data-value="55" style="--percent: 55; --y: 1;">Gregory Beade</dd>
    <dt class="graph-dt"><span>60</span></dt>
    <dd class="graph-dd" data-value="60" style="--percent: 60; --y: 1;">Trenna Vigne</dd>
    <dd class="graph-dd" data-value="61" style="--percent: 61; --y: 1;">Dulcia Koubu</dd>
    <dt class="graph-dt"><span>70</span></dt>
    <dd class="graph-dd" data-value="70" style="--percent: 70; --y: 1;">Amberly Wrightham</dd>
    <dd class="graph-dd" data-value="73" style="--percent: 73; --y: 1;">Barney Rawstorn</dd>
    <dt class="graph-dt"><span>80</span></dt>
    <dt class="graph-dt"><span>90</span></dt>
    <dd class="graph-dd" data-value="91" style="--percent: 91; --y: 1;">Nealson Helstrip</dd>
    <dd class="graph-dd" data-value="92" style="--percent: 92; --y: 1;">Asa Langwade</dd>
    <dd class="graph-dd" data-value="93" style="--percent: 93; --y: 1;">Malvin Imlaw</dd>
    <dd class="graph-dd" data-value="96" style="--percent: 96; --y: 1;">Joanie Clooney</dd>
    <dt class="graph-dt"><span>100</span></dt>
    <dd class="graph-dd" data-value="100" style="--percent: 100; --y: 1;">Kristo Biskupski</dd>
  </dl>
</figure>
<figure class="graph">
  <dl class="graph-dl">
    <dt class="graph-dt"><span>0</span></dt>
    <dt class="graph-dt"><span>10</span></dt>
    <dt class="graph-dt"><span>20</span></dt>
    <dt class="graph-dt"><span>30</span></dt>
    <dt class="graph-dt"><span>40</span></dt>
    <dd class="graph-dd" data-value="44" style="--percent: 44; --y: 1;">Nelli Dunge</dd>
    <dd class="graph-dd" data-value="48" style="--percent: 48; --y: 1;">Myles Burdoun</dd>
    <dt class="graph-dt"><span>50</span></dt>
    <dd class="graph-dd" data-value="51" style="--percent: 51; --y: 1;">Zaccaria Osmant</dd>
    <dt class="graph-dt"><span>60</span></dt>
    <dd class="graph-dd" data-value="61" style="--percent: 61; --y: 1;">Trenna Vigne</dd>
    <dd class="graph-dd" data-value="61" style="--percent: 61; --y: 1;">Dulcia Koubu</dd>
    <dd class="graph-dd" data-value="65" style="--percent: 65; --y: 1;">Ethelind Evers</dd>
    <dt class="graph-dt"><span>70</span></dt>
    <dd class="graph-dd" data-value="70" style="--percent: 70; --y: 1;">Amberly Wrightham</dd>
    <dd class="graph-dd" data-value="73" style="--percent: 73; --y: 1;">Barney Rawstorn</dd>
    <dd class="graph-dd" data-value="74" style="--percent: 74; --y: 1;">Kristo Biskupski</dd>
    <dd class="graph-dd" data-value="75" style="--percent: 75; --y: 1;">Joanie Clooney</dd>
    <dd class="graph-dd" data-value="77" style="--percent: 77; --y: 1;">Juliet Francis</dd>
    <dd class="graph-dd" data-value="77" style="--percent: 77; --y: 1;">Gregory Beade</dd>
    <dd class="graph-dd" data-value="79" style="--percent: 79; --y: 1;">Malvin Imlaw</dd>
    <dt class="graph-dt"><span>80</span></dt>
    <dd class="graph-dd" data-value="85" style="--percent: 85; --y: 1;">Asa Langwade</dd>
    <dt class="graph-dt"><span>90</span></dt>
    <dd class="graph-dd" data-value="91" style="--percent: 91; --y: 1;">Nealson Helstrip</dd>
    <dt class="graph-dt"><span>100</span></dt>
  </dl>
</figure>

Or view in CodePen with Pug and Sass instead.


Get this bounty!!!

#StackBounty: #javascript #jquery #datatables Why jQuery data table does not export date correctly when month is two digit in laravel w…

Bounty: 50

I want to get export data as an EXCEL file exactly as shown in the view, it works, but did not export date correctly, I tried like below:

 $('#get_hourly_report').click(function () {

        var id = $('#teacher').val();
        var first_date = $('#jalali-datepicker3').val();
        var second_date = $('#jalali-datepicker4').val();
        $(".h_report_icon").addClass('fa fa-spinner fa-spin');
        $.ajax({
            method: "get",
            url: "attendance/getTeacherAttendanceReport/",
            data: {
                'id': id,
                'f_date': first_date,
                's_date': second_date
            },
            success: function (data) {
                $.fn.dataTable.moment('DD/MM/YYYY');
                table = $('#example2').DataTable({

                    destroy: true,
                    "bPaginate": false,
                    dom: 'Bfrtip',
                    bFilter: false,
                    buttons: [
                        {
                            extend: 'excelHtml5',
                            footer: true,
                            customize: (xlsx, config, dataTable) => {
                                let sheet = xlsx.xl.worksheets['sheet1.xml'];
                                let footerIndex = $('sheetData row', sheet).length;
                                let $footerRows = $('tr', dataTable.footer());

                                // If there are more than one footer rows
                                if ($footerRows.length > 1) {
                                    // First header row is already present, so we start from the second row (i = 1)
                                    for (let i = 1; i < $footerRows.length; i++) {
                                        // Get the current footer row
                                        let $footerRow = $footerRows[i];

                                        // Get footer row columns
                                        let $footerRowCols = $('th', $footerRow);

                                        // Increment the last row index
                                        footerIndex++;

                                        // Create the new header row XML using footerIndex and append it at sheetData
                                        $('sheetData', sheet).append(`
                                                    <row r="${footerIndex}">
                                                      ${$footerRowCols.map((index, el) => `
                                                        <c t="inlineStr" r="${String.fromCharCode(65 + index)}${footerIndex}" s="2">
                                                          <is>
                                                            <t xml:space="preserve">${$(el).text()}</t>
                                                          </is>
                                                        </c>
                                                      `).get().join('')}
                                                    </row>
                                                  `);
                                    }
                                }
                            }
                        }
                    ],
                    "processing": true,
                    data: data.teacherAttendanceReport,
                    columns: [
                        {
                            title: 'شماره', render: function (data, type, row, meta) {
                                return meta.row + meta.settings._iDisplayStart + 1;
                            }
                        },
                        {title: 'نام کارمند', data: 'first_name'},
                        {title: 'روز هفته', data: 'persian_name'},
                        {title: 'ماه', data: 'month_name'},
                        {title: 'تاریخ مکمل', data: 'date'},
                        {title: 'ساعت درسی', data: 'full_time'},
                        {title: 'حالت حاضری', data: 'as_persian_name'},

                    ],


                });
                $(".h_report_icon").removeClass('fa fa-spinner fa-spin');
                $('#h_present').html(data.present)
                $('#h_absent').html(data.absent)


            },
            error: function () {

            }
        });
    });

When I take export as an EXCEL file, if the date is like 1400-2-15 the result is as expected. but if the date is like 1400-02-13 then it gets export like ######.

I want it to be like 1400-02-13, If anyone knows where is the problem, please help me!


Get this bounty!!!

#StackBounty: #javascript #jquery #datepicker #jquery-ui-datepicker Highlight specific date when datepicker shown

Bounty: 200

I have this simple datepicker jQuery, and in my application my users can go back to the past, but not future. I want to show the current day base on the date param in the url browser.

Let’s say

var url_string = window.location.href;
var url        = new URL(url_string);
var dateParam  = url.searchParams.get("date"); <<----- current date

I have

$(".clock").click(function() {

    $( "#expiryDate" ).datepicker('setDate', date); <<---- Note here 

    $("#expiryDate").datepicker({
        dateFormat: 'yy-mm-dd',
        defaultDate: date,
        showAnim: "fold",
        gotoCurrent: true,
        maxDate: 0,
        onSelect: function() { 

            var dateSelected = $(this).datepicker('getDate'); 
            dateSelected = moment(dateSelected).format('YYYY-MM-DD');


            // $( "#expiryDate" ).datepicker('setDate', dateSelected);

            playSound('forward');

            if(dateParam == null) {
                var url = document.location.href+"&date="+dateSelected;
            }else {
                var url = document.location.href;
                url = url.replace(dateParam,dateSelected);

            }

            document.location = url;
        }
    });


    $('#expiryDate').datepicker('show');
});

Even if today is 05/06/2021, users can go back to the past, and see what happened on that day. So when user selected 02/03/2021. I want to highlight that date 02/03/2021. It seems working only if I clicked on my date twice.

Notice only second clicked 3 started to highlight!

How do I make it highlight on first clicked ?


Get this bounty!!!