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!

Is it possible to make a image search filter just using Javascript?

In this html file ,I would like to add a image search filter functionality. For example, there are three images which consists of one Naruto image, one Superman image and one Batman image.
So, I would like to add the functionality like when I type "N or n" ,only the Naruto image shows hiding the other two and same for the rest two.
I think making the images run through an array would work but couldn't do so for images and I have seen many youtube videos but most of them use jQuery,electron but I would like to use only Javascript.
The file screenshot and the code(HTML and CSS) are given below:
sample image
HTML:
<body>
<div class="container">
<div class="searchbox_container">
<div class="searchbox">
<input type="text" name=" " placeholder="Search" class="search">
</div>
</div>
<div class="image_container">
<img src="images/naruto.png" alt=""
class="actionimages">
<img src="images/batman.png" alt=""
class="actionimages">
<img src="images/superman.png" alt=""
class="actionimages">
</div>
</div>
</body>
CSS:
<style>
body {
background-color: black;
}
.container {
width: 700px;
height: 400px;
border: 2px solid yellow;
margin: auto;
background-color: black;
}
input {
border: 2px solid darkgoldenrod;
background-color: yellow;
border-radius: 2px;
width: 100px;
height: 10px;
padding: 0 10px;
font-size: smaller;
color: black;
}
.searchbox {
float: right;
margin-top: 5px;
margin-right: 5px;
}
.image_container
{ width:300px;
border:2px solid yellow;
clear:both;
margin:0 auto;
margin-top:50px;
}
.image_container img{
width:90px;
margin-right:auto;
}
</style>
Pardon for any mistakes.Thank you.

This is what I understood from your comments
Fiddled here
var input=document.querySelector('.search');
var images=document.querySelectorAll('.image_container > img');
input.addEventListener('keydown',function(){
for(var i=0; i<images.length;i++)
{
if(new RegExp(this.value).test(images[i].src))
{
images[i].style.display ='block'
}
else
{
images[i].style.display ='none'
}
console.log(images[i].src)
}
})

in short you can use javasscript to search for image.
how you implement the search however is up to you.
one way to do so is to use data attribute for your images data-tags="naruto" and data-tags="batman" and so on.
As you can see in the example below I created an attribute for tags and added the names you want to the tags such as batman image has batman tag attribute.
Then in the javascript I get all the images when the user enters something into the search text box and loop through those images.
in the loop first i hide every image then check with the if statement if the image tag has the searched text in it by using indexOf if the tag has the search text then I show the image
function search(){
var searchText = document.getElementById("searchInput").value;
var images = document.querySelectorAll(".image_container > img");
if(searchText.length > 0){
images.forEach((image) => {
image.classList.add("hide");
if(image.dataset.tags.indexOf(searchText) > -1){
image.classList.remove("hide");
}
});
}else{
images.forEach((image) => {
image.classList.remove("hide");
});
}
}
body {
background-color: black;
}
.container {
width: 700px;
height: 400px;
border: 2px solid yellow;
margin: auto;
background-color: black;
}
input {
border: 2px solid darkgoldenrod;
background-color: yellow;
border-radius: 2px;
width: 100px;
height: 10px;
padding: 0 10px;
font-size: smaller;
color: black;
}
.searchbox {
float: right;
margin-top: 5px;
margin-right: 5px;
}
.image_container
{ width:300px;
border:2px solid yellow;
clear:both;
margin:0 auto;
margin-top:50px;
}
.image_container img{
width:90px;
margin-right:auto;
}
.hide{
display:none;
}
<div class="container">
<div class="searchbox_container">
<div class="searchbox">
<input type="text" name=" " placeholder="Search" class="search" id="searchInput" onkeyup="search()">
</div>
</div>
<div class="image_container">
<img data-tags="naruto" src="https://img.freepik.com/free-psd/3d-gold-logo-mockup-facade-sign_204971-162.jpg?size=664&ext=jpg" alt=""
class="actionimages">
<img data-tags="batman" src="https://img.freepik.com/free-photo/side-view-man-dancing_23-2148666505.jpg?size=664&ext=jpg" alt=""
class="actionimages">
<img data-tags="superman" src="https://img.freepik.com/free-vector/beautiful-floral-invitation-card-template_21799-4192.jpg?size=664&ext=jpg" alt=""
class="actionimages">
</div>
</div>

continueous scrolling using javascript

<html>
<style type="text/css">
#news
{
position: relative;
box-shadow: 1px 4px 5px #aaa;
text-align: left;
padding: 5px;
line-height: 20px;
height: 235px;
background: white;
border: 1px solid #ccc;
border-radius: 15px;
background: #eee;
width: 280px;
float: right;
height: 250px;
overflow: hidden;
background-repeat: repeat;
padding: 3px;
border-radius: 15px;
}
</style>
<script type="text/javascript">
var delayTime=8
var marqueeSpeed=2
var pauseTime=1
var copySpeed=marqueeSpeed
var pauseSpeed=(pauseTime==0)? copySpeed: 0
var actualHeight=''
function ScrollMarquee()
{
if (parseInt(crossMarquee.style.top)>((actualHeight / 2)*(-1)+8))
crossMarquee.style.top=parseInt(crossMarquee.style.top)-copySpeed+"px"
else
crossMarquee.style.top=parseInt((marqueeheight - (actualHeight / 2)) / 2)+8 +"px"
}
function InitializeMarquee()
{
crossMarquee=document.getElementById("vmarquee")
crossMarquee.style.top=0
marqueeheight=document.getElementById("news").offsetHeight
actualHeight=crossMarquee.offsetHeight;
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1)
{
crossMarquee.style.height=marqueeheight+"px"
crossMarquee.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("ScrollMarquee()",30)', delayTime)
}
if (window.addEventListener)
window.addEventListener("load", InitializeMarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", InitializeMarquee)
else if (document.getElementById)
window.onload=InitializeMarquee
</script>
<div id="news" onMouseover="copySpeed=pauseSpeed" onMouseout="copySpeed=marqueeSpeed">
<div id="vmarquee" style="position: absolute; width: 98%;">
<div id="copy1">
<div>h</div><br>
<div>he</div><br>
<div>hel</div><br>
<div>hell</div><br>
<div>hello</div><br>
</div>
<div id="copy2" >
<div>h</div><br>
<div>he</div><br>
<div>hel</div><br>
<div>hell</div><br>
<div>hello</div><br>
</div>
</div>
</div>
<div id="news" onMouseover="copySpeed=pauseSpeed" onMouseout="copySpeed=marqueeSpeed">
<div id="vmarquee" style="position: absolute; width: 98%;">
<div id="copy1">
<div>h</div><br>
<div>he</div><br>
<div>hel</div><br>
<div>hell</div><br>
<div>hello</div><br>
</div>
<div id="copy2" >
<div>h</div><br>
<div>he</div><br>
<div>hel</div><br>
<div>hell</div><br>
<div>hello</div><br>
</div>
</div>
</div>
</html>
I used marquee tag for continueous scrolling but it not works.
Then I used javascript for continueous scrolling, it works but for 1 div.
script is run for 1 div only. I changed the another div id and save script
in another js file name but it not works ,please help me out

Marquee was depreciated in the latest versions of most modern browsers. Check out this guide for doing marquee really easily in CSS: http://www.hongkiat.com/blog/css-marquee/.

How to center all list's elements to parent div

I am going to add dynamically elements to my block of ul.
I would like to center all list's elements to parent div(brown boder).
For example,
if the resolution of the browser allows you to set two blocks in one row, I would like to center this row in relation to parent div.
I would be very graftefully.
Link to demo
myCode:
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
var tab = [2,3,4,5,7,8,9,11,12,13,14,15];
$(document).ready(function(){
$('#godziny').on('click', '.godzina', function(){
//alert(this.attr('class'));
$('.yb').removeClass('yb');
$(this).addClass('yb');
});
$('#getElements').click(function() {
for(i = 0; i < tab.length; ++i) {
alert(tab[i]);
setTimeout(function(i){
$('#godziny').append('<li class="godzina">' + tab[i] + '</li>');
}, i*50);
}
});
});
</script>
<style>
#spisSalonow {
margin: 0 auto;
}
#spisSalonow > div {
padding-top: 15px;
color:red;
}
#wybor_terminu {
border: 1px solid brown;
}
#wybor_terminu ul {
list-style-type: none;
overflow: hidden;
border: 1px solid red;
}
#wybor_terminu ul li {
width: 200px;
height: 200px;
text-align: center;
color: blue;
border: 0.2em solid green;
float: left;
cursor: pointer;
margin-right: 40px;
margin-top: 40px;
/*margin:auto;*/
/*
opacity: 0.4;
filter: alpha(opacity=40);
*/
}
.yb {
background: yellow;
}
</style>
</head>
<body>
<div id="wrapper">
<input type="button" value="get Elements" id="getElements"/>
<section id="content">
<div class="full">
<BR/>
<div id="wybor_terminu" class="center border" style="width: 70%; position: relative;">
<div style="text-align: center"><img src="https://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-05-24.png" alt="Left Arrow" /> <span id="day"> ANY DAY </span> <img src="http://cdn0.iconfinder.com/data/icons/slim-square-icons-basics/100/basics-06-24.png" alt="Right Arrow" /></div>
<ul id="godziny" style="margin-top: 25px;">
</ul>
</div>
</section>
</div>
</body>
</html>

You can use the CSS flexbox to achieve this. Here is a link to a complete guide on how to use flexbox. I hope this helps.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Add this lines:
CSS
#wybor_terminu ul {
list-style-type: none;
overflow: hidden;
/*NEW*/
padding: 0;
width: 100%;
}
#wybor_terminu ul li {
width: 200px;
height: 200px;
text-align: center;
color: blue;
border: 0.2em solid green;
/*float: left; You don't need this line*/
cursor: pointer;
/*NEW*/
margin:auto;
margin-top: 40px;
}
EDIT
This is only a quick solution with bootstrap maybe it could help you a little bit. jsfiddle
jQuery
In this line I added bootstrap classes:
$('#godziny').append('<li class="godzina col-sm-12 col-md-6">' + tab[i] + '</li>');
This code center your boxes (is not the best solution, but it works):
countBoxes = $('#godziny').width() / 200;
alignBoxes = ($('#godziny').width()-(200*parseInt(countBoxes)))/2;
if(countBoxes >= 2.65){
$('#godziny').css('margin-left', alignBoxes);
} else{
$('#godziny').css('margin-left', 0);
}
If you change the resolution of your screen, click the button to center your boxes again.

change image in a div with any effect like fadein when mouse hovered on another div

The below shown is the format of my html code. In the header div i have a image. Each box(box1, box2, box3) inside the contain div has link inside like(software development(box1), Graphic Designing(box2), and Technical Training(box3). These links when clicked will take me to separate pages which has their own header images. So i have 3 header image for each box and a default header image in the home page.In the home page when ever I hover my mouse in the box1 div the header image should change to the box1 header image with an effect like fadeIn and return my default image on mouse out. Same for box2 and box3. Please help me with doing this with CSS or JS or jQuery. Thank You
<body>
<div class="wrapper">
<div class="out">
<div class="in">
<div id="header"></div>
<div class="contain">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</div>
</div>
</div>
</body>
css:
.wrapper{
width: 100%
height: auto;
margin: 0px;
}
.out{
margin: auto;
width: 1000px;
height: 730px;
border-top: 5px solid #333333;
}
.in{
width: 900px;
height: 640px;
margin: auto;
margin-top: 25px;
}
#header{
background:url(../img/Untitled-1.jpg);
height: 175px;
width: 900px;
margin: 0px;
}
.contain{
margin: 0px;
width: 900px;
height: 428px;
}
.box1{
height: 360px;
width: 295px;
float: left;
margin: 67px 0px 0px 0px;
position: absolute;
background-color: #e6e7e9;
border-bottom: 4px solid #735d8c;
}
.box2{
height: 360px;
width: 295px;
float: left;
margin: 67px 0px 0px 302px;
position: absolute;
background-color: #e6e7e9;
border-bottom: 4px solid #735d8c;
}
.box3{
height: 360px;
width: 295px;
float: left;
margin: 67px 0px 0px 602px;
position: absolute;
background-color: #e6e7e9;
border-bottom: 4px solid #735d8c;
}

I have a made an BIN
I am placing same image for all the 3 divs like
$('#content,#content2,#content3').mouseover(function(){
$('#header').css('background','url(http://www.google.com/mobile/android/images/android.jpg)')
});
You change with your respective images like
$('#content').mouseover(function(){
$('#header').css('background','url(http://www.google.com/mobile/android/images/android.jpg)')
});
$('#content2').mouseover(function(){
$('#header').css('background','url(http://www.google.com/mobile/android/images/android.jpg)')
});....

jsBin demo
jQuery:
var currPage = 0; // PLAY HERE: set here current page (0 = home)
var $header = $('#header');
var $headerImg = $header.find('img');
$headerImg.eq( currPage ).show().addClass('currentImg');
// clone images to boxes:
var c = 0;
$('.box').each(function( i ){
$(this).prepend( $headerImg.eq(i==currPage? (i+1+c++) : c+i).clone() );
});
$('.box img[class^=headImg]').on('mouseenter mouseleave', function( e ){
var opacity = e.type=='mouseenter' ? 1 : 0 ;
var myClass = $(this).prop('class'); // get class
var $mainImg = $header.find('img.'+myClass);
$headerImg.hide();
$mainImg.stop().fadeTo(300, opacity);
$('.currentImg').stop().fadeTo(600, !opacity);
});
HTML:
<div class="wrapper">
<div class="out">
<div class="in">
<div id="header">
<img class="headImg1" src="home.jpg" alt="" />
<img class="headImg2" src="ONE.jpg" alt="" />
<img class="headImg3" src="TWO.jpg" alt="" />
<img class="headImg4" src="THREE.jpg" alt="" />
</div>
<div class="contain">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</div>
</div>
</div>
MODIFIED CSS PART:
/*ADDED*/
#header img{
position:absolute;
display:none;
}
.contain{
margin: 0px;
width: 900px;
height: 428px;
}
.box{ /* CHANGED */
height: 360px;
width: 294px;
float: left;
margin: 67px 3px 0px;
position: relative;
background-color: #e6e7e9;
border-bottom: 4px solid #735d8c;
}
/* ADDED */
.box img{
width:100%;
}

See this : http://jsfiddle.net/xTjQT/2/
$('a').mouseover(function() {
var src = $(this).attr('alt');
alert(src);
$('#header img').stop().fadeOut(100, function() {
$(this).attr('src', src);
$(this).fadeIn(100);
});
});
$('a').mouseout(function() {
$('#header img').stop().fadeOut(200, function() {
$(this).attr('src', 'http://jsfiddle.net/img/logo.png');
$(this).fadeIn(100);
});
});