We Keep Coding

Trying to start/trigger an iframe with a JS game only when needed in my HTML5 page

I've learned the basic of HTML5, CSS and a little of JS.
I'm trying to make a site where I can show my projects and knowledge.
The thing is, I want to put 2 JS games that I made in the page, but I don't want them to load instantly with the page. so, I would like it to load only when I click on it.
The game: https://editor.p5js.org/snufupugos/full/jm8j5k5pC
How I got it on the page:
<section class="games"> <iframe src="https://editor.p5js.org/snufupugos/embed/jm8j5k5pC" class="freeway" title="Remake Freeway"></iframe> </section>
The CSS:
.freeway{
background-color:rgba(0, 0, 0, 0.1);
width: 500px;
height: 400px;
margin: 2em auto;
border: 2px solid #801edb;
border-radius: 50px;
border-width: thick;
padding: 5px 5px;
}
My first Idea was to use an image, and then the hover to transform to the iframe, but I think it is not possible since it did not work.
Anyway, can someone help me with this? Any Idea how to do it?
Thank you.

function start(){
document.getElementById("frame").src = "https://editor.p5js.org/snufupugos/embed/jm8j5k5pC";
document.getElementById("imgs").remove();
var news = document.createElement("img");
news.setAttribute('id', 'stop');
news.setAttribute('onclick', 'stop();');
news.setAttribute('class', 'button');
news.setAttribute('width', '25px');
news.setAttribute('src', 'data:image/png;base64,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');
var element1 = document.getElementById("top");
element1.appendChild(news);
}
function stop(){
document.getElementById("frame").src = "";
document.getElementById("stop").remove();
var neww = document.createElement("img");
neww.setAttribute('id', 'imgs');
neww.setAttribute('onclick', 'start();');
neww.setAttribute('class', 'button');
neww.setAttribute('src', 'data:image/png;base64,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');
var element = document.getElementById("center");
element.appendChild(neww);
}
.border{
width: 500px;
height: 400px;
margin: 2em auto;
position: relative;
z-index: 9999999999;
}
.freeway{
width: 500px;
height: 400px;
background-color:rgba(0, 0, 0, 0.1);
border: 2px solid #801edb;
border-radius: 50px;
border-width: thick;
}
.show{
display: block;
}
.container {
position: absolute;
text-align: center;
z-index: -1;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.button {
cursor: pointer;
border: none;
}
.top-right {
position: absolute;
top: 11px;
right: 40px;
}
<section class="games">
<div class="border">
<div class="container">
<iframe src="" id="frame" class="freeway"></iframe>
<div id="top" class="top-right"></div>
<div id="center" class="centered">
<img class="button" src="data:image/png;base64,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" onclick="start();" id="imgs"/>
</div>
</div>
</div>
</section>
<script>
window.addEventListener("keydown", function(e) {
// space and arrow keys
if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
e.preventDefault();
}
}, false);
</script>
Try this!

Some issues with chat box design

I am working on a chat application and I have two major issues in chatbox design.
I want some part of the screen scrollable just like other chatting applications when we have more messages we scroll up to see previous messages and other things are fixed on the screen like: sendbar,top-menu-bar, etc. but I unable to do so, I tried overflow-y = scroll but it didn't work.
As I mentioned in the first point some things have to be fixed on the screen but after setting position = fixed it also doesn't work.
I tried everything please help.
function fxn(){
var text = document.getElementById("inp").value
var ele = document.getElementById("parent")
var foo = document.createElement("div")
foo.innerHTML = "<div class = box1>" + text + "</div><br><br><br>";
ele.appendChild(foo)
}
#box {
margin-bottom: 10px;
background-color: aqua;
width: 300px;
border: solid 2px black;
}
.box1 {
display: inline;
padding: 10px;
border-radius: 15px;
width: 300px;
border: solid 2px black;
}
.out{
position: fixed;
width: 100%;
background-color: aquamarine;
}
<body id="bd">
<div id ="box">
Testing chat box
</div>
<div id="parent"></div>
<div class="out">
<input type="text" id="inp">
<button onclick="fxn()">Send</button>
</div>
</body>
Output

I see that the post has been accepted and it works nicely for the OP. But I would still like to present one more option. I just made CSS changes to make the footer fixed and header sticky so as to mimic your requirement.
function fxn(){
var text = document.getElementById("inp").value
var ele = document.getElementById("parent")
var foo = document.createElement("div")
foo.innerHTML = "<div class = box1>" + text + "</div><br><br><br>";
ele.appendChild(foo)
}
#box {
margin-bottom: 10px;
background-color: aqua;
width: 300px;
border: solid 2px black;
position: sticky;
top:0;
}
.box1 {
display: inline;
padding: 10px;
border-radius: 15px;
width: 300px;
border: solid 2px black;
}
.out{
position: fixed;
width: 100%;
background-color: aquamarine;
left: 0;
bottom: 0;
}
<body id="bd">
<div id ="box">
Testing chat box
</div>
<div id="parent"></div>
<div class="out">
<input type="text" id="inp">
<button onclick="fxn()">Send</button>
</div>
</body>

function fxn(){
var text = document.getElementById("inp").value
var ele = document.getElementById("parent")
var foo = document.createElement("div")
foo.innerHTML = "<div class = box1>" + text + "</div><br><br><br>";
ele.appendChild(foo)
ele.scrollTop = ele.scrollHeight;
}
#parent{
height:100px;
overflow-y:scroll;
}
#box {
margin-bottom: 10px;
background-color: aqua;
width: 300px;
border: solid 2px black;
}
.box1 {
display: inline;
padding: 10px;
border-radius: 15px;
width: 300px;
border: solid 2px black;
}
.out{
position: fixed;
width: 100%;
background-color: aquamarine;
}
<body id="bd">
<div id ="box">
Testing chat box
</div>
<div id="parent"></div>
<div class="out">
<input type="text" id="inp">
<button onclick="fxn()">Send</button>
</div>
</body>
please note here i had added height to the parent div and overflow-y to be scroll, and also added ele.scrollTop = ele.scrollHeight; in the js part.
here you can read more about ScrollTop

Try this
function fxn(){
var text = document.getElementById("inp").value
var ele = document.getElementById("parent")
var foo = document.createElement("div")
foo.innerHTML = "<div class = box1>" + text + "</div><br><br><br>";
ele.appendChild(foo)
window.scrollTo(0,document.body.scrollHeight);
}
.out{
width: 100%;
background-color: aquamarine;
}

jQuery ,Css display none - block vs. hide- show

I am trying to hide #showMyList, #showMyName these divs. On click button need to show divs.
Both div has separate buttons. I want to see one div at a time. I can give different css (style)to them so that they will look different.
Which one will be more useful jQuery hide() and show()
Or display none and block?
#showMyList, #showMyName{
height: 100px;
width: 500px;
text-align: center;
border: 1px solid gray;
background-color: antiquewhite;
position: absolute;
top: 200px;
left:200px;
}
</style>
<script>
$('document').ready(function(){
$('showMyList').css("display", "none");
$('showMyAcc').css("display","none");
$("myList").click(function(){
$("showMyList").css("display", "block");
$("myAcc").click(function(){
$("showMyAcc").css("display", "block");
});
});
});

Consider the following example.
$(function() {
$('#showMyList, #showMyAcc').hide();
$("#myList").click(function() {
$("#showMyAcc").hide();
$("#showMyList").show();
});
$("#myAcc").click(function() {
$("#showMyList").hide();
$("#showMyAcc").show();
});
});
#showMyList,
#showMyAcc {
height: 100px;
width: 500px;
text-align: center;
border: 1px solid gray;
background-color: antiquewhite;
position: absolute;
top: 200px;
left: 200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="myList">Show List</button>
<button id="myAcc">Show Name</button>
<div id="showMyList">List</div>
<div id="showMyAcc">Name</div>
You can Hide both elements and then reveal or show 1 at a time.

Issue showing a selected id

I am having an issue getting tabs to open based on the selection I am choosing. In the snippet you will see 4 boxes. If you click on box 1, I am wanting #marketing1 to open below it and so on.
The method I am using is to get the specific id of the button selection (the 1,2,3,4 box) and then declare a variable to just get the number. Then to add that number to the id of #marketing to show the appropriate section. I am not sure what I am doing wrong. No errors are showing.
Ps - I am also trying to add an .active class to the #marketing-service for when one of the selection boxes is clicked on to show my the active class (it creates a down arrow under the box. Am I implementing the .active wrong to the :before and :after?
//For tabs to stay active
$('.marketing-service').click(function() {
$('.marketing-service.active').removeClass('active');
$(this).toggleClass('active');
//To get the service display box to show
var item_number = $(this).attr('id').replace('marketing-tab', '');
/* $('html, body').animate({
scrollTop: $("#service-display-box").offset().top
}, 1500);*/
$('#marketing'+item_number).show().siblings('.marketing-section-wrap').hide();
});
.marketing-section-wrap, .marketing-section-wrap-main {
width: 100%;
height: auto;
padding: 80px 0;
border-bottom: 1px solid #EBEBEB;
}
.marketing-section-wrap {
display: none;
}
#marketing-services {
width: 95%;
margin: 0 2.5%;
}
.marketing-service {
display: inline-block;
width: 22%;
margin: 0 1%;
height: 400px;
background: #F0F0F0;
position: relative;
cursor: pointer;
}
.marketing-service:first-child {
margin-left: 0;
}
.marketing-service:last-child {
margin-right: 0;
}
.marketing-service:hover {
background: rgba(0, 255, 170, .4);
z-index: 1;
}
/*-- Down Arrow for boxes --*/
.marketing-service:after.active, .marketing-service:before.active {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
}
.marketing-service:after.active {
border-width: 0px;
margin-left: 0px;
border-color: rgba(136, 183, 213, 0);
border-right-color: #88b7d5;
margin-top: -30px;
}
.marketing-service:before.active {
border-color: #FFF;
border-top-color: #88b7d5;
border-width: 36px;
margin-left: -36px;
margin-top: 0;
}
.marketing-service-wrap {
padding: 10%;
width: 80%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="marketing-services">
<div class="marketing-service" id="marketing-tab1">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">1</h2>
</div>
</div>
<div class="marketing-service" id="marketing-tab2">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">2</h2>
</div>
</div>
<div class="marketing-service" id="marketing-tab3">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">3</h2>
</div>
</div>
<div class="marketing-service" id="marketing-tab4">
<div class="marketing-service-wrap total-center">
<h2 class="marketing-service-title">4</h2>
</div>
</div>
</div>
<div id="marketing1">
<div class="marketing-section-wrap">
1
</div>
</div>
<div id="marketing2">
<div class="marketing-section-wrap">
2
</div>
</div>

Quite simple just try $('#marketing'+item_number).children().show() because marketing-section-wrap is display:none;
first run this to hide all marketing-section-wrap
$('.marketing-section-wrap').hide();
then this will show only the one which corresponds to this click.
$('#marketing'+item_number).children().show();

Closable div - Left div slides close, while right div width expands

I'm trying to make a div on the left side that can close by sliding to the left While the content in the right div expands to 100% filling the space of the closed div. image example
I found a demo here but its only for the closable div.
<div id="intro-wrap">
<div class="open-intro">+</div>
<div class="close-intro">-</div>
<div id="contentWrap">
<h1 class="main-header">Here is a Title</h1>
<p class="main-desc">You can write whatever you want about yourself here. You can say you're a superhuman alien ant, arrived from the nether regions of Dwarf-Ant-Dom.</p>
</div>
</div>

It has some work to do, but it'll get you started.
$(function() {
"use strict";
var isOpen = true;
$('#open-close').on('click', function() {
if (isOpen) {
animate(false);
isOpen = false;
} else {
animate(true);
isOpen = true;
}
});
});
function animate(action) {
if (action) {
$('#left').animate({ width: "30vw" }, 600);
$('#right').animate({width: "70vw",marginLeft: "-5px"}, 600);
} else {
$('#left').animate({width: "0px"}, 600);
$('#right').animate({width: "99vw" }, 600);
}
}
* {
padding: 0;
margin: 0;
}
#wrapper{
width: 100vw;
height: 100px;
border: 2px solid purple;
}
#wrapper > *{
display: inline-block;
}
#left {
position: relative;
width: 30vw;
height: 100px;
background: green;
}
#right {
position: relative;
width: 65vw;
height: 100px;
background: navy;
}
#open-close {
position: absolute;
width: 10px;
height: 10px;
margin-top: 5px;
margin-left: 5px;
background: red;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="left"></div>
<div id="right">
<div id="open-close"></div>
</div>
</div>