I'm trying to dynamically change the iframe URL, for doing so I'm calling to the window.onmessage = (event) => function and fire the URL as event.data variable, this happened from external button.
When I click on the external button the iframe is shown the right URL but after 3 seconds change to black (blank URL), why does it happen, and how to solve it?
**
The ifame code
**
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link rel="mask-icon" href="https://assets-cdn.github.com/pinned-octocat.svg" color="#000000">
<link rel="icon" type="image/x-icon" href="https://assets-cdn.github.com/favicon.ico">
<link rel="shortcut icon" type="image/x-icon" href="https://assets-cdn.github.com/favicon.ico">
<style>
body { background: #232323; width: 95%; margin: 0 auto; }
/* Responsive Container for iFrame */
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
</style>
<title>Tech Ops PH | your < IT / design < partner </title>
<script type="text/javascript">
window.onmessage = (event) => {
if (event.data) {
document.getElementById("myIframe").src=event.data
}
}
</script>
</head>
<body>
<div class='embed-container embed-responsive embed-responsive-4by3'>
<iframe id="myIframe" width="600" height="9000" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
</body>
</html>
Related
function createMyNavBar(body) {
const attrNavBar = {
style: `
position: fixed;
top: 0;
left: 0;
width: 150px;
height: 50px;
background-color: green;
`
};
const navContainer = document.createElement("div");
setAttributes(navContainer, attrNavBar);
const attrP = {
style: `
display: flex;
justify-content: center;
`
};
const p = document.createElement("p");
p.textContent = "nav bar";
setAttributes(p, attrP);
navContainer.appendChild(p);
body.appendChild(navContainer);
}
function setAttributes(element, attributes) {
Object.keys(attributes).forEach((attr) => {
element.setAttribute(attr, attributes[attr]);
});
}
const body = document.body;
createMyNavBar(body);
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
#idDiv {
position: absolute;
margin-top: 100px;
margin-left: 200px;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="src/styles.css" />
</head>
<body>
<div id="idDiv">
<p>HOME PAGE</p>
<a id="id1" href="page/page1.html"> page 1 </a> <br />
<a id="id2" href="page/page2.html"> page 2 </a>
</div>
<script src="src/index.js"></script>
</body>
</html>
I created a navbar (navContainer) in javascript. I would like to inject the nav bar into every html page where the user will click on an . Each of the html pages is stored in a folder inside my project. I created a createMyNavBar function which takes the document.querySelector("body") element as an argument, then I inject my navigation code with body.appendChild(navContainer);
The navigation will allow me to go to the next page or the previous page
My question is how i can get the body of the clicked page ?
codeSandBox nav bar
I'm trying to embed a Vimeo video on a mobile website. I want the users to see the Vimeo controls every time without scrolling in any direction. At the same time, the video needs to be centred (horizontally and vertically) on the screen.
Below is my current implementation, it is not working as expected.
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1 user-scalable=0 minimum-scale=1">
<style>
.embed-responsive-item {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
</style>
</head>
<body style="background-color:green">
<div class="embed-responsive embed-responsive-16by9">
<div id="video" style="background-color:red" class="embed-responsive-item"></div>
</div>
<script id="vimeo" async src="https://player.vimeo.com/api/player.js"></script>
<script>
function loadVimeoVideo() {
var options = {
id: '253989945',
transparent: 1,
}
var player = new Vimeo.Player('video', options)
}
var script = document.querySelector('#vimeo');
script.addEventListener('load', function () {
loadVimeoVideo();
});
</script>
</body>
</html>
i am trying to swap the path of lottie / bodymovin on button click,
it works if i dont populate the animPath parameter first, so it seems like the click function cannot overwrite the parameter if there is already a path.
its like it loads in the data at the start and then thats it, i noticed the same thing with updating the speed, i had to call the setSpeed parameter after changing the speed to get it to update.
ive hunted the internet and can;t seem to find a parameter to setPath or something similar
does anyone know of a way to swap the path on click?
here is my code
var anim
var animationSpeed = 2;
var button = document.getElementById("button");
function runAnimation(animPath) {
console.log("lottie is loaded");
var animData = {
container: document.getElementById("test"),
animType: 'svg',
loop: true,
prerender: true,
autoplay: true,
path: animPath
};
anim = bodymovin.loadAnimation(animData);
anim.setSpeed(animationSpeed);
}
runAnimation("https://assets5.lottiefiles.com/private_files/lf30_lef8tmad.json");
$( "button" ).click(function() {
animationSpeed = 1;
anim.setSpeed(animationSpeed);
runAnimation("https://assets5.lottiefiles.com/private_files/lf30_vuxs5lpt.json");
console.log("path 2 loaded");
});
body {
background-color: #FDC800;
overflow: hidden;
text-align: center;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
#animationWindow {
width: 100%;
height: 100%;
}
#button{
width: 100px;
height:40px;
z-index: 10;
position: absolute;
top:200px;
left:200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Lottie swap</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.9.4/lottie.min.js" integrity="sha512-ilxj730331yM7NbrJAICVJcRmPFErDqQhXJcn+PLbkXdE031JJbcK87Wt4VbAK+YY6/67L+N8p7KdzGoaRjsTg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head><script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-player/1.5.7/lottie-player.js" integrity="sha512-wUgyNk7aI5qo1G294znyaFsJi8JbXTyTn7QEViCh+f021/yo6aKHPw3GX19txyhfiLQIB/duQcSKADt1GqE+KA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<body>
<div id="test">
</div>
<button id="button" >Click me</button>
</body>
</html>
<!-- Link to the script-->
<script type="module" src="js/script.js"></script>
I Made a button using html, css and js which occurs randomly on the page.But i want the button inside the body tag and it keeps getting out.
HTML CODE:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="main.js" defer></script>
<link rel="stylesheet" href="style.css">
<title>SReflex</title>
</head>
<body>
<button class="random">1 </button>
</body>
</html>
CSS CODE:
*{
margin:0%;
padding:0%;
}
body{
height: 100vh;
width: 100vw;
position: fixed;
}
button.random {
/* looks of the button */
height: 3rem;
width: 3rem;
border: black;
border-style: solid;
border-radius: 50%;
display:block;
position:absolute;
}
JS CODE:
let temp= document.querySelector(".random");
temp.addEventListener("click",change);
function change(){
let posx = Math.floor(Math.random()*1000);
let posy = Math.floor(Math.random()*1000);
let posz = Math.floor(Math.random()*1000);
temp.style.left= posx + "vw";
temp.style.top= posy+ "vh";
temp.style.right= posz+ "vw";
}
How do i make the button to not go off screen, i want the page to not include the scroll bar.
Here is an easy way to do so, it works for the body or for a containing div because it's related to parent size.
check out the snippet.
let temp= document.querySelector(".random");
temp.addEventListener("click",change);
let maxw = temp.parentElement.clientWidth - 50;
let maxh = temp.parentElement.clientHeight - 50;
function change(){
let posx = Math.floor(Math.random() * (maxw));
let posy = Math.floor(Math.random() * (maxh))
temp.style.left= posx + "px";
temp.style.top= posy+ "px";
}
*{
margin:0%;
padding:0%;
}
body{
height: 100vh;
width: 100vw;
position: fixed;
}
button.random {
/* looks of the button */
height: 3rem;
width: 3rem;
border: black;
border-style: solid;
border-radius: 50%;
display:block;
position:absolute;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="main.js" defer></script>
<link rel="stylesheet" href="style.css">
<title>SReflex</title>
</head>
<body>
<button class="random">1 </button>
</body>
</html>
the -50 is to make sure it doesn't cross the edges, you can edit that to suit your needs.
I have some code to get the size of the body on screen during a window resize event and use this elsewhere, however for some reason the size that is determined is always the size before the resizing:
$(document).on('ready', function () {
initResize();
});
function initResize() {
$(window).on('resize', doResize).trigger('resize');
};
function doResize() {
var wh = $('.game').height();
var ww = $('.game').width();
console.log("game " + ww +"x" +wh);
}
and the console output always returns the same data, yet if I change the selector to $(window) it changes as the window resizes. Can someone help please?
the html is very simple:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="assets/css/myStyle.css" /
<script type="text/javascript" src="assets/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="assets/js/init.js"></script>
</head>
<body>
<section class="game">
</section>
</body>
</html>
and the css:
#charset "utf-8";
* {
padding: 0;
margin: 0;
border: none;
outline: none;
}
html {
font-size: 62.5%;
}
html, body {
height: 100%;
width: 100%;
overflow: hidden;
}