JSFiddle - React, Tailwind, and code Playground

by neal_fletcher

HTML

<div id="mousePosition">
    <div><span class="yo" id="num01">0</span>º<span class="yo" id="num02">0</span>’N <span class="yo" id="num03">0</span>º<span class="yo" id="num04">0</span>’W</div>
</div>

JavaScript

$(document).mousemove(function (event) {
    var xer = event.pageX,
        xhalf = xer * 2,
        yer = event.pageY,
        yhalf = yer * 2;

    $('#num01').html(xer);
    $('#num02').html(xhalf);
    $('#num03').html(yer);
    $('#num04').html(yhalf);

    $(".yo").each(function (i) {
        len = $(this).text().length;
        if (len > 3) {
            $(this).html($(this).html().substr(0, 3));
        }
    });


});