JSFiddle - React, Tailwind, and code Playground

by orjan

HTML

<div id="instagram-feed">
    <div class="meta-data">
        <p>fgdfgfdg fdgf df df <a href="#">link</a>

        </p>
    </div>
    <div class="meta-data">
        <p>fgdfgfdg fdgf df df dsfsdf <a href="#">link</a>

        </p>
    </div>
    <div class="meta-data">
        <p>fgdfgfdg fdgf <a href="#">link</a>

        </p>
    </div>
</div>

CSS

.meta-data {
    float: left;
    margin-right: 50px;
    border: 1px solid #ddd;
}
p {
    width: 160px;
    padding: 5px;
    margin: 30px;
    white-space: nowrap;
    background: silver;
    display: inline-block;
    overflow: hidden;
}

JavaScript

function removefromTabindex(myElement) {
    $('#instagram-feed .meta-data').each(function () {
        var parentPaddingLeft = $(this).children('p').css('padding-left');
        var parentPaddingRight = $(this).children('p').css('padding-right');
        console.log('Parent padding:' + parseInt(parentPaddingLeft + parentPaddingRight));
        var parentMarginLeft = $(this).children('p').css('margin-left');
        var parentMarginRight = $(this).children('p').css('margin-right');
        console.log('Parent margin:' + parseInt(parentMarginLeft + parentMarginRight));
        var parentWidth = $(this).offset().left + $(this).width();
        console.log('Parent width:' + parentWidth);
        var parentRight = $(this).offset().left + $(this).outerWidth(true);
        console.log('Parent calculated offset:' + parentRight);


        jQuery(this).find('a').each(function () {
            if ($(this).offset().left > parentRight) {
                $(this).attr('tabindex', '-1');
            }
        });
    });
};

removefromTabindex('#instagram-feed .meta-data p');