JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<ul id="navigation">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

CSS

li {
    float: left;
    width: 2em;
    height: 2em;
    line-height: 2em;
    font-size: 1em;
    text-align: center;
    border: 1px solid #000;
    border-radius: 0.4em;
}

JavaScript

function gEBTN(tag, parent, index) {
    if (!parent && !index) {
        return document.getElementsByTagName(tag);
    }
    else if (parent && !index) {
        return parent.getElementsByTagName(tag);
    }
    else if (index) {
        return parent.getElementsByTagName(tag)[index];
    }
}

function gCS(elem, parent, prop) {
    if (!prop && parent) {
        return window.getComputedStyle(elem.parentNode, null).getPropertyValue('width');
    }
    else if (prop && parent == true) {
        return window.getComputedStyle(elem.parentNode, null).getPropertyValue(prop);
    }
    else if (!parent && !prop) {
        return window.getComputedStyle(elem, null).getPropertyValue('width');
    }
    else {
        return window.getComputedStyle(elem, null).getPropertyValue(prop);
    }
}

function centreNavigationOn(page, navElemId, container) {
    if (!page) {
        return false;
    }
    else {
        var navElemId = navElemId || 'navigation';
        var navElem = document.getElementById(navElemId);
        var containers = gEBTN(container) || gEBTN('li', navElem);
        for (var i = 0, len = containers.length; i < len; i++) {
            if (containers[i].textContent == page) {
                var centreOn = containers[i];
            }
            else {
                containers[i].style.opacity = '0.3';
            }
        }
        if (!centreOn){
            console.log('No element found to centre on. Quitting now.');
            return false;
        }
        centreOn.style.backgroundColor = '#f90';
        centreOn.style.opacity = '1';
        
        var cOnWidth = parseInt(gCS(centreOn),10);
        var cOnLeftOffset = centreOn.offsetLeft;
        cPPWidth = parseInt(gCS(centreOn.parentNode.parentNode),10);
        var moveBy = Math.round((cPPWidth/2) - (cOnLeftOffset + (cOnWidth/2)));
        centreOn.parentNode.style.marginLeft = moveBy + 'px';
    }
};

centreNavigationOn(4, 'navigation', 'li');