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
Related
On my index page, when I click a button the page background turns to black but not on the other pages, even if I link the .js file to all html documents. How do I make it so that the background turns black to all pages on a button click.
Here is what I've got so far
function myFunction() {
document.getElementsByTagName("body")[0].style.cssText = "background: black;"
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<style>
body {
background: white;
}
</style>
</head>
<body>
<button id="button" onclick="myFunction()">Change to black</button>
</body>
</html>
You could save the background color in localStorage and read it upon page load. Whenever you navigate to another page of your site - which loads that script - it will read the stored value and change the background color accordingly.
Script (customize.js):
function setBGColor() {
var bgColor = localStorage.getItem("bgColor");
document.body.style.backgroundColor = bgColor;
}
function changeBGColor(newColor) {
localStorage.setItem("bgColor", newColor);
setBGColor();
}
setBGColor();
In your HTML:
...
<body>
<button id="button" onclick="changeBGColor('black')">Change to black</button>
</body>
This question already has answers here:
Attaching click event to a JQuery object not yet added to the DOM [duplicate]
(10 answers)
Closed last year.
I want to switch once a button is pressed. This is the code. It would not be for something so simple, but I can't even get this to work.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS Test</title>
<script src="app.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="page-section page-1 active"><h1>I'm page 1</h1></div>
<div class="page-section page-2"><h1>I'm page 2</h1></div>
<button class="link link-1">Page 1 link</button>
<button class="link link-2">Page 2 link</button>
</body>
</html>
CSS
.page-section {
width: 200px;
height: 200px;
display: none;
}
.page-1 {
background-color: blue;
}
.page-2 {
background-color: red;
}
.page-section.active {
display: block;
}
JS
function pageActivator(page) {
$('.page-section').removeClass('active');
page.addClass('active');
}
$('.link').click(function() {
var pageNum = parseInt($(this).attr('class').match(/\d+/g)[0]);
pageActivator($('.page-' + pageNum));
});
This is the codepen, on the website it works, while locally it doesn't I have no idea why.
I really don't understand because the code is the same from the codepen, maybe I am missing something on the HTML file? Even if the .js file is correctly connected, I have verified it. And the CSS file too.
You use JQuery codes but you did not call JQuery library. Do the following:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS Test</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="style.css">
</head>
I am testing a scroll down button on a website and wondering why the action does not work.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style_sheet.css" type="text/css" rel="stylesheet" />
<title>COS</title>
<script>
$(function() {
$('.scroll-down').click (function() {
$('html, body').animate({scrollTop: $('section.ok').offset().top }, 'slow');
return false;
});
});
</script>
</head>
<body>
<section>
<p>SCROLL DOWN CSS</p>
</section>
<section class="ok">
<p>OK SCROLL !</p>
</section>
</body>
</html>
If I understand right, the javascript should be located in head. What am I doing wrong?
In the code you've posted, there's no jQuery linked in.
Try inserting <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
`
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
I am creating a webapp using phonegap and jquerymobile. When i am using changePage to go to other page then it is not working.Here is my code
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; user-scalable=no" />
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<link rel="stylesheet" href="jquery.mobile-1.0.1.min.css" />
<script type="text/javascript" src="jquery.mobile-1.0.1.min.js"></script>
</head>
<script type="text/javascript">
function clickEvent()
{
$.mobile.changePage("account_page.html", null, true, true);
}
</script>
<body>
<div style="top: 0; left: 0; position: absolute; z-index: 1;">
<img src="images/login_screen.JPG" alt="login_screen" width="320" onclick="clickEvent()"/>
</div>
</body>
</html>
But when i use
window.location.href = 'file:///android_asset/www/account_page.html';
Then it is working...Why is it so?
$.mobile.changePage doesnt load another html into view. it scans the html in the html whose link u gave, gets the first jqm 'page' on it and adds that into the dom(not the entire html) If this is not what you intended to do and wanted to load the full account_page.html into the dom then u'll have to use either
window.location.href or navigator.app.loadUrl