I am trying to create a site that has a background image that changes every hour. I want the background image to correspond with a certain time of day. For example, an image of closed flower bud would be the site background at 12AM and an image of a blooming flower bud would be the site background at 12PM.
I am pretty sure the way I am currently implementing this is the correct way, and on inspection I don't get any errors, but the background images are not showing up. What am I doing wrong? Is it the way I'm using the jQuery or another aspect of my code? Any help is greatly appreciated. Thanks in advance.
body {
margin-left: 5%;
margin-right: 5%;
}
#demo {
color: white;
}
#txt {
color: white;
float: left;
font-family: OpenSans;
font-size: 90px;
margin: 20px;
}
#weather {
color: white;
float: right;
font-family: OpenSans;
font-size: 40px;
margin: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>Blooming Time And Temperature</title>
<link href="css/format.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script>
function startTime() {
document.getElementById('txt').innerHTML =
moment().format("hh:mm A");
var t = setTimeout(startTime, 1000);
var hour = moment().hour()
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
setInterval(function(){
var hour = new Date().getHours();
if(hour > 7 && hour <= 12)
{
// It's morning
$('body').css('background', 'url(http://www.magic4walls.com/wp-content/uploads/2015/11/Macro-of-water-droplets-on-pink-lotus-flower-blooming-in-early-morning.jpg) no-repeat');
}
else if(hour > 12 && hour < 18)
{
// It's noon
$('body').css('background', 'url(http://www.magic4walls.com/wp-content/uploads/2015/11/Macro-of-water-droplets-on-pink-lotus-flower-blooming-in-early-morning.jpg) no-repeat');
}
else
{
// It's night
$('body').css('background', 'url(http://www.magic4walls.com/wp-content/uploads/2015/11/Macro-of-water-droplets-on-pink-lotus-flower-blooming-in-early-morning.jpg) no-repeat');
}
}, 1000 * 60 *60);
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js"></script>
<script>
$(document).ready(function() {
$.simpleWeather({
location: 'Brooklyn, NY',
woeid: '',
unit: 'f',
success: function(weather) {
html = '<p>'+weather.temp+'°'+weather.units.temp+'</p>';
html += '<div id="city">'+weather.city+', '+weather.region+'</div>';
$("#weather").html(html);
},
error: function(error) {
$("#weather").html('<p>'+error+'</p>');
}
});
});
</script>
</head>
<body onload="startTime()"">
<div id="txt"></div>
<div id="weather"></div>
</body>
</html>
Function that is provided to setInterval method will be invoked for the first time after time you provided (which is one hour). Change it to:
function changeBackground(){
var hour = new Date().getHours();
if(hour > 7 && hour <= 12)
{
// It's morning
$('body').css('background', 'url(http://www.magic4walls.com/wp-content/uploads/2015/11/Macro-of-water-droplets-on-pink-lotus-flower-blooming-in-early-morning.jpg) no-repeat');
}
else if(hour > 12 && hour < 18)
{
// It's noon
$('body').css('background', 'url(http://www.magic4walls.com/wp-content/uploads/2015/11/Macro-of-water-droplets-on-pink-lotus-flower-blooming-in-early-morning.jpg) no-repeat');
}
else
{
// It's night
$('body').css('background', 'url(http://www.magic4walls.com/wp-content/uploads/2015/11/Macro-of-water-droplets-on-pink-lotus-flower-blooming-in-early-morning.jpg) no-repeat');
}
}
changeBackground(); // invoke for the first time manually
setInterval(changeBackground, 1000 * 60 * 60);
Related
Here in my code there is a picture of Mario, however he is always at the top of the screen and I can't find out which parameters to edit to change his immediate positioning upon refreshing the page. In other words which part of my code (I'm guessing it's in the html absolute positioning tag of the Mario image) do I change to be able to make Mario appear at the bottom of the screen.
// TIMER
window.onload = function () {
//this is where you can modifies the time amount.
var minutes= 29 ,
display = document.querySelector('#time');
startTimer(minutes, display);
};
function startTimer(duration, display) {
var timer = duration, minutes, seconds;
setInterval(function () {
minutes = parseInt(timer / 60, 10)
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
window.alert("GAME OVER ( F5 TO PLAY AGAIN! )");
}
}, 1000);
}
// MOVEMENT
function leftArrowPressed() {
var element = document.getElementById("Mario");
element.style.left = parseInt(element.style.left) - 5 + 'px';
}
function rightArrowPressed() {
var element = document.getElementById("Mario");
element.style.left = parseInt(element.style.left) + 5 + 'px';
}
function upArrowPressed() {
var element = document.getElementById("Mario");
element.style.top = parseInt(element.style.top) - 5 + 'px';
}
function downArrowPressed() {
var element = document.getElementById("Mario");
element.style.top = parseInt(element.style.top) + 5 + 'px';
}
function moveSelection(evt) {
switch (evt.keyCode) {
case 37:
leftArrowPressed();
break;
case 39:
rightArrowPressed();
break;
case 38:
upArrowPressed();
break;
case 40:
downArrowPressed();
break;
}
};
function docReady()
{
window.addEventListener('keydown', moveSelection);
}
html {
background-image:url("BACKGROUND.png");
background-repeat: no-repeat;
background-size: 1920px 1080px;
text-align: center;
}
.Title {
font-family: Bebas Neue;
text-align: center;
font-size: 50px;
color: #52db3d;
display:inline;
}
.Titlev2 {
font-family: Bebas Neue;
text-align: center;
font-size: 50px;
color: #000000;
display:inline;
}
.Titlev3 {
font-family: Bebas Neue;
text-align: center;
font-size: 50px;
color: #e60000;
display:inline;
}
#Luigi {
height:450px;
width:960px;
position:absolute;
right:0px;
bottom:0px;
}
#Timer {
font-family:Bebas Neue;
font-size: 30px;
}
<!DOCTYPE html>
<html>
<head>
<title>Jeu</title>
<link rel = "stylesheet" type = "text/css" href = "CSS.css">
<script src="JS.js"></script>
</head>
<body onload="docReady()" onkeydown="" onkeyup="">
<h1 class="Title">Luigi </h1>
<h1 class="Titlev2">V.S </h1>
<h1 class="Titlev3">Mario</h1>
<img id="Mario" src="MarioSprite.png" style="position:absolute; left:0; top:0;" height="450" width="960">
<img id="Luigi" src="LuigiSprite.png">
<div id="Timer"><h1><span id="time">00:30</span></h1></div>
<audio autoplay src="Soundtrack.mp3"></audio>
</body>
</html>
Hello i'm trying to put a progress bar countdown using the code bellow
function progress(timeleft, timetotal, $element) {
var progressBarWidth = timeleft * $element.width() / timetotal;
$element.find('div').animate({
width: progressBarWidth
}, 500).html(timeleft + " seconds to go");
if (timeleft > 0) {
setTimeout(function() {
progress(timeleft - 1, timetotal, $element);
}, 1000);
}
};
progress(20, 20, $('#progressBar'));
#progressBar {
width: 90%;
margin: 10px auto;
height: 22px;
background-color: #0A5F44;
}
#progressBar div {
height: 100%;
text-align: right;
padding: 0 10px;
line-height: 22px;
/* same as #progressBar height if we want text middle aligned */
width: 0;
background-color: #CBEA00;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="progressBar">
<div></div>
</div>
but it doesn't work , when a refresh the page i see only "20 seconds to go" without the bar in background and i can't find out what's the problem
please can u tell me what are the possible causes of this problem ?
That can be, because Javascript is loaded completely new each time you refresh the page so will time left initiated to the same value.
You could use a cookie or phase the Value with i.e. PHP.
edit the javascript in this:
function progress(timeleft, timetotal, $element) {
var progressBarWidth = timeleft * $($element).width() / timetotal;
$($element).find('div').animate({
width: progressBarWidth
}, 500).html(timeleft + " seconds to go");
if (timeleft > 0) {
setTimeout(function() {
progress(timeleft - 1, timetotal, $element);
}, 1000);
}
};
heres the jsfiddle: https://jsfiddle.net/an1r77uo/
I have a lot of code that I made so far but I can't get the load() function to work:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Page resizer -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Date -->
<script>
var d = new Date();
var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
document.getElementById("date").innerHTML = days[d.getDay()];
</script>
<!-- Gif changer -->
<script>
function changegif() {
var gif;
if (days = Sunday) {
gif = "/img/sunday.gif";
} else if (days = Monday) {
gif = "/img/monday.gif";
} else if (days = Tuesday) {
gif = "/img/tuesday.gif";
} else if (days = Wednesday) {
gif = "/img/wednesday.gif";
} else if (days = Thursday) {
gif = "/img/thursday.gif";
} else if (days = Friday) {
gif = "/img/friday.gif";
} else if (days = Saturday) {
gif = "/img/saturday.gif";
}
}
function load() {
document.getElementById('gif').src = changegif();
}
</script>
</head>
<body onload="load()">
<!-- More date stuff -->
<style>
.image {
position: relative;
width: 100%; /* for IE 6 */
}
h2 {
position: absolute;
top: 150px;
left: 0;
width: 100%;
}
h2 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
h1 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
}
h1 span {
color: white;
font: bold 24px/45px Helvetica, Sans-Serif;
letter-spacing: -1px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
padding: 10px;
}
</style>
<div class="image">
<img src="#" id="gif">
<h2><span>Enjoy Your</span></h2>
<br>
<h1 id="date"><span></span></h1>
</div>
</body>
</html>
If anybody knows what I'm doing wrong please tell me. I have tried integrating the functions into a button but it still didn't work.
Remove all your own <script>s, then use this:
function load() {
var day = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"][new Date().getDay()];
document.getElementById("date").innerHTML = day;
document.getElementById('gif').src = "/img/" + day.toLowerCase() + ".gif";
}
To explain all the mistakes:
= assigns; it does not compare.
changegif doesn’t return anything, so document.getElementById('gif').src = changegif(); will always set it to undefined (assuming no other errors).
Sunday and others are undeclared variable names; they only work as strings: "Sunday".
days is not a single day, it’s the whole array, so comparing it to a single day won’t work.
changegif can be simplified to:
function changegif(){
return "/img/"
+ days[d.getDay()].toLowerCase()
+ ".gif";
}
Or use the answer by Chris G.
I created a web page where the background of my page changes depending on the hour. I want the background image to always be the full width of the page, so I am trying to set it to be 100%, but it doesn't seem to be working. Is there some part of the code that's written incorrectly? Do I need to implement something else?
body {
margin-left: 5%;
margin-right: 5%;
}
#demo {
color: white;
}
#txt {
color: white;
float: left;
font-family: OpenSans;
font-size: 90px;
margin: 20px;
}
#weather {
color: white;
float: right;
font-family: OpenSans;
font-size: 40px;
margin: 20px;
}
<!DOCTYPE html>
<html>
<head>
<title>Blooming Time And Temperature</title>
<link href="css/format.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script>
function startTime() {
document.getElementById('txt').innerHTML =
moment().format("hh:mm A");
var t = setTimeout(startTime, 1000);
var hour = moment().hour()
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
function changeBackground(){
var hour = new Date().getHours();
if(hour > 7 && hour <= 12)
{
// It's morning
$('body').css('background', 'url(sequence/1.jpg) no-repeat').width('100%');
}
else if(hour > 12 && hour < 18)
{
// It's noon
$('body').css('background', 'url(sequence/2.jpg) no-repeat').width('100%');
}
else if(hour > 19 && hour < 21)
{
// It's noon
$('body').css('background', 'url(sequence/3.jpg) no-repeat').width('100%');
}
else
{
// It's night
$('body').css('background', 'url(sequence/4.jpg) no-repeat').width('100%');
}
}
changeBackground(); // invoke for the first time manually
setInterval(changeBackground, 1000 * 60 * 60);
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js"></script>
<script>
$(document).ready(function() {
$.simpleWeather({
location: 'Brooklyn, NY',
woeid: '',
unit: 'f',
success: function(weather) {
html = '<p>'+weather.temp+'°'+weather.units.temp+'</p>';
html += '<div id="city">'+weather.city+', '+weather.region+'</div>';
$("#weather").html(html);
},
error: function(error) {
$("#weather").html('<p>'+error+'</p>');
}
});
});
</script>
</head>
<body onload="startTime()"">
<div id="txt"></div>
<div id="weather"></div>
</body>
</html>
You could try removing the margin attributes on the body tag in your CSS, and set background-size: cover on the body tag there. Then in your changeBackground function, you mightn't need the .width(100%); method, since the width shouldn't change when you swap out the background images?
If you are putting the background image on the body and you have this css property, it won't do.
body {
margin-left: 5%;
margin-right: 5%;
}
Make the property
body {
margin:0;
}
I'm working on a countdown in JS that going to count every second down to the end of 2016, at the end of 2016 I'll display a message to the user.
My issue is that I'm off by one hour from the actual time
I used this website(https://www.timeanddate.com/counters/newyear.html) to see if my countdown is displaying the correct time.
Here is my Code:
function updateTimer(deadline){
// going to give us the new date and time when this function was called which is every second.
// also getting back the date and time of the instance of updateTimer was called.
// time = deadline the point we're counting too - time of the function was called. (in milliseconds)
// the object is going to work out based on the time difference.
// Math Floor always round DOWN.
// time / 1000 = 1000 converted to seconds, 60 converted min,60 is hours, 24 is days
// time / 1000 = 1000 converted to seconds, 60 converted min,60 is hours % 24 == how many hours left in the particular day. 100 % 24 = 4 hours
var time = deadline - new Date();
return{
'days': Math.floor( time/(1000*60*60*24) ),
'hours': Math.floor( (time/(1000*60*60)) % 24),
'minutes': Math.floor( (time/1000/60) %60 ),
'seconds': Math.floor( (time/1000) %60 ),
'total': time
};
}
function animateClock(span){
span.className = "turn"; // giving a class turn into the injected span.
setTimeout(function(){
span.className = "";
},700);
}
// SetInterval going to be fired every second.
function startTimer(id,deadline){
var timerInterval = setInterval(function(){
var clock = document.getElementById(id); //getting the match id from the DOM.
var timer = updateTimer(deadline); // generating a function and injecting it a deadline.
// ref to the HTML with div clock - concat the series of spans
clock.innerHTML = '<span>' + timer.days + '</span>'
+'<span>' + timer.hours + '</span>'
+'<span>' + timer.minutes + '</span>'
+'<span>' + timer.seconds + '</span>';
// Animations
var spans = clock.getElementsByTagName("span"); // will get all the above spans that been injected to the clock div.
animateClock(spans[3]); // calling this function every second.
if(timer.seconds == 59) animateClock(spans[2]); // == 59 because we're going to be in a second 60 which is a minute.
if(timer.minutes == 59 && timer.seconds == 59) animateClock(spans[1]);
if(timer.hours == 23 && timer.minutes == 59 && timer.seconds == 59) animateClock(spans[0]); // when we getting to a new day.
// Check for the end of timer.
if(timer.total < 1){ //means the difference
clearInterval(timerInterval);
clock.innerHTML ='<span>0</span><span>0</span><span>0</span><span>0</span>';
}
},1000);
}
// when the window loads fire this function.
window.onload = function(){
var deadline = new Date("January 1, 2017 23:59:59"); // Declare a deadline.
startTimer("clock",deadline); // we're going to inject into the clock id of the html the deadline.
};
body{
background: #282e3a;
font-family: Tahoma;
}
h1{
color:#fff;
text-align: center;
font-size:74px;
letter-spacing: 10px;
}
#del-countdown{
width:850px;
margin: 15% auto;
}
#clock span{
float: left;
text-align: center;
font-size: 84px;
margin: 0 2.5%;
color:#fff;
padding: 20px;
width:20%;
border-radius: 20px;
box-sizing: border-box;
}
#clock span:nth-child(1){
background: #DA3B36;
}
#clock span:nth-child(2){
background: #2e6da4;
}
#clock span:nth-child(3){
background: #f6bc58;
}
#clock span:nth-child(4){
background: #5CB85C;
}
#clock:after{
content: "";
display: block;
clear: both;
}
#units span{
float: left;
width:25%;
text-align: center;
margin-top: 30px;
color:#ddd;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 2px;
text-shadow: 1px 1px 1px 1px rgba(10,10,10,0.7);
}
span.turn{
animation: turn 0.5s ease forwards;
}
#keyframes turn{
0%{transform: rotatex(0deg)}
100%{transform: rotatex(360deg)}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Countdown</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="del-countdown">
<h1>COUNTDOWN</h1>
<div id="clock"></div>
<div id="units">
<span>Days</span>
<span>Hours</span>
<span>Minutes</span>
<span>Seconds</span>
</div>
</div>
<script src="countdown.js"></script>
</body>
</html>
Your deadline should be:
var deadline = new Date("January 1, 2017 00:00:00")