I tried to resize a svg (which i did put into the div). I tried out:
document.getElementById('pload').setAttribute("height", "15%");
document.getElementById('pload').css("height", "15%");
document.getElementById('pload').attr("height", "15%");
document.getElementById('pload').style.height = "15%";
I always get "Cannot read property 'style/ css/ attr/ setAttribute' of null.". I can interact with document.getElementById('pload') but can't change any style properties. Everything should already be loaded (see JS: EventListener). Else there are just some timers in the function, nothing should interfere with the svg/div (i just change some style properties in the svg with jquery, no id's or var's are shared. Can interact with svg id's just fine, "EventListener" "load" also works fine). I have no idea anymore what this problem could be.
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="pload">
//svg (#pagepreload) here
</div>
</body>
</html>
CSS:
#pagepreload *{
visibility: hidden;
}
#pagepreload #mappin, #pagepreload #ring {
visibility: visible;
}
#pagepreload{
position: absolute;
padding: 0;
border: 0;
margin: 0;
height: 100%;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
}
#pload{
padding: 0;
border: 0;
margin: 0;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 30%;
transition: top 1s ease-in-out, left 1s ease-in-out, height 1s ease-in-out, transform 1s ease-in-out;
}
JS:
window.addEventListener("load", afterload(), false);
function afterload(){
document.getElementById('pload').style.height = "15%";
//timers here (accessing svg content)
};
Thanks for your time and effort in advance.
Your script loaded before dom parse.
Use defer to solve this problem.
<script src="script.js" defer></script>
Or use your script link before end of body tag.
You are calling the afterload method when you are attaching it to the load event.
Do this instead:
window.addEventListener("load", afterload, false);
function afterload(){
document.getElementById('pload').style.height = "15%";
//timers here (accessing svg content)
};
Related
As I wrote in the title, when user clicks on the square it should move 100px to the right and after next click it should move 100px again to the right but square is going back to left. How can I fix this?
Also in JSFiddle code is working but when I open this on Chrome it's giving me error:
Cannot read properties of null (reading 'addEventListener')
<html>
<head>
<title>JavaScript animation</title>
<style>
#square {
width: 100px;
height: 100px;
background-color: #333;
position: absolute;
left: 0px;
top: 100px;
transition-duration: 3s;
transition: left 1.5s ease-in-out;
}
#square.active {
left: calc(100px);
transition: left 1.5s ease-in-out;
}
</style>
<script>
const square = document.querySelector('#square');
square.addEventListener('click', toggleActive);
function toggleActive() {
square.classList.toggle('active');
}
</script>
</head>
<body>
<div id="square"></div>
</body>
</html>
JS Fiddle link
Right now you're simply toggling the class, so it moves right and back to its original position.
You need to add a value to the already existing value, in this case 100 pixels.
Also not getting an error from your original fiddle.
const square = document.querySelector('#square');
square.addEventListener('click', moveRight);
function moveRight() {
square.style.left = square.offsetLeft + 100+'px';
}
#square {
width: 100px;
height: 100px;
background-color: #333;
position: absolute;
left: 0px;
top: 100px;
transition-duration: 3s;
transition: left 1.5s ease-in-out;
}
<div id="square"></div>
Ok so, first of all, Here's my code.
var loader = document.getElementById("loader");
window.addEventListener("loader", function () {
loader.style.display = "none";
})
body {
height: 100%;
widows: 100%;
overflow: hidden;
}
.loader {
position: absolute;
height: 80px;
width: 80px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border: 6px solid lightgrey;
border-radius: 100%;
border-top: 6px solid skyblue;
animation: spin 1s infinite linear;
}
#keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
<div class="loader" id="loader"></div>
<h1>Hello World</h1>
Now the problem is that the content gets loaded but the spinner doesn't disappear. Any Solutions.
BTW. This is my first post here so if you find that the code is not formatted correctly or some other mistake then forgive me.
loader is not an event.
window.addEventListener ("loader", function() )
Change that to:
window.addEventListener ("load", function() {
loader.style.display = 'none';
});
window.addEventListener ("load", fn()) waits until everything is loaded, including stylesheets and images.
The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading.
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
You can use onload to hide the spinner when the page content had been loaded
To hide the spinner when the web page has completely loaded :
window.addEventListener ("load", function() {
loader.style.display = 'none';
});
With Timeout :
//Hide the spinner after 2 seconds
setTimeout(function(){loader.style.display = 'none';}, 2000);
With Jquery :
$(window).load(function(){
// PAGE IS FULLY LOADED
loader.style.display = 'none';
});
Demo Example :
var loader = document.getElementById('loader');
window.addEventListener ("load", function() {
//Hide the spinner after 2 seconds
setTimeout(function(){loader.style.display = 'none';}, 2000);
});
body {
height: 100%;
widows: 100%;
overflow: hidden;
}
.loader {
position: absolute;
height: 80px;
width: 80px;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border: 6px solid lightgrey;
border-radius: 100%;
border-top: 6px solid skyblue;
animation: spin 1s infinite linear;
}
#keyframes spin {
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Loader Example</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="loader" id="loader"></div>
<h1>Hello World</h1>
</body>
</html>
Does this work?(you have to download JQuery to use this)
window.onload(function() {
$(“#loader”).css(“display”, “none”);
});
Loader is not event so that doesn't work same way you are thinking
Create an element right below or end of loading process, and use jquery onload event on that Element, >> as process will done that Element will appear and it will trigger function.
I'm trying to give my ng-view an animation, I have exactly the same code as the example and I so no error or anything.
This is my html code:
<div ng-view class="slidedown">
<!--Insert templates-->
</div>
, css code:
.slidedown {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.slidedown.ng-enter,
.slidedown.ng-leave {
-webkit-transition: all 1s ease;
transition: all 1s ease;
}
.slidedown.ng-enter {
top: -100%;
}
.slidedown.ng-enter-active {
top: 0;
}
.slidedown.ng-leave {
top: 0;
}
.slidedown.ng-leave-active {
top: 100%;
}
and yes I have defined the source files:
<!-- CSS -->
<link href="assets/Css/ng-view.css" rel="stylesheet" type="text/css">
<!-- JS -->
<script src="componenten/bower_components/angular-animate/angular-animate.min.js"></script>
<script src="componenten/bower_components/angular-route/angular-route.min.js"></script>
So I really don't get it why it isn't working.
Am I missing something?
In my case the problem was that I forgot to include module dependency ['ngAnimate'].
hi i would like to create some animations using javascript when i thought of something which didn't work (i am a beginner in js)
so in simple i have a box at the top of my page and i want to change its css properties on pageload like width , margin -top margin -bottom and etc
here is my code -
<html>
<head>
<style>
#div{
backgroud: #ecb4df;
width: 200px;
height: 50px;
}
</style>
<script>
function codeAddress() {
/* the code here */
}
window.onload = codeAddress;
</script>
</head>
<body>
<div id="div"></div>
</body>
</html>
moreover is this way correct and workable or is there any other way of tackling my problem , if yes please tell that too
I can strongly recommend you to look at CSS animations, they perform much better and are easier to maintain.
In JavaScript all you need to do is add or remove a class.
<style>
.my-div {
-webkit-transition-property: top, left;
-moz-transition-property: top, left;
-o-transition-property: top, left;
transition-property: top, left;
-webkit-transition: 2s ease-in-out;
-moz-transition: 2s ease-in-out;
-o-transition: 2s ease-in-out;
transition: 2s ease-in-out;
position: absolute;
top: 200px;
left: 200px;
}
.initial {
top: 0px;
left: 0px;
}
</style>
<div id="mydiv" class="my-div initial">Ipsum Lorem</div>
<script>
setTimeout(function () {
document.getElementById("mydiv").className = "my-div"; // remove "initial" to trigger animation
});
</script>
http://jsfiddle.net/srTnE/1/
I'm trying to implement a very simple vertical slide down panel in Wordpress, I've tried jbar (http://tympanus.net/codrops/2009/10/29/jbar-a-jquery-notification-plugin/) and an easy JS method I found at http://jsfiddle.net/ahr3U/
But I still cannot get this implemented, I've tried inserting the below code in the footer.php right before it's close, and within the header.php and still nothing appears.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
<script>
$(document).ready(function(){
$("#notification").addClass("visible");
});
</script>
And CSS:
#notification {
background-color: #F00;
color: #FFF;
height: 25px;
position: absolute;
top: -25px;
width: 100%;
transition: top 0.5s;
-moz-transition: top 0.5s;
-webkit-transition: top 0.5s;
-o-transition: top 0.5s;
}
#notification.visible {
top: 0px;
}
The HTML CTA via the div, I've tried calling with the <head> and <body>
<div id="notification">Page load complete...</div>
Try putting the script code in the and make sure you close the first script tag where you include the jquery library
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>