Javascript us BackgroundColor if by date even/odd

arnold_at_home · May 30, 2020, 11:41am

Hello
pls

My script dont work

Thanks for your help
Arnold

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>background color</title>

<style>
html {
	height:100vh;width:100vw;position:relative;overflow:hidden;
}
</style>

<script>
var today = new Date();
var dayStr = String(today.getDate()).padStart(2, '0');
var day = parseInt(dayStr);

if(day % 2 == 0)
{
document.getElementById("OddEven").body.style.backgroundColor = '
background: -webkit-radial-gradient(0% 0%, circle cover, #005bbb 0%, #ffd500 100%)
background: -moz-radial-gradient(0% 0%, circle cover, #005bbb 0%, #ffd500 100%)
background: -ms-radial-gradient(0% 0%, circle cover, #005bbb 0%, #ffd500 100%)
background: -o-radial-gradient(0% 0%, circle cover, #005bbb 0%, #ffd500 100%)
background: radial-gradient(at top left, #0005bbb, #ffd500)';
}
else
{
document.getElementById("OddEven").body.style.backgroundcolor = '
background: -webkit-radial-gradient(0% 0%, circle cover, #084b8a 0%, #000000 50%, #ffffff 100%)
background: -moz-radial-gradient(0% 0%, circle cover, #084b8a 0%, #000000 50%, #ffffff 100%)
background: -ms-radial-gradient(0% 0%, circle cover, #084b8a 0%, #000000 50%, #ffffff 100%)
background: -o-radial-gradient(0% 0%, circle cover, #084b8a 0%, #000000 50%, #ffffff 100%)
background: radial-gradient(at top left, #084b8a, #000000, #ffffff)';
}
</script>

</head>

<body>

</body>

</html>

rpg_digital · May 30, 2020, 12:12pm

You can use classNames instead

<style>
.day-even {
  background-image: radial-gradient(circle at top left, #0005bb, #ffd500);
}

.day-odd {
  background-image: radial-gradient(circle at top left, #084b8a, #000);
}
</style>

Then with your JS — I am just working with document.body here

<script>
  const today = new Date().getDate();

  document.body.className = ['day-even', 'day-odd'][today % 2]
</script>

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>background color</title>
<style>
.day-even {
  background-image: radial-gradient(circle at top left, #0005bb, #ffd500);
}

.day-odd {
  background-image: radial-gradient(circle at top left, #084b8a, #000);
}
</style>
</head>
<body>



<!-- script at bottom of the page -->
<script>
  const today = new Date().getDate();

  document.body.className = ['day-even', 'day-odd'][today % 2]
</script>
</body>
</html>

m3g4p0p · May 30, 2020, 12:33pm

Note though that this will overwrite any existing classes, which is probably not the desired behaviour; better use the classList accessor:

const today = new Date().getDate()

document.body.classList.toggle('day-even', today % 2 === 0)
document.body.classList.toggle('day-odd', today % 2 === 1)

But yes by all means better do this using classes. :-)

PaulOB · May 30, 2020, 12:42pm

If I may also suggest a change to the css as you don’t want to hide overflow on the html and body and you don’t want to set fixed heights either.

I’m guessing you wanted a viewport height gradient and therefore I would use a fixed positioned pseudo element so that the gradient doesn’t stretch over the whole document but remains viewport height (otherwise the gradient will stretch forever on a long page). I would not use background-attachment:fixed for this as that doesn’t work properly on mobiles.

I would do it like this but refer to the js experts for the correct jS

(Note there were errors in your css such as this #0005bbb) . I would also lose the prefixes as they carry too much weight and complexity and are not needed for modern browsers. Just supply a solid background color for older browsers as a fallback.)

rpg_digital · May 30, 2020, 1:02pm

Absolutely m3g4p0p

arnold_at_home · May 30, 2020, 1:10pm

#Paul, #RPG, M3G

Thank’s to all, but i don’t get any resultat

For Css standart it work’s perfect

html {
	width: 1400px; height: auto; float:left;
	background: -webkit-radial-gradient(0% 0%, circle cover, #0000ff 0%, #ffffFF 50%, #ff0000 100%);
	background:    -moz-radial-gradient(0% 0%, circle cover, #0000ff 0%, #ffffFF 50%, #ff0000 100%);
	background:     -ms-radial-gradient(0% 0%, circle cover, #0000ff 0%, #ffffFF 50%, #ff0000 100%);
	background:      -o-radial-gradient(0% 0%, circle cover, #0000ff 0%, #ffffFF 50%, #ff0000 100%);
	background: radial-gradient(at top left, #0000ff, #ffffff, #ff0000);}

Pls see:
Last OnDriveUpDate

Arnold

PaulOB · May 30, 2020, 1:27pm

No it doesn’t as that code is something you should never use.

Don’t give a width to the html element and don’t ever float it (unless its for some convoluted demo). In the real world you do not want to give a width to the html element and you certainly don’t want to float it as that makes it content width only and not auto width (effectively 100% by default).

What you are getting in your example is a fixed width of 1400px (very bad for responsive design) and a gradient that repeats horizontally at 1400px!

Lastly, stop messing around with the html element as its more complicated than you think. Use the body for your backgrounds. There are only a few cases where you want to apply styles to the html element.

By default background styles that are applied to the body element automatically propagate to the html unless you have added backgrounds to the html element. When you add a background to the html element you effectively cut the body’s height down to content height which is not what you want 99% of the time. Just apply your backgrounds to the body element and leave the html element alone.

I didn’t see your JS but will let the jS experts comment on that aspect (but you have been given three working examples already ;))

arnold_at_home · May 30, 2020, 1:51pm

Paul

Thanks for reply

Thank you, it’s not easy. This web page is activated by the main menu and from there I should get the menue web page another daily back color. But that is not the real problem. With the ie 8, 9 everything was easy. but with the win 10 I have 2 instances as back color. I had the style w/h without 100%. That was to get out of your hair …

Ukraine-Eesti

Thanks
Arnold

PaulOB · May 30, 2020, 3:31pm

AsI said above don’t try and support older browsers with the linear gradients, Just supply a fallback solid background colour.

You don’t seem to have implemented any of the code on offer so I’m not sure how we can help with debugging it.

Your existing code won’t work unless you remove it from the head and place it at the end of the body (just before the body closing tag).

Then you need to use the correct syntax to identify the id you placed on the body.

e.g. you need this:

document.getElementById("OddEven").style.backgroundImage = 'radial-gradient(at top left, #005bbb, #ffd500)';

You were using a mixture i.e. document.getElementById("OddEven").body ...etc

However you have been given much better and simpler JS code to use by the experts here so I would suggest you try and copy the better methods shown.

arnold_at_home · May 30, 2020, 3:59pm

RPG

Hello,
this work now perfect

But don’t us background-image only “background”

Thank’s
Arnold

Now i will the look the other propositions !

Your script adapdet !:

<!DOCTYPE html>

	<html>
	
		<head>
			<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
			<title>background color 1</title>
			
				<style>
					html {width:100%; height: 100%;}
					.day-even {
						background: -webkit-radial-gradient(0% 0%, circle cover, #005bbb 0%, #ffd500 100%);
						background: -moz-radial-gradient(0% 0%, circle cover, #005bbb 0%, #ffd500 100%);
						background: -ms-radial-gradient(0% 0%, circle cover, #005bbb 0%, #ffd500 100%);
						background: -o-radial-gradient(0% 0%, circle cover, #005bbb 0%, #ffd500 100%);
						background: radial-gradient(at top left, #0005bbb, #ffd500);}
					
					.day-odd {
						background: -webkit-radial-gradient(0% 0%, circle cover, #084b8a 0%, #000000 50%, #ffffff 100%);
						background: -moz-radial-gradient(0% 0%, circle cover, #084b8a 0%, #000000 50%, #ffffff 100%);
						background: -ms-radial-gradient(0% 0%, circle cover, #084b8a 0%, #000000 50%, #ffffff 100%);
						background: -o-radial-gradient(0% 0%, circle cover, #084b8a 0%, #000000 50%, #ffffff 100%);
						background: radial-gradient(at top left, #084b8a, #000000, #ffffff);}
				</style>
			
			<script>
				  const today = new Date().getDate();
				  document.body.className = ['day-even', 'day-odd'][today % 2]
			</script>
		
		</head>
	<body class="day-even, day-odd">
	
	</body>
	
</html>

arnold_at_home · May 30, 2020, 4:12pm

#Paul
Thank’s is see !

document.getElementById("OddEven").style.backgroundImage = 'radial-gradient(at top left, #005bbb, #ffd500)';

You were using a mixture i.e. document.getElementById("OddEven").body ...etc

The script from #RPG work fin at this Time!
You cansee the Estonien flag today and for to morrow the #Ukrainien Flagg

I m so happy with your Forum “Your script coming quick and utilisable” ! Bravo to you all

Arnold

Nota bene:
I have us Visual Studio Code,
Version: 1.45.0 (user setup)
Date: 2020-05-07T16:18:48.860Z
Electron: 7.2.4
Chrome: 78.0.3904.130
Node.js: 12.8.1
V8: 7.8.279.23-electron.0
OS: Windows_NT x64 10.0.18363

system · August 29, 2020, 11:12pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Help with A javacript calendar JavaScript	0	248	March 11, 2010
JS If statements are not working JavaScript	2	456	March 26, 2011
Please help for javascript JavaScript	3	585	November 20, 2010
Highlighting Current Day on Javascript Calendar JavaScript	2	4845	December 4, 2010
Can anyone help with this Google Calendar script please? JavaScript	0	386	April 8, 2011

Javascript us BackgroundColor if by date even/odd

Paul

RPG

Related topics