JSFiddle - React, Tailwind, and code Playground

by silpa reddy

HTML

<body>
<div class="container">
    <div class="box">0</div>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
</div>
</body>

CSS

.container{
    width: 440px;
    margin: 0 auto;
    position: relative;
}

.info-bg{
    width: 430px;
    height: 70px;
    background-color: red;
    float:left;
    position: relative;
    margin: 5px;
    display: none;
}

.info-cl{
    height: 100%;
}

.info-pc{
    position:absolute;
	border-bottom: 10px solid red;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	height: 0;
	width: 0;
	float: right;
	top: -10px;
}

.box{
    width:100px;
    height:170px;
    background-color: grey;
    float:left;
    margin:5px;
    font-size: 40px;
}

.edge{
    background-color:yellow;
}

.selected {
   background-color: red;
   
}

JavaScript

var container = $('.container');
var elements = container.children();
var oldWrapPos = 0;

$('.box').click(function(){
    container.children().removeClass('selected'); // reset selected element
    $(this).addClass('selected'); // mark new selected element
    $('.info-bg').remove(); // removing the prviously added div
    var selectedPos = $(this).index(); // get selected position
    // find wrap element:
    //var containerWidth = container.width();
    //var elementsInRow = Math.floor(containerWidth / 100 );
    var elementsInRow = 4; // use this if container's width is fixed
    var row = Math.floor(selectedPos / elementsInRow)+1;
    var wrapPos = (row * elementsInRow);
    
    // if selected is on last row, use as wrap the last element:
    var size = elements.length;
    if (wrapPos >= size){wrapPos = size;}
    wrapPos = wrapPos - 1;
    console.log(selectedPos);
    console.log(elementsInRow);
    var pointerPos = 40 + ((selectedPos % elementsInRow) * 110)
    console.log(selectedPos % elementsInRow);
    console.log((selectedPos % elementsInRow) * 110);
    console.log('left: '+pointerPos);
    console.log(size);
    // next line added by CrocoDillon, didn't do any cleanup of old calculations :P
    pointerPos = $(this).position().left + $(this).width() / 2 - 10;
    // end edit;
    if (wrapPos == oldWrapPos){
        $('.info-pc').css("left", pointerPos+'px');
    } else {
        oldWrapPos = wrapPos;
        elements.removeClass('edge');
        $(elements[wrapPos]).addClass('edge');
        $('.info-bg').slideUp( function() { $(this).remove(); });
        $('.edge').after('<div class="info-bg"><div class="info-pc" style="left:'
                         +pointerPos+'px"></div><div class="info-cl"></div></div>');
        $('.info-bg').slideDown();
    }
});

$('html').click( function (e) { 
    if ( e.target == this )
        $('.info-bg').slideUp( function() { $(this).remove(); });
});