So, initally, I had no issues. It seemed to be working fine. I load the script and it was giving just the ‘open chat’ option.
Now, it loads the whole chat window already open, but not the content page of the chat. I have to click ‘exit chat’ and ‘open chat’ for it to actually open up the content.
I don’t want the content window to even open until I click ‘open chat’.
(for the sake of ease, I left the css as a style tag in the webpage for now. Typically, I have a stylesheet href in the head)
HTML
<code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#forumWindow {
padding: 10px;
height: 350px;
width: 250px;
opacity:0.9;
filter:alpha(opacity=50);
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
border: 1px #000 dotted
z-index: 1000;
}
.button { background:url('https://www.haikimura.com/images/b.png');
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
z-index:4;
border-radius: 1em;
border:1px dotted #FFF0F5;
font-family: Garamond;
color: #fff;
font-size: 15px; }
.box {
position: fixed;
bottom: 5px;
right: 40px;
width: 250px;
padding: 0px;
text-align: center;
cursor: default;
background:url('https://www.haikimura.com/images/b.png') repeat; opacity:.80;
border:1px dotted #FFF0F5;
color: #fff;
font-family: Garamond;
font-size: 15px;
border-radius:5px; }
.prettyFrame {
width: 100%;
height: 90%;
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
border: none; }
</style>
</head>
<body>
<button id="openForumBtn" class="box">open chat</button>
<div id="overlay"></div>
<div id="forumWindow" class="box">
<iframe id="forumFrame" src="" class="prettyFrame"></iframe>
<button id="closeForumBtn" class="button">exit chat</button>
</div>
<script>
document.getElementById('openForumBtn').addEventListener('click', function() {
document.getElementById('forumWindow').style.display = 'block';
document.getElementById('forumFrame').src = 'https://www.haikimura.com/'; // Replace with your forum URL
});
document.getElementById('closeForumBtn').addEventListener('click', function () {
document.getElementById('forumWindow').style.display = 'none';
document.getElementById('forumFrame').src = '';
});
</script>
</body>
</html>
</code>
<code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#forumWindow {
padding: 10px;
height: 350px;
width: 250px;
opacity:0.9;
filter:alpha(opacity=50);
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
border: 1px #000 dotted
z-index: 1000;
}
.button { background:url('https://www.haikimura.com/images/b.png');
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
z-index:4;
border-radius: 1em;
border:1px dotted #FFF0F5;
font-family: Garamond;
color: #fff;
font-size: 15px; }
.box {
position: fixed;
bottom: 5px;
right: 40px;
width: 250px;
padding: 0px;
text-align: center;
cursor: default;
background:url('https://www.haikimura.com/images/b.png') repeat; opacity:.80;
border:1px dotted #FFF0F5;
color: #fff;
font-family: Garamond;
font-size: 15px;
border-radius:5px; }
.prettyFrame {
width: 100%;
height: 90%;
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
border: none; }
</style>
</head>
<body>
<button id="openForumBtn" class="box">open chat</button>
<div id="overlay"></div>
<div id="forumWindow" class="box">
<iframe id="forumFrame" src="" class="prettyFrame"></iframe>
<button id="closeForumBtn" class="button">exit chat</button>
</div>
<script>
document.getElementById('openForumBtn').addEventListener('click', function() {
document.getElementById('forumWindow').style.display = 'block';
document.getElementById('forumFrame').src = 'https://www.haikimura.com/'; // Replace with your forum URL
});
document.getElementById('closeForumBtn').addEventListener('click', function () {
document.getElementById('forumWindow').style.display = 'none';
document.getElementById('forumFrame').src = '';
});
</script>
</body>
</html>
</code>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#forumWindow {
padding: 10px;
height: 350px;
width: 250px;
opacity:0.9;
filter:alpha(opacity=50);
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
border: 1px #000 dotted
z-index: 1000;
}
.button { background:url('https://www.haikimura.com/images/b.png');
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
z-index:4;
border-radius: 1em;
border:1px dotted #FFF0F5;
font-family: Garamond;
color: #fff;
font-size: 15px; }
.box {
position: fixed;
bottom: 5px;
right: 40px;
width: 250px;
padding: 0px;
text-align: center;
cursor: default;
background:url('https://www.haikimura.com/images/b.png') repeat; opacity:.80;
border:1px dotted #FFF0F5;
color: #fff;
font-family: Garamond;
font-size: 15px;
border-radius:5px; }
.prettyFrame {
width: 100%;
height: 90%;
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
border: none; }
</style>
</head>
<body>
<button id="openForumBtn" class="box">open chat</button>
<div id="overlay"></div>
<div id="forumWindow" class="box">
<iframe id="forumFrame" src="" class="prettyFrame"></iframe>
<button id="closeForumBtn" class="button">exit chat</button>
</div>
<script>
document.getElementById('openForumBtn').addEventListener('click', function() {
document.getElementById('forumWindow').style.display = 'block';
document.getElementById('forumFrame').src = 'https://www.haikimura.com/'; // Replace with your forum URL
});
document.getElementById('closeForumBtn').addEventListener('click', function () {
document.getElementById('forumWindow').style.display = 'none';
document.getElementById('forumFrame').src = '';
});
</script>
</body>
</html>
css
<code>#forumWindow {
padding: 10px;
height: 350px;
width: 250px;
opacity:0.9;
filter:alpha(opacity=50);
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
border: 1px #000 dotted
z-index: 1000;
}
.button { background:url('https://www.haikimura.com/images/b.png');
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
z-index:4;
border-radius: 1em;
border:1px dotted #FFF0F5;
font-family: Garamond;
color: #fff;
font-size: 15px; }
.box {
position: fixed;
bottom: 5px;
right: 40px;
width: 250px;
padding: 0px;
text-align: center;
cursor: default;
background:url('https://www.haikimura.com/images/b.png') repeat; opacity:.80;
border:1px dotted #FFF0F5;
color: #fff;
font-family: Garamond;
font-size: 15px;
border-radius:5px; }
.prettyFrame {
width: 100%;
height: 90%;
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
border: none; }
</code>
<code>#forumWindow {
padding: 10px;
height: 350px;
width: 250px;
opacity:0.9;
filter:alpha(opacity=50);
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
border: 1px #000 dotted
z-index: 1000;
}
.button { background:url('https://www.haikimura.com/images/b.png');
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
z-index:4;
border-radius: 1em;
border:1px dotted #FFF0F5;
font-family: Garamond;
color: #fff;
font-size: 15px; }
.box {
position: fixed;
bottom: 5px;
right: 40px;
width: 250px;
padding: 0px;
text-align: center;
cursor: default;
background:url('https://www.haikimura.com/images/b.png') repeat; opacity:.80;
border:1px dotted #FFF0F5;
color: #fff;
font-family: Garamond;
font-size: 15px;
border-radius:5px; }
.prettyFrame {
width: 100%;
height: 90%;
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
border: none; }
</code>
#forumWindow {
padding: 10px;
height: 350px;
width: 250px;
opacity:0.9;
filter:alpha(opacity=50);
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
border: 1px #000 dotted
z-index: 1000;
}
.button { background:url('https://www.haikimura.com/images/b.png');
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
z-index:4;
border-radius: 1em;
border:1px dotted #FFF0F5;
font-family: Garamond;
color: #fff;
font-size: 15px; }
.box {
position: fixed;
bottom: 5px;
right: 40px;
width: 250px;
padding: 0px;
text-align: center;
cursor: default;
background:url('https://www.haikimura.com/images/b.png') repeat; opacity:.80;
border:1px dotted #FFF0F5;
color: #fff;
font-family: Garamond;
font-size: 15px;
border-radius:5px; }
.prettyFrame {
width: 100%;
height: 90%;
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
border: none; }
js
<code>document.getElementById('openForumBtn').addEventListener('click', function() {
document.getElementById('forumWindow').style.display = 'block';
document.getElementById('forumFrame').src = 'https://www.haikimura.com/';
});
document.getElementById('closeForumBtn').addEventListener('click', function () {
document.getElementById('forumWindow').style.display = 'none';
document.getElementById('forumFrame').src = '';
});
</code>
<code>document.getElementById('openForumBtn').addEventListener('click', function() {
document.getElementById('forumWindow').style.display = 'block';
document.getElementById('forumFrame').src = 'https://www.haikimura.com/';
});
document.getElementById('closeForumBtn').addEventListener('click', function () {
document.getElementById('forumWindow').style.display = 'none';
document.getElementById('forumFrame').src = '';
});
</code>
document.getElementById('openForumBtn').addEventListener('click', function() {
document.getElementById('forumWindow').style.display = 'block';
document.getElementById('forumFrame').src = 'https://www.haikimura.com/';
});
document.getElementById('closeForumBtn').addEventListener('click', function () {
document.getElementById('forumWindow').style.display = 'none';
document.getElementById('forumFrame').src = '';
});
New contributor
Alyssa Dunn is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1
Add display: none to #forumWindow as an initial value would solve your problem
<code>#forumWindow {
padding: 10px;
height: 350px;
width: 250px;
opacity:0.9;
filter:alpha(opacity=50);
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
border: 1px #000 dotted
z-index: 1000;
display: none; // here
}
</code>
<code>#forumWindow {
padding: 10px;
height: 350px;
width: 250px;
opacity:0.9;
filter:alpha(opacity=50);
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
border: 1px #000 dotted
z-index: 1000;
display: none; // here
}
</code>
#forumWindow {
padding: 10px;
height: 350px;
width: 250px;
opacity:0.9;
filter:alpha(opacity=50);
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
border: 1px #000 dotted
z-index: 1000;
display: none; // here
}
New contributor
Ibnu Alinsani is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1