I'm building a church website and I'm new to coding so I don't fully understand pseudocode, but here's what I have right now:
css:
@keyframes offsetFix {
0% (background-color: #ffffff;)
90% (background-color: #ffffff;)
91% (background-color: #fefffe;)
100% (background-color: #eeeeee;)
}
body {
background-color: #ffffff;
animation: offsetFix 2s linear infinite;
}
.button, a:link, a:visited {
border: none;
color: #960018;
padding: 0px 0px;
width: 3px;
height: 3px;
text-align: center;
text-decoration: none;
display: block;
position:fixed;
top:316px;
/* John 3:16
Psalms 25:7 */
left:257px;
z-index:7777777;
font-size: 0px;
border-radius: 0px;
transition-duration: 0.01s;
cursor: crosshair;
}
.button:hover, a:hover {
background-color: #000000; /* Black */
color: #000000;
width:9px;
height:9px;
transform: translateY(-7px) translatex(-7px);
}
.button:active, a:active {
background-color: #960018; /* Carmine */
color: #ffffff;
width:191px;
/* Proverbs 19:1
Psalms 27 */
height:27px;
font-size: 11px;
transform: translateY(-7px) translatex(-77%);
/* Matthew 18:22 */
}
}
html(works):
<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<link rel="stylesheet" href="style.css" >
<title>Browser</title>
</head>
<body>
<div class="button"
id="button"
style="background-color:black"
>Jesus was probably born on The Feast of Tabernacles / the Feast of Booths / Sukkot</div>
<a href="https://auselessbutton.com/">Hello.</a>
<h1>
this is a header
</h1>
<p>
paragraph
</p>
<script src="script.js"></script>
</body>
</html>
html(does not work):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Browser</title>
<!--place the script tag in your head section-->
<script>
function buttonRandom(){
<!--this gets called by setTimeout-->
setInterval(() => {
if (Math.random() >= 0.5) {<!--Chance = 50%-->
button.style.visibility = "hidden"; <!--set element's visibility to hidden-->
} else {
button.style.visibility = "visible";
}
}, 3e3); <!--Set the frequency of this interval to every 3 sec (3*10^3 ms)-->
}
};
</script> <!--close script-->
</head>
<body onload="buttonRandom()"> <!--call to my initial function-->
<div class="button"
id="button"
style="background-color:black"
>Jesus was probably born on The Feast of Tabernacles / the Feast of Booths / Sukkot</div>
<a href="https://theuselessweb.com/">Hello.</a>
<h1>
header
</h1>
<p>
paragraph
</p>
<script src="script.js"></script>
</body>
</html>
I tried to set an interval so that the 'style' of the button would randomly change so it either wouldn't or would be visually and functionally disabled, but the button disappeared entirely instead. Although I haven't gotten to making it a functioning link, I would appreciate some tips on how it's done. Also, I haven't gotten the keyframes to work at the same time as the body. It's easiest to do without script files due to how the page formatting works, but I might be able to work scripts in if absolutely necessary.
The thing is you're not restoring the visibility once you hide the button, so it stays hidden forever. You need to add an else clause like this:
Let me know if that's the result you was looking for :)