JSFiddle - React, Tailwind, and code Playground

by wookiehangover

HTML

<html>
    <head>
        <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1"></meta>
    </head>
    <body>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec molestie ligula. Suspendisse potenti. Maecenas ante dolor, laoreet commodo blandit sed, eleifend vitae turpis. Aliquam gravida sodales hendrerit. Donec non urna ut velit aliquam porta. Maecenas non pellentesque tellus. Ut orci nisl, tincidunt ut lobortis id, pretium non elit. In hac habitasse platea dictumst.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec molestie ligula. Suspendisse potenti. Maecenas ante dolor, laoreet commodo blandit sed, eleifend vitae turpis. Aliquam gravida sodales hendrerit. Donec non urna ut velit aliquam porta. Maecenas non pellentesque tellus. Ut orci nisl, tincidunt ut lobortis id, pretium non elit. In hac habitasse platea dictumst.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec molestie ligula. Suspendisse potenti. Maecenas ante dolor, laoreet commodo blandit sed, eleifend vitae turpis. Aliquam gravida sodales hendrerit. Donec non urna ut velit aliquam porta. Maecenas non pellentesque tellus. Ut orci nisl, tincidunt ut lobortis id, pretium non elit. In hac habitasse platea dictumst.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec molestie ligula. Suspendisse potenti. Maecenas ante dolor, laoreet commodo blandit sed, eleifend vitae turpis. Aliquam gravida sodales hendrerit. Donec non urna ut velit aliquam porta. Maecenas non pellentesque tellus. Ut orci nisl, tincidunt ut lobortis id, pretium non elit. In hac habitasse platea dictumst.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec molestie ligula. Suspendisse potenti. Maecenas ante dolor, laoreet commodo blandit sed, eleifend vitae turpis. Aliquam gravida sodales hendrerit. Donec non urna ut velit aliquam porta. Maecenas non pellentesque tellus. Ut orci nisl,...

CSS

html {
    -webkit-column-gap: 0px;
    padding: 0;
    margin: 0;
}

JavaScript

// remove scrollbars since they screw up column offset
$('body').css({ overflow:'hidden' });

var bodyChildren = $('body *').get();
var bookmarkedEl = bodyChildren[ Math.floor( Math.random() * bodyChildren.length ) ];

// underline all the text in the bookmark so we can visually match it up too
$(bookmarkedEl).css('text-decoration','underline');

// grab position before column layout since it will correspond with what we
// would get from Android even when columns are applied
var preColumnOffset = $(bookmarkedEl).offset();

alert(preColumnOffset.top);

setupColumns();

locateEl(bookmarkedEl, preColumnOffset);

function locateEl(searchEl, nonColumnOffset){
    // guess at the start column based on the position prior to column layout
    var startColumn = Math.floor( nonColumnOffset.top / columnHeight() ) - columnTollerance();
    if ( startColumn < 1 ) startColumn = 1;
    
    var maxColumn = columnCount(),
        found = false;
    for ( var column = startColumn; column <= maxColumn; column++ ) {
        jumpToColumn( column );
        
        // search for the element in the column
        var maxY = columnHeight() - 10,
            x = Math.floor( columnWidth() / 2 ),
            step = 10;
        for ( var y = 10; y <= maxY; y += step ) {
            console.log( "Searching " + x + " " + y + " in column " + column );
            var el = document.elementFromPoint( x, y );
            if ( el == searchEl ) {
                // highlight the found element as well to confirm the match against the underlined text
                $(searchEl).css('background','yellow');
                console.log( "Element located in column " + column );
                found = true;
                break;
            }
        }
        
        if ( found ) break;
    }
    
    if ( !found ) {
        console.log( "Failed to locate element" );
    }
}

function jumpToColumn(column){
    window.scroll( (column-1) * columnWidth(), 0);
}

function columnWidth(){
    return...