I'm looking to load different css files according to the date (season).
I tried modifying an image script from here on stackoverflow, but that didn't work.
Can anybody point me out where it goes wrong?
<link href="/css_season/default.css" rel="stylesheet" type="text/css" onload="logo(this)">
function logo(link) {
var d = new Date();
var Today = d.getDate();
var Month = d.getMonth();
var src;
if (Month === 4 && (Today >= 1 && Today <= 30)) {
src = "/css_season/easter.css";
} else if (Month === 7 && (Today >= 1 && Today <= 31)) {
src = "/css_season/vacation.css";
} else if ((Month === 8 && Today >= 30) || (Month === 0 && Today <= 2)) {
src = "/css_season/vacation.css";
} else if (Month === 12 && (Today >= 15 && Today <= 31)) {
src = "/css_season/holidays.css";
}
link.href=href;
}
Your assignment link.href=href won't work because href isn't defined. Also, I would put the logo function in <body onload="logo();"> and give your link tag an id attribute.
This should work for you:
<html>
<head>
<link id="cssId" href="/css_season/default.css" rel="stylesheet" type="text/css"/>
</head>
<body onload="logo();">
<!-- body content here -->
</body>
function logo() {
var d = new Date();
var Today = d.getDate();
var Month = d.getMonth();
var src;
if (Month === 4 && (Today >= 1 && Today <= 30))
src = "/css_season/easter.css";
else if (Month === 7 && (Today >= 1 && Today <= 31))
src = "/css_season/vacation.css";
else if ((Month === 8 && Today >= 30) || (Month === 0 && Today <= 2))
src = "/css_season/vacation.css";
else if (Month === 12 && (Today >= 15 && Today <= 31))
src = "/css_season/holidays.css";
document.getElementById('cssId').href=src;
}
You have wrong assignment at the end of the js function.
link.href=href; should be link.href = src;
Cheers
Related
I am using React to create online food ordering and I need to disable the ordering when the restaurant is closed, until it opens again.
something like this:
const time = new Date().toLocaleTimeString("rs-RS");
const day = new Date().getDay();
if (day <= 5 && time < "08:00:00" && time > "23:30:00") {
console.log("closed");
} else if (day === 6 && time < "09:00:00" && time > "23:30:00") {
console.log("closed");
} else if (day === 0 && time < "12:00:00" && time > "20:00:00") {
console.log("closed");
} else {
console.log("open");
}
Thanks.
You can't compare a Date with a String. I would use Date.setHours():
const time = new Date();
const day = new Date().getDay();
if ((day <= 5) && (time < (new Date().setHours(8)) && (time > (new Date().setHours(23, 30))) {
console.log("closed");
} else if ((day === 6) && (time < (new Date().setHours(9)) && (time > (new Date().setHours(23, 30))) {
console.log("closed");
} else if ((day === 0) && (time < (new Date().setHours(12)) && (time > (new Date().setHours(20))) {
console.log("closed");
} else {
console.log("open");
}
I am sure that this has been raised many times, but I can't find a solution. I need to change an image every month, using javascript, and the closest thing I've found is:
THIS DEMO
But my code does not work, although all the images I call from my server and are located in the folder "img".
The script only shows the first image (of the HTML) but does not execute the others
What am I doing wrong here?
Thanks in advance!
HTML:
<img id="logo" src="http://example.com/img/Master.jpg" onload="logo(this)">
Script
function logo(img) {
if (img.src.indexOf('default')==-1) return; // already changed
var d = new Date();
var Today = d.getDate();
var Month = d.getMonth();
var src = "http://example.com/img/";
if (Month === 0 && (Today >= 1 && Today <= 29)) {
src += "000.jpg";
} else if (Month === 1 && (Today >= 1 && Today <= 29)) {
src += "001.jpg";
} else if (Month === 2 && (Today >= 1 && Today <= 29)) {
src += "002.jpg";
} else if (Month === 3 && (Today >= 1 && Today <= 29)) {
src += "003.jpg";
// code for 4
// code for 5
// code for 6 ...
}
alert(src);
img.src=src;
}
Because in the demo on js-fiddle there is a default image named 'default.png' ur default image is named: 'Master.jpg'. Then in the logo-function you are testing if the current src still contains the word 'default': if(img.src.indexOf('default')==-1) return; ... u need to either name your default picture also from 'Master' to 'default' or you change the if condition according to your data.
EDIT
OK try to follow my example its almost the same as yours just i use sample pictures from placehold.it:
function logo(img) {
if (img.src.indexOf('default')==-1) return; // already changed
var d = new Date();
var Today = d.getDate();
var Month = d.getMonth();
var src = "https://via.placeholder.com/150";
if (Month === 0 && (Today >= 1 && Today <= 29)) {
src += "?text=000.jpg";
} else if (Month === 1 && (Today >= 1 && Today <= 29)) {
src += "?text=001.jpg";
} else if (Month === 2 && (Today >= 1 && Today <= 29)) {
src += "?text=002.jpg";
} else if (Month === 3 && (Today >= 1 && Today <= 29)) {
src += "?text=003.jpg";
// code for 4
// code for 5
// code for 6 ...
} else if (Month === 9 && (Today >= 1 && Today <= 29)) {
src += "?text=009.jpg";
}
alert(src);
img.src=src;
}
<img src="https://via.placeholder.com/150?text=default.jpg" onload="logo(this)" />
Especially note that the initial image-src contains the word 'default'. Play around with that and then try to apply it to your use-case.
Why not simplify it?
function logo(img) {
var Month = d.getMonth();
var src = "http://example.com/img/";
if (Month == 0) {
src += "000.jpg";
} else if (Month == 1) {
src += "001.jpg";
} else if (Month == 2) {
src += "002.jpg";
} else if (Month == 3) {
src += "003.jpg";
// code for 4
// code for 5
// code for 6 ...
}
alert(src);
img.src = src;
}
I have created this to check if time is between 17:00 / 23:00.
This works fine! But now I want to check if its weekend.
Can you help me?
var objDate = new Date();
var hours = objDate.getHours();
if (hours >= 17 && hours <= 23) {
document.write('<!--test1 -->');
}
else {
document.write('<!--test2 -->');
}
Use the getDay() method of the Date object (0 corresponds to Sunday and 6 to Saturday):
<script language="javascript">
var objDate = new Date();
var hours = objDate.getHours(),
dayOfWeek = objDate.getDay();
if(hours >= 17 && hours <= 23 && (dayOfWeek == 6 || dayOfWeek == 0)){
document.write('<!--test1 -->');
} else {
document.write('<!--test2 -->');
}
</script>
var objDate = new Date();
var hours = objDate.getHours();
var n = objDate.getDay();
if(hours >= 17 && hours <= 23){
alert('<!--test1 -->');
}
else{
alert('<!--test2 -->');
}
if(n == 0 || n == 6)
{
alert('Weekend');
}
else
{
alert('Weekday');
}
I'd like to change my HTML background depending on the date, but what I've written isn't working properly. I can't find any applicable examples and I'm struggling to complete it.
I just want the start of a new season to change the background of my HTML page by altering the image used in my CSS file.
JavaScript:
var d = new Date();
var Day = d.getDate();
var Month = d.getMonth();
if (Month == <3 && Month == 5) {
document.background-image: url("springTree.jpg");
} else if (Month == < 6 && Month == > 8) {
document.background-image: url("summerTree.jpg");
} else if (Month == < 9 && Month == > 11) {
document.background-image: url("autumnTree.jpg");
} else (Month == 12 && Month == > 2) {
document.background-image: url("winterTree.jpg");
CSS:
div.body {
background-image: url("summertree.jpg");
width: 640px;
height: 1136px;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
}
I'm not sure if this could be accomplished with JQuery but I'm willing to experiment with anything.
As you can see I clearly have no clue what I'm doing and I'm in need of some help, thanks.
I suggest you to use class injection into the <html> tag. Javascript code will inject whatever class you want (depending on location (winter vs summer) or local time (day vs night)). And your css will have the backgrounds (or any other differences accordingly.
CSS:
.spring {background-image: url("springTree.jpg");}
.summer {background-image: url("summerTree.jpg");}
...
You can also have other differences:
.spring li a {color: green}
.winter li a {color: white}
You can set the class from javascript like this:
var html = document.getElementsByTagName('html')[0];
html.setAttribute('class', 'spring');
Or if you want multiple classes inject (add) the one you need:
root.classList.add('evening');
With your conditions:
var d = new Date();
var month = d.getMonth() + 1;
var html = document.getElementsByTagName('html')[0];
if (month >= 3 && month <= 5) {
root.classList.add('spring');
} else if (month >= 6 && month <= 8) {
root.classList.add('summer');
} else if (month >= 9 && month <= 11) {
root.classList.add('autumn');
} else(month == 12 || month <= 2) {
root.classList.add('winter');
}
First of all you should take a look on how to compare in JS. This site has a good list of operators and what they do:
JavaScript Comparison and Logical Operators
if(Month == < 3) should be if(Month <= 3).
And read your conditions out loud:
if (Month <= 3 && Month == 5)
if (Month <= 6 && Month >= 8)
Can the month be lower or equal to 3 and equals 5? Can the month be lower or equal to 6 and higher or equal to 8? (No, probably not in this universe.)
As for swapping images, how does your html look? Do you have a div with a class called body? Or are you looking for the body tag? If you are looking for the body tag you can change the background image like this.
document.body.style.backgroundImage = "url('springTree.png')";
Try below code.
var d = new Date();
var Day = d.getDate();
// Below function returs 0 to 11. So we have added +1
var Month = d.getMonth() + 1;
// January, February, December
if (Month == 12 || Month <= 2) {
document.body.style.backgroundImage = url("winterTree.jpg");
}
// March, April, May
else if (Month >= 3 && Month <= 5) {
document.body.style.backgroundImage = url("springTree.jpg");
}
// June, July, August
else if (Month >= 6 && Month <= 8) {
document.body.style.backgroundImage = url("summerTree.jpg");
}
// September, October, November
else if (Month >= 9 && Month <= 11) {
document.body.style.backgroundImage = url("autumnTree.jpg");
}
I am surprised by your approach of writng JavaScript. It would be great if you can have a look on JavaScript | MDN - Mozilla Developer Network and check how to target classes and overwrite styles. Below is your solution.
var d = new Date();
var Day = d.getDate();
var Month = d.getMonth();
if (Month <= 3 || Month === 5) {
document.getElementsByClassName('body')[0].style.background = "url('https://image.freepik.com/free-photo/my-cat-mimi_2568679.jpg')";
console.log('1');
} else if (Month <= 6 || Month >= 8) {
document.getElementsByClassName('body')[0].style.background = "url('https: //image.freepik.com/free-photo/clouds-above-the-volcano_426-19322758.jpg')";
console.log('2');
} else if (Month <= 9 || Month >= 11) {
document.getElementsByClassName('body')[0].style.background = "url('https://image.freepik.com/free-photo/my-cat-mimi_2568679.jpg')";
console.log('3');
} else {
document.getElementsByClassName('body')[0].style.background = "url('https: //image.freepik.com/free-photo/clouds-above-the-volcano_426-19322758.jpg')";
console.log('4');
}
instead of using && you should check || if you are trying to get image change between first month and fifth month. You should definitely have a look at:
JavaScript Comparison and Logical Operators!
Therefore you should not write if(Month == < 3) It should be if(Month <= 3).
To change or target classes in HTML Dom, have a look here
Javascript Class Targeting
Ps: working Fiddle here Change Pic depending using Dates
Happy Learning. Cheers :)
var d = new Date();
var Day = d.getDate();
var Month = d.getMonth();
if (Month == <3 && Month == 5) {
document.background-image: url("springTree.jpg");
} else if (Month == < 6 && Month == > 8) {
document.background-image: url("summerTree.jpg");
} else if (Month == < 9 && Month == > 11) {
document.background-image: url("autumnTree.jpg");
} else (Month == 12 && Month == > 2) {
document.background-image: url("winterTree.jpg");
Please check all your conditions.
Example: Month==12 and Month<=2 :( month in year can't is 12 and <2
you should change (Month == 12 || Month == > 2)
Here is the function:
function LoadBanner(img) {
var d = new Date();
var Today = d.getDate();
var Month = d.getMonth();
Month++; //Months are 0 based
var src;
if (Month === 8 && (Today >= 1 && Today <= 17)) {
src = "banner1.jpg";
} else if (Month === 8 && (Today >= 18 && Today <= 31)) {
src = "banner3.jpg";
} else if (Month === 9 && (Today >= 1 && Today <= 7)) {
src = "banner2.jpg";
} else if (Month === 9 && (Today >= 8 && Today <= 14)) {
src = "banner5.jpg";
} else if (Month == 9 && (Today >= 15 && Today <= 21)) {
src = "banner4.jpg";
} else if (Month == 9 && (Today >= 22 && Today <= 28)) {
src = "banner6.jpg";
} else if (Month == 9 && (Today >= 29 && Today <= 30)) {
src = "banner7.jpg";
} else {
document.getElementById("bannerdiv").style.display = "none";
}
img.src = src;
}
Here is the HTML:
<div class="banner" id="bannerdiv">
<!--<img id="Logo" src="banner2.jpg" alt="KnowledgeBase" width="100%" height="100%" onload="LoadBanner(this)" />-->
<img id="Logo" src="banner1.jpg" alt="KnowledgeBase" width="100%" height="100%"" />
</div>
Note: When I call the function in the onLoad the error is thrown in IE 8, but works fine in the current version of IE and Chrome. I read something about recursively calling a function more than 12 times may cause the error... or requesting too much memory for IE but I don't think I am doing either here.
You are changing the source of the image, forcing it to reload and triggering onload again.
Probably the quickest fix would be something like:
if (img.src != src) {
img.src = src;
}
avoiding the reload if the src hasn't changed. I'm going to guess that later browsers already have this check built in, but even those are going to run your onload handler twice.