I want to make a javascript (a javascript animation) as a preloader for a website for my project.
Something along the lines of this:
http://soulwire.github.io/Plasmatic-Isosurface/
I want this to run first and until the elements of my page are downloaded and after that it should turn off and show the completely loaded page
Is this possible?
Thanks
Here's a sample HTML Code I want to test it on
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Javascript preloader</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="preloader"></div>
<canvas id='canvas'></canvas>
<script src="js/index.js"></script>
<img src="https://wallpaperscraft.com/image/stars_sky_shore_84534_1920x1080.jpg" alt="safe"></img>
</body>
</html>
**EDIT TO CODE APOLOGIES
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Preloader Testing</title>
<style>
.preloader{
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1000;
}
</style>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<canvas class="preloader" id='canvas'></canvas>
<script src="js/index.js"></script>
<img src="https://wallpaperscraft.com/image/stars_sky_shore_84534_1920x1080.jpg" alt="safe"></img>
</body>
<script>
//after window is loaded completely
window.onload = function(){
//hide the preloader
document.querySelector(".preloader").style.display = "none";
}
</script>
</html>
You can show the preloader by default. And once the web page is completely loaded, you just hide it. Here is a code sample
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Javascript preloader</title>
<link rel="stylesheet" href="css/style.css">
<style>
/*Styling preloader*/
.preloader{
/*
Making the preloader floating over other elements.
The preloader is visible by default.
*/
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 1000;
}
</style>
</head>
<body>
<div class="preloader"><span class="preloader-js"></span></div>
<canvas id='canvas'></canvas>
<script src="js/index.js"></script>
<img src="https://wallpaperscraft.com/image/stars_sky_shore_84534_1920x1080.jpg" alt="safe"></img>
</body>
<script>
//after window is loaded completely
window.onload = function(){
//hide the preloader
document.querySelector(".preloader").style.display = "none";
}
</script>
</html>
Thanks
Put everything you need for your animation in a div with an id and everything you need for your content in another. Give your content display: none in your stylesheet. Now you can use window.onload to change the styles document.getElementbyId().style.display = none/inline
Related
I would like to close an iframe using a button that exists inside that iframe.
I have these two files, index.html and contents.html:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
a {
postion: relative;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<iframe id="outerIframe" src="./contents.html" width="1000px" height="1000px"></iframe>
<div class="behind">
Mark Behind
</div>
</body>
</html>
contents.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.big-box {
height: 500px;
width: 500px;
background-color: #666;
}
</style>
</head>
<body>
<div class="big-box">
<button class="closer" type="button" name="button">Click to close</button>
</div>
<script type="text/javascript">
var button = document.querySelector('.closer');
button.addEventListener('click', function() {
document.getElementById('outerIframe').style.display = "none";
});
</script>
</body>
</html>
When I click the button, I get an error in the console that says "Cannot read property 'style' of null. I understand that means my attempt to get the iframe was not successful. How would I get the iframe this button resides in so that I can change the styles on it?
Need to traverse up to parent window. An iframe has it's own window
Try
button.addEventListener('click', function() {
window.parent.document.getElementById('outerIframe').style.display = "none";
});
DEMO
I am trying to set loading page and I set timeout to 5 seconds before moving to the index.html page.
I want to transfer to this page with some basic fade in transition and I would like to know how I can do this ?
My currently code is:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Go Post - HomePage </title>
<link rel="stylesheet" href="includes/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
setTimeout(function(){
window.location='index.html';
}, 3000);
</script>
</head>
<body>
<div class="load"></div>
</body>
</html>
You can simply do this by jquery fadeOut.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Go Post - HomePage </title>
<link rel="stylesheet" href="includes/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Import jquery -->
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
setTimeout(function(){
$('html').fadeOut(
500, // animation time
function(){
// action will do after the animation
window.location='index.html';
}
);
}, 3000);
</script>
</head>
<body>
<div class="load"></div>
</body>
</html>
Try the below
In HTML add the div
<div id="preloader">
</div>
jQuery
$(function() {
setTimeout(function() {
$('#preloader').fadeOut('slow', function() {
window.location = "https://google.com";
});
}, 5000);
});
CSS:
div#preloader {
background: url("http://www.mytreedb.com/uploads/mytreedb/loader/ajax_loader_blue_512.gif") no-repeat scroll center center #000000;
height: 100%;
position: fixed;
width: 100%;
z-index: 999;
}
Demo : http://codepen.io/anon/pen/gPqLPX
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Girl! Fly and eat the yogurt!</title>
<script src="js/easeljs-0.8.1.min.js"></script>
<script src="js/sketch.js"></script>
<script src="jquery-1.11.3.min"></script>
<link rel="stylesheet" href="css/particles.css">
<style type="text/css">
#frame {
position: relative;
text-align: center;
margin-top: 100px;
}
</style>
</head>
<body>
<div id = "frame">
<canvas class=" sketch" height="385" width="1440"></canvas>
</div>
<script src="js/particles.js"></script>
<script>
var canvas = $("#frame").get(0);
canvas.id = "gameView";
</script>
<script src="js/app.js"></script>
</body>
</html>
Would you please tell me how to get the canvas inside the div using either jQuery or vanilla JS in this specific case? And how to set an id for the captured canvas element?
var canvas = document.querySelector('canvas');
I really need help with this one. I would like to replace the default scrollbar on my iframe with the "perfect scrollbar".
I have downloaded the perfect scrollbar. I also have included the needed files into my html document. According to the documentation, I set up the style of content container inside my iframe. The result is, that when I load my main page and move the mouse cursor on iframe, the "perfect-scrollbar" appears, but the default scrollbar remains. Next issue is, that the new scrollbar is not functional at all. It starts on the top of the iframe content and it ends at the bottom of the iframe content so I can not scroll with it.
HTML of my iframe content page:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sk" lang="sk">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" media="all" href="../css/iframestyle.css" />
<link rel="stylesheet" type="text/css" media="all" href="../css/perfect-scrollbar-0.4.8.min.css" />
<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="../js/perfect-scrollbar-0.4.8.min.js"></script>
<script type="text/javascript" src="../js/perfect-scrollbar-0.4.8.with-mousewheel.min.js"></script>
<script type="text/javascript" src="../js/scroll.js"></script>
<title>TITLE</title>
</head>
<body>
<div id="amfCont">
..... // content to be scrolled
</div>
</body>
</html>
CSS:
#amfCont {
font-family:"Verdana";
text-align:justify;
position:relative;
overflow:hidden;
}
JS (included scroll.js)
$(document).ready(function() {
"use strict";
$('#amfCont').perfectScrollbar();
});
Can anyone point out what do I have wrong here?
Try jQuery Scrollbar in your iframe.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Scrollbar Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://gromo.github.io/jquery.scrollbar/jquery.scrollbar.css">
<script src="//code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://gromo.github.io/jquery.scrollbar/jquery.scrollbar.js"></script>
<script>
jQuery(function($){
$('.page-wrapper').scrollbar();
});
</script>
<style type="text/css">
html, body, .page-wrapper {
border: none;
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
.page-content {
padding: 10px 20px;
}
</style>
</head>
<body>
<div class="page-wrapper scrollbar-macosx">
<div class="page-content">
[CONTENT HERE]
</div>
</div>
</body>
</html>
In example above I've used scrollbar-macosx class, but you can choose any from predefined styles or make your own custom scrollbar - it's fully CSS customizable.
#amfCont needs a height property for this plugin to work. Here's the example from the docs.
#container {
position: relative;
height: 100%; /* Or whatever you want (eg. 400px) */
}
I'm studying Jquery, and I was trying to do a simple SlideShow, but nothing happens...
Here's my HTML
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/Style.css">
<meta charset="UTF-8">
<title>SlideShow</title>
</head>
<body>
<div id="slides">
<img src="imgs/1.jpg">
<img src="imgs/2.jpg">
<img src="imgs/3.jpg">
</div>
<script type="text/javascript">
$(function(){
$("#slides").cycle({
fx: 'fade',
speed:2000,
timeout:4000,
});
})
</script>
<script type="text/javascript" src="js/Jquery.js"></script>
<script type="text/javascript" src="js/Cycle.js"></script>
</body>
</html>
My Css:
*{
margin: 0;
padding: 0;
}
#slides{
width: 1024px;
height: 768px;
margin: 0 auto;
overflow: hidden;
}
I also tried to change, this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
for this:
<script src="js/jquery-1.11.0.js"></script>
Nothing...
You need to include jQuery before your Cycle plugin, so reverse the order of your scripts here:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/Cycle.js"></script>
Also, it's better to include CSS before Javascript as well as putting your Javascript at the bottom of your page before closing </body> tag.