i have a progress bar at the top of my page, i want the bar to show the progress of the loading of the web page. when the entire page is loaded for i want the bar to display 100%. i'm quite certain I need to list a variable of '$(window).load();' but i'm not sure where.
my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<style>
progress {
width: 100%;
height: 5px;
top: 0;
left: 0;
position: absolute;
color: #1990c8;
appearance: none;
-webkit-appearance: none;
-o-appearance: none;
}
progress::-moz-progress-bar {
background: #1990c8;
}
progress::-webkit-progress-value {
background: #1990c8;
}
progress::-webkit-progress-bar {
background: #e1e1e1;
}
</style>
</head>
<body>
<progress id="progressbar" value="0" max="100"></progress>
<span id="status"></span>
<script type="text/javascript" language="javascript">
function progressbaranimation(a) {
var bar = document.getElementById('progressbar');
bar.value = a;
a++;
var sim = setTimeout("progressbaranimation("+a+")");
}
var amount = 0;
progressbaranimation(amount);
</script>
<img src="http://media.npr.org/images/picture-show-flickr-promo.jpg">
<img src="http://dd508hmafkqws.cloudfront.net/sites/default/files/mediaimages/gallery/2012/Dec/AA-502716%20(1).jpg">
</body>
</html>
You can do this with basic javascript.
Check this http://yensdesign.com/2008/11/how-to-create-a-stylish-loading-bar-as-gmail-in-javascript/
Related
I'm using a Jekyll website, doesn't really matter because this is a static page, I just write it as additional info.
Desired behavior:
I want to load my stylesheet via javascript, so it can depend of a local stored value, let's say dark and light.
I have done a little test of loading it by JS with the following code (which works).
GREEN
<head>
...
<link rel="stylesheet" href="/assets/css/{{'light'}}.css">
...
</head>
This loads the CSS file called "light" as expected.
But now I want to depend of the localStorage, with a variable theme that has light as value. I tried the following:
RED
<head>
...
<script>
var storedTheme = window.localStorage.getItem('theme'); //Tested and working in console
theme = storedTheme ? storedTheme : 'light'; //global variable (also readable in console)
</script>
<link rel="stylesheet" href="/assets/css/{{theme}}.css"> <!-- cant read global variable -->
...
</head>
Using global variables doesn't work, it gives me a 404 error as the stylesheet path is /assets/css/.css.
After that I thought that maybe creating an element would do the trick and I created one manually to test it:
RED
<head>
...
<p id="theme" style="display:none;">dark</p>
<link rel="stylesheet" href="/assets/css/{{document.getElementById('theme').innerHTML}}.css">
...
</head>
And nope, the path still appears as: /assets/css/.css
If you change styles on the <body> you get FOUC (Flash Of Unstyled Content). Try using a close equivalent like <main> and spread it 100% x 100% and <html> and <body> as well, but give them margin and padding of 0 in order to ensure <main> covers them completely.
The [disabled] attribute for the <link> is the best way of toggling them because they are still loaded but inert. Also, in the example there is a function called loadTheme(e) that is loaded on the 'DOMContentLoaded' event which insures that all of the DOM is loaded before hand. The example below will not work because localStorage is blocked on SO. There is a functioning example on Plunker. To test it:
Click the green Preview button.
Another frame should appear on the right. Within the frame is the webpage example click the ☀️ button.
It should be in dark mode now. Next, click the refresh ⟳ button located in the mini-toolbar within the frame or press ctrl+enter for Windows OS or ⌥+return for Mac OS.
The page should still be in dark mode. 👍
/* night.css
main {
background: #000;
color: #fff;
}
*/
/* default.css */
:root {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font: 1ch/1.5 'Segoe UI';
}
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-size: 4ch;
}
main {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
color: #000;
}
form {
width: 80vw;
margin: 20px auto;
}
fieldset {
width: max-content;
min-height: 25px;
margin-left: auto;
padding: 0 1.5px 1.5px;
border-radius: 8px;
background: inherit;
color: inherit;
}
button {
display: block;
width: 100%;
height: 100%;
border: 0;
font-size: 4rem;
text-align: center;
background: transparent;
cursor: pointer;
}
#theme::before {
content: '☀️';
}
.night #theme::before {
content: '🌙';
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='lib/default.css' rel='stylesheet'>
<link class='night' href='lib/night.css' rel='stylesheet' disabled>
<style></style>
</head>
<body>
<main>
<form id='UI'>
<fieldset name='box'>
<legend>Theme</legend>
<button id='theme' type='button'></button>
</fieldset>
<p>Click the "Theme" switch to toggle between `disabled` `true` and `false` on `night.css` and `light.css` `
<link>`s.</p>
</form>
</main>
<script>
const UI = document.forms.UI;
const M = document.querySelector('main');
const L = document.querySelector('.night')
const switchTheme = e => {
const clk = e.target;
if (clk.matches('button')) {
M.classList.toggle('night');
L.toggleAttribute('disabled');
}
let status = M.className === 'night' ? 'on' : 'off';
localStorage.setItem('theme', status);
};
const loadTheme = e => {
let cfg = localStorage.getItem('theme');
if (cfg === 'on') {
M.classList.add('night');
L.removeAttribute('disabled');
} else {
M.classList.remove('night');
L.setAttribute('disabled', true);
}
};
UI.addEventListener('click', switchTheme);
document.addEventListener('DOMContentLoaded', loadTheme);
</script>
</body>
</html>
I've been playing around with the code below and using it to create a progress bar that responds to a certain type of data input. The data I'm using comes in the form of an array but I've noticed that the code only creates one progress bar.
How could I embed this within my for loop so that it creates a separate progress bar for each item in the array?
function move() {
var elem = document.getElementById("myBar");
var width = 0;
var id = setInterval(frame, 2000);
function frame() {
if (width >= 100) {
clearInterval(id);
} else {
width=width + 10;
elem.style.width = width + '%';
elem.innerHTML = ((100 - width)/10) + ' mins';
}
}
}
move();
#myProgress {
width: 80%;
background-color: #ddd;
horizontal-align: center;
}
#myBar {
width: 0%;
height: 30px;
background-color: #4CAF50;
text-align: center;
line-height: 30px;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div id="myProgress">
<div id="myBar"></div>
</div>
</body>
Here is the link to what I'm working on: My Workspace
Side Note: I've been trying to get the progress bar to be centered on the page with a margin: 200px on either side. The margin attribute in my CSS doesn't seem to be doing this and only applying the margin to the left but not to the right - where am I going wrong with this?
Try this
<html>
<style>
#myProgress {
width: 100%;
background-color: #ddd;
}
.myBar {
width: 10%;
height: 30px;
background-color: #4CAF50;
text-align: center;
line-height: 30px;
color: white;
}
</style>
<body>
<div id="myProgress">
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
var progressbars="";
var i;
for (i = 1; i <=10; i++) {
progressbars+="<div class='myBar' style='width:"+i+"%'"
+ " id='myBar"+i+"px'"
+">"+i+"%"+"</div><br/>";
}
$("#myProgress").html(progressbars);
});
</script>
</html>
Using Javascript Only
Just replace previous script with this
<script>
window.onload=function(){
var progressbars="";
var i;
for (i = 1; i <=10; i++) {
progressbars+="<div class='myBar' style='width:"+i+"%'"
+ " id='myBar"+i+"px'"
+">"+i+"%"+"</div><br/>";
}
document.getElementById("myProgress").innerHTML=progressbars;
}
This will generate
I see that you have included bootstrap 4
In that case you can create progress bars with Bootstrap
var progressbars="";
for (var i = 1; i <=10; i++) {
progressbars+='<div class="progress">'
+'<div class="progress-bar" role="progressbar" style="width: '+i+'%" aria-valuenow="'+i+'" aria-valuemin="0" aria-valuemax="100">'+i+'%</div>'
+'</div>';
}
document.querySelector(".feefo").innerHTML=progressbars;
And it looks a lot nicer :)
I have done this code with javascript to try out my first javascript animation, but when I open the page, it's showing me a blank page...
can anyone please tell me whats wrong with the code and why it's not showing anything?
thanks in advance...
<html>
<head>
<title>Trying js Animation</title>
</head>
<body>
<style>
#container{
width: 500px;
height: 500px;
color: green;
position: relative;
}
#box{
width: 50px;
height: 50px;
color: red;
position: absolute;
}
</style>
<div id="container">
<div id="box">
</div>
</div>
<script type="text/javascript">
var t = setInterval(move, 1);
var pos = 0;
var box = document.getElementById('box');
function move(){
pos += 1;
box.style.left = pos + "px";
}
</script>
</body>
</html>
The box is white. Change "color" to "background-color".
This question already has answers here:
why javascript this.style[property] return an empty string? [duplicate]
(2 answers)
Closed 6 years ago.
Hi there I'm having a problem. I made a box of blue color in HTML/CSS and want javascript to alert the name of color when the box is clicked. Here is my code.`
var clr = document.getElementById("box").style.backgroundColor;
document.getElementById("box").onclick= function() {
alert(clr);
}
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<style>
#box {
height: 100px;
width: 100px;
background-color: blue;
margin: 0px;
display: inline-block;
}
</style>
</head>
<body>
<div id="box" class="box">
</div>
</body>
</html>
You need to use getComputedStyle(). .style is use to set a new value for target element.
var div = document.getElementById("box"), // element
divCSS = window.getComputedStyle(div), // element CSS
bgColor = divCSS.getPropertyValue('background-color'); // property
document.getElementById("box").onclick= function() {
alert(bgColor);
}
#box{
height: 100px;
width: 100px;
background-color: blue;
margin: 0px;
display: inline-block;
}
<div id="box" class="box"></div>
Here is the working code
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<style>
#box {
height: 100px;
width: 100px;
background-color: blue;
margin: 0px;
display: inline-block;
}
</style>
</head>
<body>
<div id="box" class="box">
</div>
</body>
</html>
<script>
/* var clr = document.getElementById("box").style.backgroundColor;*/
document.getElementById("box").onclick= function() {
var ele = document.getElementById("box");
var style = window.getComputedStyle(ele);
var bColor = style.getPropertyValue("background-color");
alert(bColor);
}
</script>
This works
var clr = document.getElementById("box").style.backgroundColor;
document.getElementById("box").onclick= function() {
alert(clr);
}
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<div id="box" class="box" style="height: 100px;width: 100px;background-color: blue;margin: 0px;display: inline-block;"></div>
</body>
</html>
You can also use below code with provided html
<script>
var clr= window.getComputedStyle(document.getElementById("box")).getPropertyValue('background-color'); // property
document.getElementById("box").onclick= function() {
alert(clr);
}
</script>
Try using the variable clr inside the function.
Also invoke the fucntion using onclick on the div itself.
Using regex to get the property backgorund color in whole css.
You can also use filter on #box using
var boxCss = clr.match(/#box{((.*\s*.*)*)}/g);
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<script>
function colorAlert() {
var clr = document.getElementsByTagName("style")[0].innerHTML;
var res = clr.match(/background-color:.*;/g);
alert(res[0]);
}
</script>
<style>
#box{
height: 100px;
width: 100px;
background-color: blue;
margin: 0px;
display: inline-block;
}
</style>
</head>
<body>
<div id="box" class="box" onclick="colorAlert();">
</div>
</body>
</html>
You have two ways to solve this :
keep <script> tag after after closing <div> tag
move clr var in side the onclick function,then you can write <script> tag where ever you want
When I practice waterfall flow layout, it has a problemlike this:
When the page is first loaded or I click [refresh] or press [F5], it looks bad. Each column of the images stacks!
But when I press [enter] in address bar or scroll with mouse, it looks good.
So how can I solve the problem? Thanks a lot!
var dataPic=["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg"];
var curtIndex=0;
$(document).ready(function(){
$(window).on("load",function(){
init(); //initializes the display with 30 pictures，call loadPic()
placePic(); //layout
});
$(window).scroll(function(){
while(scrollSlide()){ //whether it needs loading more pictures
loadPic(); //div and img can be loaded dynamically
}
placePic(); //layout for the elements that are just loaded
});
});
function init(){
var i=30;
do{
loadPic();
}while(i-- >= 0);
placePic();
}
function initSlide(){
var box=$(".box");
var lastboxHeight=box.last().get(0).offsetTop;
var documentHeight=$(document).height();
return (lastboxHeight<documentHeight)?true:false;
}
function currentIndex(){
if(curtIndex==9){
curtIndex=0;
}
return curtIndex;
}
function loadPic(){
var boxadd=$("<div>").addClass("box").appendTo($("#container"));
var current=$("<div>").addClass("pic").appendTo(boxadd);
$("<img>").attr("src","./img/"+dataPic[currentIndex()]).appendTo(current);
curtIndex++;
}
function placePic(){
var box=$(".box");
var boxWidth=box.eq(0).width();
var num=Math.floor($(window).width()/boxWidth);
var boxArr=[];
box.each(function(index,value){
var boxHeight=box.eq(index).outerHeight(true);
if(index<num){
boxArr[index]=boxHeight;
}
else{
var minboxHeight=Math.min.apply(null,boxArr);
var minboxIndex=$.inArray(minboxHeight,boxArr);
$(value).css({
"margin":"10px",
"box-shadow":"2px 2px 2px rgba(0,0,0,.3)",
"border-radius": "4px",
"position":"absolute",
"top":minboxHeight,
"left":box.eq(minboxIndex).position().left
});
boxArr[minboxIndex]+=box.eq(index).outerHeight(true);
}
});
}
function scrollSlide(){
var box=$(".box");
var lastboxHeight=box.last().get(0).offsetTop+Math.floor(box.last().height()/2);
var documentHeight=$(window).height();
var scrollHeight=$(window).scrollTop();
return (lastboxHeight<documentHeight+scrollHeight)?true:false;
}
*{
margin: 0px;
padding: 0px;
}
#container{
margin-left: auto;
margin-right: auto;
}
.box{
margin:10px;
box-shadow:2px 2px 2px rgba(0,0,0,.3);
border-radius: 4px;
position: relative;
float: left;
}
.pic img{
margin: 0px;
padding: 0px;
width:200px;
height: auto;
vertical-align: bottom;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body bgcolor="">
<div id="container">
</div>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script src="testjs.js"></script>
</body>
</html>