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 parentPadding = $(this).children('p').css('padding-left');
        console.log('Parent padding:' + parentPadding);
        var parentMargin = $(this).children('p').css('margin-left');
        console.log('Parent margin:' + parentMargin);
        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');