JSFiddle - React, Tailwind, and code Playground

by Maulik Anand

HTML

<div id="qwebirc">
    <iframe src="http://webchat.quakenet.org/?channels=testfiddle&uio=OT10cnVlJjEwPXRydWUmMTI9dHJ1ZQfd" width="100%" height="300"></iframe>
    <div id="ircTopbar">Chat<span id="ircTopbarRight">powered by <a href="http://www.qwebirc.org/" target="_blank">qwebirc.org</a></div>
    <div id="ircAboveNick"></div>
    <div id="ircBelowNick"></div>
    <div id="ircBelowJoinButton"></div>
</div>

CSS

#qwebirc {
	position: relative;
    width: 620px;
	background: rgb(240,247,255);
}

iframe { border: 0; }

#ircTopbar {
	position: absolute;
	top: 0;
	right: 0;
	width: 98%;
	height: 24px;
	line-height: 24px;
	font-weight: bold;
	padding: 0 1%;
	background: rgb(227,239,250);
	background: rgba(255, 0, 0, 0.8); /* delete for real look */
}

#ircTopbarRight {
	float: right;
	color: #666;
	font-size: 11px;
	font-weight: normal;
}

#ircAboveNick {
	clear: both;
	position: absolute;
	top: 25px;
	left: 0;
	width: 100%;
	height: 118px;
	background: rgb(240,247,255);
	background: rgba(255, 0, 0, 0.8); /* delete for real look */
}

#ircBelowNick {
	position:absolute;
	top: 169px;
	left: 0;
	width: 100%;
	height: 28px;
	background: rgb(240,247,255);
	background: rgba(255, 0, 0, 0.8); /* delete for real look */
}

#ircBelowJoinButton {
	position:absolute;
	top: 221px;
	left: 0;
	width: 100%;
	height: 83px;
	background: rgb(240,247,255);
	background: rgba(255, 0, 0, 0.8); /* delete for real look */
}

JavaScript

jQuery( document ).ready(function() {
    jQuery('#qwebirc').click(function(e){
        var x = e.pageX - this.offsetLeft,
            y = e.pageY - this.offsetTop;
        
        if (x > 242 && x < 321 && y > 196 && y < 222) {
            document.getElementById('ircAboveNick').style.display = 'none';
            document.getElementById('ircBelowNick').style.display = 'none';
            document.getElementById('ircBelowJoinButton').style.display = 'none';
        }
    });
});