JSFiddle - React, Tailwind, and code Playground

by skram

HTML

<div id="test1">
</div>
<div id="tform">
    Name: <input id="Name" type="text" />
    Age: <input id="Age" type="text" />
    Gender: <input id="Gender" type="text" />
    <input type="button" id="Button" value="Submit" />
</div>
<input type="button" id="checkVis" value="Check Visibility" />
<div id="instruction">
    <p>1. Click on Check Visibility button and See the report</p>
    <p>2. The Red box is draggable so drag around</p>
    <p>3. Click on Check Visibility button again to see new Report</p>
    <div id="report">
        
    </div>
    
</div>

CSS

#test1 { position: absolute; left: 10px; top: 10px; border: 1px solid red; background-color: red; width: 250px; height: 150px; }

#tform { border: 1px solid blue; width: 200px; height: 200px; text-align: right; padding: 2px; }

#instruction {
    border: 1px solid #c2c2c2;
    position: fixed;
    top: 0px;
    right: 0px;
    width: 150px;
    font-size: 12px;
    padding: 2px;
}

#report { border: 1px solid black; padding: 2px; overflow: auto; height: 100px; }

JavaScript

$(document).ready(function() {

    $('#test1').draggable();

    $('#checkVis').click(function() {

        $('#report').html('');

        $('#tform input').each(function() {

            var rectPos = this.getBoundingClientRect();

            var result = 0;
            if (this == document.elementFromPoint(rectPos.left, rectPos.top)) {
                result++;
            }
            if (this == document.elementFromPoint(rectPos.left, rectPos.bottom - 1)) {
                result++;
            }
            if (this == document.elementFromPoint(rectPos.right - 1, rectPos.top)) {
                result++;
            }
            if (this == document.elementFromPoint(rectPos.right - 1, rectPos.bottom - 1)) {
                result++;
            }

            if (result == 4) {
                result = 'visible';
            } else if (result == 0) {
                result = 'hidden';
            } else {
                result = 'partially visible';
            }

            $('#report').append('<p>' + this.id + ' ' + result + '</p>');
        });
    });
});