I have an animation build with setInterval.
function changeBatteryIcon(status, i) {
switch (status) {
case 1:
i.className = "fa fa-battery-half red"
return ++status
case 2:
i.className = "fa fa-battery-3 orange"
return ++status
case 3:
i.className = "fa fa-battery lightgreen"
return 1
}
}
function animateHeaderBatteries() {
const i =
document.getElementById("header-batteries").querySelector('i')
let status = 1
setInterval(function() {
status = changeBatteryIcon(status, i)
}, 300)
}
animateHeaderBatteries()
const chargeBtn = document.getElementById('charge')
const drainBtn = document.getElementById('drain')
let ammount = 1
let not = document.getElementById('battery-not')
function charge(battery_charge) {
if (ammount == 1) {
const intervalHandler =
setInterval(function() {
++ammount
const style = `width:${ammount}%;`
battery_charge.style = style
changeStyle(ammount)
if (ammount == 100) {
clearInterval(intervalHandler)
not.style = 'background-color:lightgreen'
}
}, 50)
}
}
function drain(battery_charge) {
if (ammount == 100) {
const intervalHandler =
setInterval( function() {
--ammount
const style = `width:${ammount}%`
battery_charge.style = style
changeStyle(ammount)
if (ammount < 100) {
not.style = 'background-color:white'
}
if (ammount == 1) {
clearInterval(intervalHandler)
}
}, 50)
}
}
const battery_charge = document.getElementById('battery-charge')
function changeStyle (ammount) {
if (ammount > 25)
battery_charge.style['background-color'] = 'orange'
if (ammount > 50)
battery_charge.style['background-color'] = 'yellow'
if (ammount > 75)
battery_charge.style['background-color'] = 'lightgreen'
}
chargeBtn.onclick = function () {
charge(battery_charge)
}
drainBtn.onclick = function () {
drain(battery_charge)
}
body {
font-family:arial;
}
.red {
color:red;
}
.orange {
color:orange;
}
.lightgreen {
color:lightgreen;
}
header {
flex-direction:column;
display:flex;
align-items:center;
justify-content:center;
background-color:#252525;
color:yellow;
}
#header-batteries {
padding-top:20px;
}
header h1 {
margin-top:0;
}
article {
display:flex;
flex-direction: column;
justify-content:center;
align-items:center;
}
#battery-container {
width:50%;
margin-top:20px;
margin-bottom:20px;
display:flex;
align-items:center;
}
#battery {
border:2px solid #252525;
height:75px;
width:90%;
display:flex;
align-items:center;
}
#battery-not {
height:25px;
border:2px solid black;
border-left:0;
width:2%;
}
#battery-charge {
height:100%;
width:1%;
background-color:red;
display:flex;
}
#bolt {
position:absolute;
left:45%;
font-size:50px;
color:grey;
}
#controls {
width:50%;
display:flex;
justify-content:flex-end;
}
#controls button {
height:40px;
flex-basis:40%;
background-color:#f2f200;
border:0;
font-size:16px;
font-weight:bold;
font-family:Helvetica;
margin-left:10px;
}
footer {
display:flex;
align-items:center;
justify-content:center;
margin-top:50px;
}
<html lang="pt-BR">
<meta charset="UTF-8">
</html>
<body>
<div id="container">
<header>
<div id="header-batteries">
<i class="fa fa-battery"></i>
</div>
<h1>Battery</h1>
</header>
<article>
<div id="battery-container">
<div id="battery">
<i class="fa fa-bolt" id="bolt"></i>
<div id="battery-charge">
</div>
</div>
<div id="battery-not">
</div>
</div>
<div id="controls">
<button id="charge">
CHARGE
</button>
<button id="drain">
DRAIN
</button>
</div>
</article>
<footer>
<span>Made with <i class="fa fa-heart red" ></i> by Alex Alonso</span>
</footer>
</div>
</body>
It should run smoothly, changing the css and thus animating the battery charge. But what happens is that it hangs up a little bit in the beginning, but only at the first cycle of animation. After that all animations run smoothly.
const intervalHandler =
setInterval(function() {
++ammount
console.log(ammount)
const style = `width:${ammount}%;`
battery_charge.style = style
changeStyle(ammount)
if (ammount == 100) {
clearInterval(intervalHandler)
not.style = 'background-color:lightgreen'
}
}, 50)
I want to know why it behaves like this
Try using requestAnimationFrame as it is the recommended way as compared to other options to do stuff like animations etc.
Related
I wanted to make two buttons, one was to move up the pages and show up when it exceeds 300px and the other was to be shown immediately and move the person who clicks to the bottom
I will add that I am new in programming
I made one button that takes a person down the page with Javascript and when I added the second it only displayed the last button
HTML
div id="TotopButton">^<span id="test"></span></div>
<div id="ToDownButton">^<span id="test2"></span></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
CSS
#TotopButton
{
background-color: red;
color: black;
font-size: 35px;
padding:10px;
position:fixed;
bottom:15px;
right:15px;
height: 50px;
width: 150px;
border:1px solid black;
text-align: center;
display:none;
}
#TotopButton:hover
{
color:white;
cursor:pointer;
}
#ToDownButton
{
Background-color: blue;
color: black;
font-size:35px;
padding:10px;
position:fixed;
bottom:15px;
left:15px;
height:50px;
width:150px;
border: 1px solid black;
text-align: center;
display: none;
}
#ToDownButton:hover
{
color:white;
cursor:pointer;
}
Javascript
window.onload = function()
{
var TotopButton = document.getElementById("TotopButton");
var test = document.getElementById("test");
window.onscroll = function ()
{
var TotopButton = document.getElementById("TotopButton");
var yScrollAxis = window.pageYOffset;
var test = document.getElementById("test");
if (yScrollAxis > 300)
{
TotopButton.style.display = 'block'
}
else
{
TotopButton.style.display = 'none'
}
test.innerHTML = " " + window.pageYOffset
}
TotopButton.onclick = function()
{
window.scrollBy(0, -1 * window.pageYOffset);
}
};
//Secon button
window.onload = function()
{
var ToDownButton = document.getElementById("ToDownButton");
var test2 = document.getElementById("test2");
window.onscroll = function()
{
var ToDownButton = document.getElementById("ToDownButton");
var yScrollAxis = window.pageYOffset;
var test2 = document.getElementById("test2");
if (yScrollAxis > 50)
{
ToDownButton.style.display = 'block'
}
else
{
ToDownButton.style.display = 'none'
}
test2.innerHTML = " " + window.pageYOffset
}
ToDownButton.onclick = function()
{
window.scrollBy(0, 1000 * window.pageYOffset);
}
};
I use a similar button, and this is my setup for the top button you described:
HTML:
[code]
<section class="floating-button">
<div class="btn-wrapper">
<a class="primary-btn" id="floating-btn" href="#bottom-form">Apply Now</a>
</div>
</section>
[more code]
<section class="final-form" id="bottom-form">
[form here]
</section>
jQuery
$(document).scroll(function() {
var y = $(this).scrollTop();
if ((y > 490) && (y < 5698)) {
$('#floating-btn').css('visibility','visible').fadeIn();
} else {
$('#floating-btn').fadeOut();
}
});
For the above script, adjust 490 to where you want the button to fade in; you can check the right place adding console.log(y); you may also want to remove the y < 5698 if you don't want to fade out the button at the bottom of the page
SCSS
.floating-button {
z-index: 1;
position: fixed;
bottom: 34px;
width: 100%;
}
What I'm intending to do is
60 seconds after the user clicks test, alert the user with a message. How exactly would I go about this? Setting a setTimeout for the whole code doesn't work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test your click speed | Testing</title>
<link rel="stylesheet" href="css/test.css">
<script src="js/test.js" defer></script>
</head>
<body>
<div class ="count-div">
<p>Count:</p>
<p class="count"></p>
</div>
<div class="supercenter">
<section class="info">
<p class="welcome">Welcome to the test!</p>
<p>The test shall begin in <span class="counter">5</span></p>
</section>
<section class="test">
<div class="clickspace">
<h1>Click Here</h1>
</div>
</section>
</div>
</body>
</html>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
color:#333;
overflow: hidden;
}
body{
background:hsla(0, 0%, 20%, 0.884);
}
.count-div{
display: inline-block;
padding:10px 20px;
display:none;
}
.count-div p{
color: white;
display: inline;
}
.supercenter{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
}
.info{
background-color: #ffffff;
text-align: center;
padding:25px;
}
p:first-child{
font-weight: 900;
margin-bottom: 5px;
}
p:nth-of-type(2){
font-weight:700;
}
.test{
display: none;
}
.clickspace{
height:200px;
width:200px;
background-color:white;
display:flex;
flex-direction: column;
justify-content:center;
align-items:center;
user-select: none;
cursor: pointer;
}
.clickspace:active{
transform:scale(1.1);
}
const welcome = document.querySelector(".welcome");
const counter = document.querySelector(".counter");
const info = document.querySelector(".info");
const test = document.querySelector(".test");
let countEl = document.querySelector(".count")
let countDiv = document.querySelector(".count-div")
let time = 5;
let count = 0;
let total = 0;
let timer = 0;
const countDown = setInterval(() => {
time--;
counter.textContent = time;
if(time<0){
counter.textContent = "0"
info.style.display = "none";
test.style.display = "contents"
countDiv.style.display = "contents"
}
}
,1000)
test.addEventListener("click",()=>{
count++;
total=count;
countEl.textContent=total;
})
Bind the event handler with once and it will only be called once.
const test = document.getElementById("test");
test.addEventListener("click", () => {
setTimeout(() => {
alert("done");
}, 2000 /*60000*/);
}, {once: true});
<button type="button" id="test">Click</button>
Or use a Boolean
let clicked = false;
const test = document.getElementById("test");
test.addEventListener("click", () => {
if (!clicked) {
setTimeout(() => {
alert("done");
}, 2000 /*60000*/);
clicked = true;
}
});
<button type="button" id="test">Click</button>
test.addEventListener("click", () => {
setTimeout(() => {
alert("60 seconds have passed");
}, 60000);
}
If you want to cancel any previous timer that was running each time the button is clicked, you can set a variable to hold the timeout ID and clear it.
let clickTimeout
let test = document.querySelector('button');
test.addEventListener("click",()=>{
clearTimeout(clickTimeout)
clickTimeout = setTimeout(() => {
alert("60 seconds have passed");
}, 60000);
})
<button>click</button>
The problem I have is the next one:
Only the last section of my code add the class, but the rest not.
Each section of my html has a unique class and the same class is also in the list tags
const activ = () => {
const linkMenus = document.querySelectorAll('a')
sections.forEach(clas => {
const view = clas.getBoundingClientRect()
if (view.top < 50 && view.top >= -800){
clas.classList.add("active");
linkMenus.forEach(lis => {
if (clas.classList.contains("active") &&
lis.classList.contains(clas.id)){
lis.classList.add("active_nav");
}
else {
lis.classList.remove("active_nav");
}
})
}
else{
clas.classList.remove("active");
}
})
};
window.addEventListener('scroll', activ)
I made this idea before, I will put my HTML, CSS and JS code, you can read it and use the JS code, maybe it will help you.
you can see the code on Codepen or use the snippet.
If you have any question, ask me.
Focus on this code in the JavaScript:
window.scrollY > sections[i].offsetTop && window.scrollY < sections[i].offsetTop + sections[i].offsetHeight
Snippet:
var sections = document.getElementsByTagName("section"),
li = document.getElementsByClassName("li"),
i;
window.onscroll = function () {
for ( i = 0 ; i < sections.length ; i = i + 1 ) {
if ( window.scrollY > sections[i].offsetTop && window.scrollY < sections[i].offsetTop + sections[i].offsetHeight ) {
li[i].classList.add("red");
sections[i].classList.add("red");
} else {
li[i].classList.remove("red");
sections[i].classList.remove("red");
}
}
}
body
{
margin:0;
padding:0;
font-family:sans-serif;
height:2800px;
background:#ccc;
}
.fixed
{
position:fixed;
width:300px;
height:200px;
background:#ccc;
right:20px;
top:50px;
padding:20px;
box-sizing:border-box;
}
.fixed ul
{
margin:0;
padding:0;
}
.fixed ul li
{
line-height:40px;
list-style-type:none;
font-size:25px;
font-weight:bold;
}
section
{
width:100%;
height:600px;
background:yellowgreen;
box-sizing:border-box;
border:4px solid;
margin-top:25px;
line-height:600px;
font-size:40px;
text-align:center;
font-weight:bold;
}
.red
{
color:red;
}
<div class="fixed">
<ul>
<li class="li">one</li>
<li class="li">two</li>
<li class="li">three</li>
<li class="li">four</li>
</ul>
</div>
<section>one</section>
<section>two</section>
<section>three</section>
<section>four</section>
I'm creating a to-do list and I have a constructor function for creating the list items. Each time the user hits enter in the input field I want a new task element to be created just below the first one. As of now, I've tried several methods: looping through the constructor function and looping through the individual command that gives the position of the element within the constructor function.
let addTask = document.getElementById('addItem');
addTask.value = '';
let items = [];
let taskBG;
let taskText;
function Task(){
taskBG = document.createElement('div');
taskBG.style.height = '60px';
taskBG.style.width = '800px';
taskBG.style.marginTop = '-680px';
taskBG.style.marginLeft = '502px';
taskBG.style.backgroundColor = 'red';
taskText = document.createElement('div');
taskText.style.position = 'absolute';
taskText.style.marginTop = '-680px';
taskText.style.marginLeft = '550px';
taskText.style.fontSize = '50px';
taskText.style.fontWeight = 'bold';
taskText.style.color = 'lightgrey';
taskBG.appendChild(taskText);
document.body.appendChild(taskText);
document.body.appendChild(taskBG);
};
addTask.addEventListener('keydown', (ev) => {
if(ev.keyCode == 13){
items.push(addTask.value);
new Task();
addTask.value = '';
for(let i=0; i < items.length; i++){
taskText.textContent = items[i];
};
};
});
body {
background-image:url(backg.jpg);
background-size:2400px, 2400px;
}
#mainBG {
height:900px;
width:900px;
background-color:rgb(72, 73, 73);
opacity:0.6;
display:grid;
margin:0 auto;
}
#mainTitle {
display:grid;
margin:0 auto;
height:100px;
width:700px;
background-color:black;
border-radius:10px;
}
#mainText {
color:white;
font-weight:bold;
display:grid;
margin:0 auto;
font-size:70px;
font-family:"Arial Black", Gadget, sans-serif;
}
#addItem {
display:grid;
margin:0 auto;
height:30px;
width:400px;
margin-top:-360px;
border-radius:10px;
background-color:rgb(128, 201, 201);
color:white;
font-weight:bold;
font-family:"Arial Black", Gadget, sans-serif;
font-size:20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> To-Do </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="mainBG">
<div id="mainTitle">
<div id="mainText">To-Do</div>
</div>
<input id="addItem" type="text" placeholder="Add a Task!">
</div>
<script src="app.js"></script>
</body>
</html>
Try this:
let addTask = document.getElementById('addItem');
addTask.value = '';
let items = [];
let taskBG;
let taskText;
var totalTasks = 0;
function Task(){
taskBG = document.createElement('div');
taskBG.style.height = '60px';
taskBG.style.width = '800px';
if (totalTasks == 0) {
taskBG.style.marginTop = '-680px';
}
taskBG.style.marginLeft = '502px';
taskBG.style.backgroundColor = 'red';
taskText = document.createElement('div');
taskText.style.position = 'absolute';
if (totalTasks == 0) {
taskText.style.marginTop = '-680px';
}
taskText.style.marginLeft = '550px';
taskText.style.fontSize = '50px';
taskText.style.fontWeight = 'bold';
taskText.style.color = 'lightgrey';
taskBG.appendChild(taskText);
document.body.appendChild(taskText);
document.body.appendChild(taskBG);
if (totalTasks == 0) {
totalTasks = 1;
}
};
addTask.addEventListener('keydown', (ev) => {
if(ev.keyCode == 13){
items.push(addTask.value);
new Task();
addTask.value = '';
for(let i=0; i < items.length; i++){
taskText.textContent = items[i];
};
};
});
body {
background-image:url(backg.jpg);
background-size:2400px, 2400px;
}
#mainBG {
height:900px;
width:900px;
background-color:rgb(72, 73, 73);
opacity:0.6;
display:grid;
margin:0 auto;
}
#mainTitle {
display:grid;
margin:0 auto;
height:100px;
width:700px;
background-color:black;
border-radius:10px;
}
#mainText {
color:white;
font-weight:bold;
display:grid;
margin:0 auto;
font-size:70px;
font-family:"Arial Black", Gadget, sans-serif;
}
#addItem {
display:grid;
margin:0 auto;
height:30px;
width:400px;
margin-top:-360px;
border-radius:10px;
background-color:rgb(128, 201, 201);
color:white;
font-weight:bold;
font-family:"Arial Black", Gadget, sans-serif;
font-size:20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> To-Do </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="mainBG">
<div id="mainTitle">
<div id="mainText">To-Do</div>
</div>
<input id="addItem" type="text" placeholder="Add a Task!">
</div>
<script src="app.js"></script>
</body>
</html>
I have just added totalTasks var with the value of 0 and in task() function I am checking if the variable is 0 then add marginTop otherwise do not add it. As marginTop only needed in the first task for the remaining it doesn't be needed.
var totalMoney = 0;
var clickMultiplier = 1;
var incomeSecond = 0;
var totalVirus = 0;
var totalTrojan = 0;
var totalWorm = 0;
var totalServer = 0;
function totalMoneyText() {
totalMoney = totalMoney + 1 * clickMultiplier;
}
setInterval(function() {
totalMoney = incomeSecond + totalMoney;
incomeSecond = (totalWorm) + (totalTrojan * 2) + (totalVirus);
}, 1000);
setInterval(function() {
updateText();
}, 100);
setInterval(function() {
totalTrojan = totalTrojan * 1.001;
totalWorm = totalWorm * 1.01;
}, 5000);
function updateText() {
document.getElementById("totalMoney").innerHTML = totalMoney.toLocaleString("en-US", {
style: "currency",
currency: "USD",
maximumFractionDigits: 0
});
document.getElementById("buyablenum1").innerHTML = Math.round(totalVirus * 1000) / 1000;
document.getElementById("buyablenum2").innerHTML = Math.round(totalTrojan * 1000) / 1000;
document.getElementById("buyablenum3").innerHTML = Math.round(totalWorm * 1000) / 1000;
}
function buyable1() {
if (totalMoney > 49) {
totalMoney = totalMoney - 50;
totalVirus = totalVirus + 1;
} else {
window.alert("You don't have enough to buy that!")
}
}
function buyable2() {
if (totalMoney > 149) {
totalMoney = totalMoney - 150;
totalTrojan = totalTrojan + 1;
} else {
window.alert("You don't have enough to buy that!")
}
}
function buyable3() {
if (totalMoney > 499) {
totalMoney = totalMoney - 500;
totalWorm = totalWorm + 1;
} else {
window.alert("You don't have enough to buy that!")
}
}
function buyable4() {
if (totalMoney > 99) {
totalMoney = totalMoney - 100;
totalServer = totalServer + 1;
} else {
window.alert("You don't have enough to buy that!")
}
}
#font-face{
font-family:HackingT;
src:url(assets/HackingTrashed-Regular.ttf);
}
#font-face{
font-family:Currency;
src:url(assets/Currency.ttf);
}
#font-face{
font-family:Hacker;
src:url(assets/Hacker.tff);
}
body,
html {
overflow-x:hidden;
overflow-y:hidden;
}
html {
background:url(assets/background.png) no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
head {} body {} #meme {
color:transparent;
}
.globalcontainer {
position:relative;
margin:0% 0;
min-height:100vh;
}
.buyablecontainer {
position:relative;
z-index:2;
}
.clickablecontainer {
margin:26.5% auto;
position:relative;
z-index:2;
}
#Money {
font-size:50px;
color:whitesmoke;
text-align:center;
font-family:"HackingT";
text-shadow:1px 1px grey;
margin:0 auto;
}
#totalMoney {
font-size:40px;
color:whitesmoke;
text-align:center;
font-family:"Currency";
letter-spacing:3px;
text-shadow:1px 1px grey;
margin:0 auto;
}
.column {
position:absolute;
}
.buyImg {
width:15%;
border:2px grey solid;
}
.noselect {
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
cursor:default;
}
#imgComputer {
width:15%;
}
.clickable {
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
cursor:default;
-webkit-user-drag:auto | element | none;
-moz-user-select:none | text | all | element -ms-user-select:none | text | all | element
}
.number {
color:snow;
padding:1px;
}
#buyImg:active {} .buyable1 {
position:relative;
}
.tooltip {
position:absolute;
margin:0% 1%;
padding:14% 44%;
border:4px grey solid;
background-color:black;
background-blend-mode:difference;
}
.tooltipheader {
font-family:"Hacker";
color:forestgreen;
position:absolute;
display:inline;
top:-10%;
left:0;
}
.tooltiptext {
color:forestgreen;
position:absolute;
font-family:"Hacker";
display:inline;
text-align:center;
font-size:15px;
left:0%;
top:50%
}
.tooltipincome {
position:absolute;
font-size:20px;
left:5%;
margin:-13% 24%;
font-family:"Hacker";
color:forestgreen;
}
#tooltip1 {
display:none;
}
#tooltip2 {
display:none;
}
#tooltip3 {
display:none;
}
#tooltip4 {
display:none;
}
#virus:hover~#tooltip1 {
display:inline;
}
#trojan:hover~#tooltip2 {
display:inline;
}
#worm:hover~#tooltip3 {
display:inline;
}
#server:hover~tooltip4 {
display:inline;
}
#server {
width:25%;
padding:1%;
}
<!DOCTYPE html>
<html>
<head>
<title>Hacker Clicker</title>
<link rel=stylesheet type="text/css" href="styles.css" />
<script type="text/javascript" src="scripts.js"></script>
<script src="http://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<!-- 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>
</head>
<body class=noselect>
<div class=globalcontainer>
<div class="header">
<a id=meme href="https://www.youtube.com/watch?v=dQw4w9WgXcQ">Click me</a>
<h1 class=noselect id=Money>Money</h1>
<h1 class=noselect id=t otalMoney>$0</h1>
</div>
<!-- Numbers and Buyables -->
<div class="container buyablecontainer noselect">
<div class="column">
<div class="buyable1">
<h2 class=number id=buyablenum1>0</h2>
<img draggable="false" id=virus onclick="buyable1()" class=buyImg src="assets/virus.png" />
<div id=tooltip1 class=tooltip>
<h1 class=tooltipheader>"Virus"</h1>
<h2 class=tooltipincome>Income: $1 per second Price:50</h2>
<p class=tooltiptext>A virus tries to infect anyone and everyone that it can, it's usually used as a way to collect revunue through email spam, aswell to fuck your life up.</p>
</div>
</div>
<div class="buyable2">
<h2 class=number id=buyablenum2>0</h2>
<img draggable="false" id=trojan onclick="buyable2()" class=buyImg src="assets/trojan.png" />
<div id=tooltip2 class=tooltip>
<h1 class=tooltipheader>"Trojan"</h1>
<h2 class=tooltipincome>Income:$2 per second 0.01% replication Price:150</h2>
<p class=tooltiptext>A trojan creates a backdoor to your computer and gives confidential or personal information to the creator.</p>
</div>
</div>
<div class="buyable3">
<h2 class=number id=buyablenum3>0</h2>
<img draggable="false" id=worm onclick="buyable3()" class=buyImg src="assets/worm.png" />
<div id=tooltip3 class=tooltip>
<h1 class=tooltipheader>"Worm"</h1>
<h2 class=tooltipincome>Income:$1 per second 1% replication Price:500</h2>
<p class=tooltiptext>A worm self replicates through the interwebs and lives inside everyone which it is allowed. They are used to do any ill-biddings that the creator wants.</p>
</div>
</div>
<div class="buyable4">
<h2 class=number id=buyablenum4>0</h2>
<img draggable="false" id=server onclick="buyable4()" class=buyImg src="assets/server.png" />
<div id=tooltip4 class=tooltip>
<h1 class=tooltipheader>"Server"</h1>
<h2 class=tooltipincome>Income:$0 +2 on click Price:100</h2>
<p class=tooltiptext>The more servers you got, the more you can hack. Get it foo?</p>
</div>
</div>
</div>
</div>
<div class=clickablecontainer align="center">
<img draggable="false" onclick="totalMoneyText()" id=imgComputer class=clickable src="assets/hacking.gif" />
</div>
</div>
</body>
</html>
Jsfiddle
What's supposed to show up
I apologize in advance for not being able to see the images, but if you try to hover over the 4 icons to the left they work except the last one, hopefully it isn't a simple mistake as I started HTML CSS and Javascript 2 days ago, but it is entirely possible and I'm sorry if that's the case :p.
Also, I'm having a hard time with CSS positioning things exactly where I want them, for example if I want to have an image in the center no matter what ever is around it how do I do that?
Any tips?
Typo in CSS.
#server:hover~tooltip4 {
should read
#server:hover~#tooltip4 {
Many refactoring possibilities here - happy learning!