How to get spinner to disappear once url loads - javascript

I have created a small program with a spinner. Once the url completely loads in the iframe, then the spinner is supposed to disapear. I can get the page to load but I cannot get the spinner to disappear.
Here is my javascript code(I am not sure if the style.display='none' line is valid:
var overlay = document.getElementById("overlay");
window.addEventListener('load', function(){
overlay.style.display = 'none';
})
Here is my html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Spinner</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="overlay">
<div class="spinner"></div>
</div>
<iframe width="1120" height="630" src="https://tommcfarlin.com/check-if- a-page-is-in-an-iframe/" frameborder="0" allowfullscreen></iframe>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
Here is my CSS code:
body{
width: 100%;
height: 100%;
overflow: hidden;
}
.spinner{
width: 80px;
height: 80px;
border: 2px solid #f3f3f3;
border-top:3px solid #f25a41;
border-radius: 100%;
position: absolute;
top:0;
bottom:0;
left:0;
right: 0;
margin: auto;
animation: spin 1s infinite linear;
}
#keyframes spin {
from{
transform: rotate(0deg);
}to{
transform: rotate(360deg);
}
}
#overlay{
height:100%;
width:100%;
background:rgba(0, 0, 0, .8);
position:fixed;
left:0;
top:0;
}
I think my issue is in the Javascript but please correct me if I am wrong here.
I have also included a screen print showing that the page is loaded in the background but the spinner is still there.
Thanks in Advance.

I think your script didn't load to your html code so try to change your html code to that code:-
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Spinner</title>
<link rel="stylesheet" href="main.css">
<script>
window.onload = function(){
var overlay = document.getElementById("overlay");
overlay.style.display = 'none';
};
<script>
</head>
<body>
<div id="overlay">
<div class="spinner"></div>
</div>
<iframe width="1120" height="630"
src="https://tommcfarlin.com/check-if- a-page-is-in-
an-iframe/" frameborder="0" allowfullscreen></iframe>
</body>
</html>

Your JS is fine. I am not sure what the exact error is I tried the same on my pc and it seems to work fine. I would suggest you put your script just before the end of body tag or after the end of the overlay div because HTML loads and parses by line, if JS does not find your overlay div it throws an exception and the code breaks.

Related

adding an jpg image in the css in a javascript game

I currently have the beginning's of a flappy bird game and the css generates a small red ball. I want to replace the ball with a jpg image taken from the internet, which I can also style and control/animate from the css, as I would do with the ball.
Image source: "https://img1.pnghut.com/16/12/25/KjSdhUe19q/logo-app-store-smiley-smile-score.jpg"
I've tried various things to put it in the CSS and in the HTML, but do not fully understand how it all ties together.
If I add the image (as I have done) in the html, can I not style it using the CSS?
For now, I want to:
Render the image on the screen (as I have done)
Style it to the same specs as the red ball (e.g. 20 x 20 etc, with starting positions, positioning etc)
Currently the TOP POSITION in the CSS seems to work (when applied to the image) but not the width and height. I had to hard code the width and the height of the image in to the HTML.
Any explanations as to best practices and a solution please.
Full current code here:
https://repl.it/#iamapersonthing/flappybirds
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>FlappyBird</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="game">
<div id="block"></div>
<div id="hole"></div>
<div id="character">
<img src="https://img1.pnghut.com/16/12/25/KjSdhUe19q/logo-app-store-smiley-smile-score.jpg">
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
*{
padding:0;
margin:0;
}
#game{
width:400px;
height:500px;
border: 1px solid greenyellow;
margin:auto;
overflow:hidden;
}
#block{
width:50px;
height:500px;
background-color:greenyellow;
position: relative;
left:400px;
animation:block 2s infinite linear;
}
#keyframes block{
0%{left:400px}
100%{left:-50px}
}
#hole{
width:50px;
height:150px;
background-color:red;
position: relative;
left:400px;
top:-500px;
animation:block 2s infinite linear;
}
#character{
width:20px;
height:20px;
background-color:red;
position: absolute;
top:100px;
border-radius:50%;
}
JavaScript
var block = document.getElementById("block");
var hole = document.getElementById("hole");
hole.addEventListener('animationiteration',() => {
var random = -((Math.random()*300)+150);
hole.style.top=random +"px";
});
You have to add you style to the img tag. You'll have to add a display:block as well otherwise, the image will not take the width and height you specified.
#character img{
width:20px;
height:20px;
background-color:red;
position: absolute;
top:100px;
border-radius:50%;
}
If you want a guide on how to select your components and which one is stronger, you can read that CSS Batman guide : http://batificity.com/
For your problem, you can also use an object-fit. Like so :
var block = document.getElementById("block");
var hole = document.getElementById("hole");
hole.addEventListener('animationiteration',() => {
var random = -((Math.random()*300)+150);
hole.style.top=random +"px";
});
*{
padding:0;
margin:0;
}
#game{
width:400px;
height:500px;
border: 1px solid greenyellow;
margin:auto;
overflow:hidden;
}
#block{
width:50px;
height:500px;
background-color:greenyellow;
position: relative;
left:400px;
animation:block 2s infinite linear;
}
#keyframes block{
0%{left:400px}
100%{left:-50px}
}
#hole{
width:50px;
height:150px;
background-color:red;
position: relative;
left:400px;
top:-500px;
animation:block 2s infinite linear;
}
#character{
display:block;
width:20px;
height:20px;
background-color:red;
position: absolute;
top:100px;
border-radius:50%;
}
#character img{
width: 100%;
height: 100%;
object-fit: cover;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>FlappyBird</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="game">
<div id="block"></div>
<div id="hole"></div>
<div id="character">
<img src="https://img1.pnghut.com/16/12/25/KjSdhUe19q/logo-app-store-smiley-smile-score.jpg">
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Full object-fit specification here : https://developer.mozilla.org/fr/docs/Web/CSS/object-fit
You have many ways to possibly solve your issue. The best way in my opinion is to not use a IMG object at all and instead use a DIV that changes its background properties. This allows you to use a sprite sheet more easily because you can set the offsets for x and y in a background image. This also allows you to more easily change the image being used by changing the background-image property.
Alternatively, you can continue using IMG objects and just unload that HTML and replace it with a new IMG object with a different src parameter. JQuery makes this a lot easier to manage in my experience, but it can be done fairly easily using straight JS as well. Here's how I'd do this in JQuery (because I simply remember this syntax better):
$('#character').html('<img src="new image address">');
As far as editing the width/height, it comes down to just manually setting the offset afterwards and leaving the width/height alone (assuming you aren't already forcing dimensions onto the image) or for manual placement/positioning, just manually setting the width/height every time you replace the image.

The character encoding of a framed document was not declared

So, i've been searching in everywhere for a resolution to my problem, but i think i've tried everything but my code is not working at all.
I'm trying to put some text of a txt file in a iframe, and it's actually reading it, but, when i try to change the css, appears the message in the title: "The character encoding of a framed document was not declared."
This is my code:
<!DOCTYPE html>
<html lang = "pt">
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
h1{
position: absolute;
left:85px;
top:0px;
}
.LOGO{
position: absolute;
width:70px;
height:70px;
z-index: 2;
}
.portugal{
position: absolute;
top: 65px;
left: 0px;
width:auto;
height:auto;
z-index: 1;
}
.PT01{
position: relative;
top: 438px;
left:560px;
width:20px;
height:20px;
z-index: 3;
}
</style>
</head>
<body>
<script>
var x = document.getElementsByTagName("PT01");
if(x.id == 'PT01'){
$("#div1").css("border-style","none");
$("#div1").css("position",'relative');
$("#div1").css("top",'315px');
$("#div1").css("left",'535px');
$("#div1").css("width",'auto');
$("#div1").css("height",'auto');
$("#div1").css("zIndex",'4');
}
</script>
<img class = "LOGO" src = "http://www.chronopost.pt/sites/all/themes/custom/quimera/favicon.ico"/> <h1> Informações Package Chronopost </h1>
<img class = "portugal" src = "http://s2.thingpic.com/images/HV/9N2YRDXBuosfkppy9Jut8Tvx.png"/>
<img class = "PT01" name = "PT01" src = "http://www.chronopost.pt/sites/all/themes/custom/quimera/favicon.ico"/>
<iframe id='div1' src = "PT01.txt">
</iframe>
</body>
</html>
I hope you can help me with this! I'm just a student and i'm trying to learn more.
Thank you!
Possible duplicate here
You can try this, add this between your iframe tag:
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">

html css and js not working

This is my code:
<!doctype html>
<html lang="en-US">
<head>
<title>Welcome - Home</title>
<link type="text/css" rel="stylesheet" href="Home.css">
<link rel="icon" href="KLOGO.png" type="image/png"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="Home.js"></script>
</head>
<body class="menu">
<header>
Toggle
<nav class="menu-side">
This is a side menu
</nav>
</header>
<p> sioeufh iufha dgrkljbgril unfvuabervluiyboyubn serlibglisuhsefiuh oaisuf aieufh aosih asioeufh iufha dgrkljbgril unfvuabervluiyboyubn serlibglisu</p>
<p>oierua yugafapiwugText and more tejiaslirfuh aiufh oaiuefhioaushf aisbhfailsubfaufha dgrkljbgril unfvuabervluiyboyubn serlibglisuh oaiusg foiygasdefoiawg pghuioyf gaiwuebfyaweoilru gfa s7ierfygasrgoooa8iweygfra iiiastygf a8we8</p>
</body>
</html>
The css:
.menu-side{
background: #333;
border-right: 1px solid #000;
color: #fff;
position: fixed;
top: 0;
left: -231px;
width: 210px;
height: 100%;
padding: 10px;
}
.menu{
overflow-x:hidden;
position: relative;
left: 0px;
}
.menu-open {
left: 231px;
}
And the jquery:
(function () {
var body = $('body');
$('.menu-toggle').bind('click', function () {
body.toggleClass('menu-open');
return false;
});
})();
I'm using the Brackets program to write my code, but when I go to the live view after I saved everything and i press "toggle" the page wont move and I looked over everything and Im 98% sure its correct.
Put <script src="Home.js"></script> before the </body> tag.
I made another class
.menu-side-open{
left:0px;
}
and JQuery
(function () {
var body = $('body');
$('.menu-toggle').bind('click', function () {
body.toggleClass('menu-open');
$('.menu-side').toggleClass('menu-side-open');
return false;
});
})();
Also added
.menu, .menu-side{
transition: 300ms;
}
for a nice slide :)
JSFiddle demo
You need to include jQuery if you want to use it.
Add this line
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
In your html's head or before you use jQuery!
e.g.
<head>
<title>Welcome - Home</title>
<link type="text/css" rel="stylesheet" href="Home.css">
<link rel="icon" href="KLOGO.png" type="image/png"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="Home.js"></script>
Change this:
body.toggleClass('menu-open');
to this:
$('.menu-side').toggleClass('menu-open');
And change the .menu-open css class to this:
.menu-open {
top:10%;
left: 0px;
}
Here is the JSFiddle demo
Its the .menu-side that is hidden on the left. Therefore you should be applying the menu-open class to .menu-side and not the body tag.
Your CSS was setting the left of .menu-side to 231px, setting it back to 0px is enough to make the menu appear back into view. And when the menu appeared, it covered the 'Toggle' link, therefore I also added top:10% to the .menu-open class CSS.
I think it is related to a missing file from the computer. I have the same issue with my computer and it does not really matter wether you put the CSS and JS into the HTML page. The result will be the same. When you open the page in the browser, you won`t see any changes, and if I press F12 it says: Failed to load resource: net::ERR_FILE_NOT_FOUND or dll file not found or something like that

On keypress zoom my Image

I have a various images displayed one below the other at the center of the page.
On keyPress I want to display or zoom a particular image in the list at the center of the page.
Something like, the image is not zoomed, but another copy of the image from that position is displayed using transition.
The code I have tried is this:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="Stylesheet" type="text/css" href="channel.change.css" />
<script>
var image = document.getElementById("img1");
image.addEventListener('keydown', doKeyDown, true);
function doKeyDown(e){
//====================
// THE W KEY
//====================
if (e.keyCode == 87) {
image.setAttribute('style', 'width:300px !important;');
}
}
</script>
</head>
<body>
<div>
<img id="img1" src="http://sphotos-c.ak.fbcdn.net/hphotos-ak- snc6/189287_403070459759757_137788631_n.png" alt="" class="zoom_image"/>
</div>
</body>
</html>
my css code is :
.zoom_image
{
display: block;
padding: 10px 10px 10px 10px;
position:relative;
width:100px;
height:80px;
left:0px;
top:0px;
border:1px solid black;
-webkit-transition: width 0.3s ease,height 0.3s ease,left 0.3s ease,top 0.3s ease;
}
.zoom_image:hover
{
width:500px;
height:480px;
left:-25px;
top:-25px;
z-index:9999;
}
I want my css to apply on the image on keyPress
Try
document.addEventListener('keydown', doKeyDown, true); instead
DEMO
W to zoom-in, X to zoom-out
(this will only work in chrome though, for other browsers you'll have to add browser-specific css)

Show image when clicking image

I am making a fake computer screen with images. I have a picture of a Firefox icon and when the mouse hovers over it, it increases in size, and I would like another picture to appear when clicking on the picture of the icon. This is the closest I have been able to get.
<html>
<title> Scope </title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<embed src="73797^alarmclock.mp3"; autostart="true"; loop="true"; hidden="true";/>
<body>
<img src ="alarm clock2.jpg"/>
<p> Pulling the sheets into my body, I begin to sink back into the bed...
uggh... my alarm clock... time to get up..
<img id="computerscreen" src= "computer.jpg"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="script.js"></script>
<img id="grow" src="icon2.gif"/>
<img class="show hidden" src="screen2.jpg" />
</body>
Here is CSS
#grow{
position:absolute;
top:1157px;
left:599px;
width:47px;
z-index:4;
height:47px;
}
#grow:hover{
top:1137px;
left:589px;
width: 70px; !important;
height: 70px; !important;
cursor:pointer;
}
.hidden {
display:none;
position:absolute;
top:300px;
right: 0px;
width:850px;
height:550px;
z-index:6;
}
#computerscreen{
position:absolute;
top:300px;
right: 0px;
z-index:3;
}
and Script
$(document).ready(function(){
$('#grow').click(function() {
$('.hidden').fadeIn('slow', function() {
});
});
Seems you don't need the callback from the fadeIn(), just call fadeIn
$('.hidden').fadeIn('slow');
on '.hidden' in the css remove the display:none; and hide it in the jQuery so here is what the jQuery will look like...
$(document).ready(function () {
$('.hidden').hide();
$('#grow').click(function () {
$('.hidden').fadeIn('slow');
});
});
I have also removed the callback function, because you do not need it.

Categories