JSFiddle - React, Tailwind, and code Playground

by dioslaska

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

    <title>Mobiscroll</title>

    <link href="style.css" rel="stylesheet" type="text/css" />

    <script src="http://code.jquery.com/jquery-1.9.0.min.js" type="text/javascript"></script>
    <script src="pos.js" type="text/javascript"></script>

</head>

<body>

    <div id="elm">
        <button id="hide">Hide</button>
    </div>

    <div id="controls">
        <button id="top" class="pos">Top</button>
        <button id="bottom" class="pos">Bottom</button>
        <button id="center" class="pos">Center</button>
        <button id="bubble" class="pos">Bubble</button>
    </div>

    <div id="anchor"></div>

</body>
</html>

CSS

body {
    height: 2000px;
    padding: 0;
    margin: 0;
    font-family: arial, verdana, sans-serif;
    font-size: 12px;
}

#elm {
    position: absolute;
    z-index: 10;
    display: none;
    width: 300px;
    height: 100px;
    padding: 20px 0;
    background: #ddd;
    text-align: center;
}

#controls {
    position: fixed;
    top: 50%;
    left: 0;
    height: 138px;
    margin-top: -69px;
    background: #aaa;
}

#controls button {
    display: block;
    width: 60px;
    margin: 10px;
}

#anchor {
    width: 150px;
    height: 30px;
    background: #aaa;
    position: absolute;
    top: 500px;
    right: 40px;
}

JavaScript

$(function () {

    $('.pos').click(function() {

        var top,
            left,
            width = '',
            elm = $('#elm').css({ width: '' }).show(),
            anchor = $('#anchor'),
            scrollTop = $(window).scrollTop(),
            viewPortWidth = $(window).width(),
            viewPortHeight = $(window).height(),
            scrollerWidth = elm.outerWidth(),
            scrollerHeight = elm.outerHeight(),
            anchorWidth = anchor.outerWidth(),
            anchorHeight = anchor.outerHeight(),
            anchorOffsetTop = anchor.offset().top,
            anchorOffsetLeft = anchor.offset().left;

        switch (this.id) {
            case 'center':
                top = scrollTop + (viewPortHeight - scrollerHeight) / 2;
                left = (viewPortWidth - scrollerWidth) / 2;
                break;
            case 'top':
                width = '100%';
                top = scrollTop;
                left = 0;
                break;
            case 'bottom':
                width = '100%';
                top = scrollTop + viewPortHeight - scrollerHeight;
                top = top < 0 ? 0 : top // Don't go out of screen
                left = 0;
                break;
            case 'bubble':
                top = anchorOffsetTop - scrollerHeight - 3; // above anchor element
                left = anchorOffsetLeft - (scrollerWidth - anchorWidth) / 2;

                // If there’s not enough space above the anchor element, or anchor element is out of screen, position below anchor element:
                if ((top < scrollTop) || (anchorOffsetTop > scrollTop + viewPortHeight)) {
                    top = anchorOffsetTop + anchorHeight + 3;
                }

                // Keep a minimum 20px margin from left and right:
                left = left > (viewPortWidth - scrollerWidth - 20) ? (viewPortWidth - scrollerWidth - 20) : left;
                left = left < 20 ? 20 : left;
                break;
        }

       ...