I want two separate objects on a page to be moveable by the user - mouse click and drag.
I'm having all sorts of problems achieving this. the following test code baffles me. Both objects get moved and I cannot work out why.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>
<head>
<title>Mouse move</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script language="JavaScript" type="text/JavaScript">
var cursorInPopUp = true;
var offsetx;
var offsety;
var nowX;
var nowY;
function initialiseFloating ()
{
document.onmousedown = PrepareFloatMove;
document.onmouseup = Function("cursorInPopUp=false");
}
function PrepareFloatMove()
{
if (event.target.id!="bar") return
offsetx = event.clientX
offsety = event.clientY
nowX = parseInt(document.getElementById("container").offsetLeft);
nowY = parseInt(document.getElementById("container").offsetTop);
cursorInPopUp = true;
document.onmousemove = moveFloat;
}
function moveFloat()
{
if (!cursorInPopUp)
{
document.body.style.cursor = 'default';
return;
}
document.body.style.cursor = 'move';
document.getElementById("container").style.left = nowX+event.clientX-offsetx
document.getElementById("container").style.top = nowY+event.clientY-offsety
return false;
}
</script>
<style>
.container
{
position : relative;
top:0px;
left;15%;
width:60%;
height:60%;
border:2px solid black;
}
.bar
{
position:relative;
top:0px;
width:100%;
height:10%;
border:2px solid red;
cursor:pointer;
}
.contents
{
position:relative;
top:0px;
width:100%;
height:88%;
border:2px solid green;
}
.container2
{
position : relative;
top:0px;
left;75%;
width:60%;
height:60%;
border:2px solid pink;
}
.bar2
{
position:relative;
top:0px;
width:100%;
height:10%;
border:2px solid blue;
cursor:pointer;
}
.contents2
{
position:relative;
top:0px;
width:100%;
height:88%;
border:2px solid yellow;
}
</style>
</head>
<body background="black">
<div id="container" class="container">
<div id="bar" class="bar">
</div>
<div id="contents" class="contents">
</div>
<div>
<div id="container2" class="container2">
<div id="bar2" class="bar2">
</div>
<div id="contents2" class="contents2">
</div>
<div>
<script> initialiseFloating('container');</script>
</body>
</html>
Any ideas will be gratefully received
I don't know what other detail to add. Both areas are the same but belong to different classes and have different IDs. the IDs of the second area do not appear in the javascript
Related
when I click in the button the backgrounf color of the change but after one seconde it disappear
this is the code
<!DOCTYPE html>
<html>
<head>
<title>ex7</title>
<meta charset="utf-8">
<script>
function changerCouleur() {
document.bgColor= "#FFFggF";
}
</script>
</head>
<body>
<form>
couleur <input type="text" > <br>
<button onclick="changerCouleur()">changer couleur </button>
</form>
</body>
</html>
I see you already have an answer, but there is no localStorage mechanism with that example. You may want to study the following structure.
//<![CDATA[
/* js/external.js */
let doc, htm, bod, nav, M, I, mobile, S, Q, hC, aC, rC, tC; // for use on other loads
addEventListener('load', ()=>{ // load
doc = document; htm = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id);
mobile = nav.userAgent.match(/Mobi/i) ? true : false;
S = (selector, within)=>{
let w = within || doc;
return w.querySelector(selector);
}
Q = (selector, within)=>{
let w = within || doc;
return w.querySelectorAll(selector);
}
hC = (node, className)=>{
return node.classList.contains(className);
}
aC = function(){
const a = [...arguments];
a.shift().classList.add(...a);
return aC;
}
rC = function(){
const a = [...arguments];
a.shift().classList.remove(...a);
return rC;
}
tC = function(){
const a = [...arguments];
a.shift().classList.toggle(...a);
return tC;
}
// small Library above - magic below can be put on another page using a load event *(except the // end load line)*
const bg = I('bg'), ch_bg = I('ch_bg'), gut = I('gut'), gutS = gut.style;
bg.oninput = function(){
if(this.value.trim().length < 3){
rC(this, 'good');
}
else{
aC(this, 'good');
}
}
ch_bg.onclick = ()=>{
if(hC(bg, 'good')){
let color = bg.value.trim();
bg.value = color; gutS.backgroundColor = color; localStorage.bgColor = color;
}
}
if(localStorage.bgColor){
gutS.backgroundColor = localStorage.bgColor;
}
else{
localStorage.bgColor = '#aaa';
}
}); // end load
//]]>
/* css/external.css */
*{
padding:0; margin:0; font-size:0; border:0; box-sizing:border-box; outline:none; overflow:hidden; -webkit-tap-highlight-color:transparent;
-moz-user-select:none; -ms-user-select:none; -webkit-user-select:none; user-select:none;
}
html,body,.main{
width:100%; height:100%;
}
.main{
background:#aaa;
}
.bar{
position:relative; width:100%; height:39px; background:#ccc; padding:3px; border-bottom:1px solid #333;
}
.bar>*{
position:relative; display:inline-block; height:32px;
}
.bar>*>img{
width:32px; height:32px;
}
.bar h1{
font:bold 27px Tahoma, Geneva, sans-serif; margin-left:3px;
}
.guts{
width:100%; max-height:calc(100% - 39px); background:#aaa; padding:7px 7px 0; overflow-y:auto;
}
.guts *{
font:bold 22px Tahoma, Geneva, sans-serif;
}
label>span{
cursor:pointer; display:inline-block; height:27px; color:#fff; text-shadow:-1px 0 #000,0 1px #000,1px 0 #000,0 -1px #000; float:left;
}
label>input,label>select,label>textarea{
width:100%; height:38px; background:#fff; color:#000; padding:5px; border:1px solid #c00; border-radius:3px; box-shadow:none; margin:2px 0 5px 0; -moz-user-select:text; -ms-user-select:text; -webkit-user-select:text; user-select:text;
}
label>input.good,label>select.good,label>textarea.good{
border-color:#0c0;
}
label>textarea{
height:auto;
}
label>input[type=button],label>button{
cursor:pointer; height:auto; background:linear-gradient(#1b7bbb,#147); color:#fff; font:bold 28px Tahoma, Geneva, sans-serif; border:1px solid #007; border-radius:10px;
}
#ch_bg{
margin-bottom:7px;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
<title>Title Here</title>
<link type='text/css' rel='stylesheet' href='css/external.css' />
<script src='js/external.js'></script>
</head>
<body>
<div class='main'>
<div class='bar'><h1>Color Change Example</h1></div>
<div class='guts' id='gut'>
<label><span>couleur</span><input id='bg' type='text' value='' /><input id='ch_bg' type='button' value='changer couleur' /></label>
</div>
</div>
</body>
</html>
#FFFggF is not a valid color code.
Please try this code:
function changerCouleur() {
document.body.style.background = "#ff9933";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>ex7</title>
<meta charset="utf-8">
</head>
<body>
<form onSubmit="return false">
couleur <input type="text" > <br>
<button onclick="changerCouleur();">changer couleur </button>
</form>
</body>
</html>
I added the attribute onSubmit="return false" to the form because otherwise every time you click on the button the page is reloaded
I have got page with 5 div's. My div's have different heigh (it's adaptive). How I can go to next div by mouse when I scroll half of the current div?
I trying fullpage.js and onepage.js but it not working for me, because my div must be different height
#first {
width:100vw;
height:700px;
background-color:lightyellow;
text-align:center;
}
#second {
width:100vw;
height:700px;
background-color:lightblue;
text-align:center;
}
#third {
width:100vw;
height:1000px;
background-color:lightpink;
text-align:center;
}
#fourht {
width:100vw;
height:1500px;
background-color:lightgreen;
text-align:center;
}
#fiveth {
width:100vw;
height:800px;
background-color:lightgray;
text-align:center;
}
<div id="first">1 div</div>
<div id="second">2 div</div>
<div id="third">3 div</div>
<div id="fourht">4 div</div>
<div id="fiveth">5 div</div>
you're need get the height current active elem, and give for container transform translate( 0, -height ) on scroll, onepage and fullpage for there are work with this.
var $container = $('.container');
var $elem = $container.find('.elem');
var $active = $container.find('.active').height();
$(window).on('scroll',function(){
$container.css({"transform":"translate(0, -" + $active + "px)"});
});
body{
height: 100%;
}
.container{
transition: 1s all;
}
#first {
width:100vw;
height:700px;
background-color:lightyellow;
text-align:center;
}
#second {
width:100vw;
height:700px;
background-color:lightblue;
text-align:center;
}
#third {
width:100vw;
height:1000px;
background-color:lightpink;
text-align:center;
}
#fourht {
width:100vw;
height:1500px;
background-color:lightgreen;
text-align:center;
}
#fiveth {
width:100vw;
height:800px;
background-color:lightgray;
text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div id="first" class="elem active">1 div</div>
<div id="second" class="elem">2 div</div>
<div id="third" class="elem">3 div</div>
<div id="fourht" class="elem">4 div</div>
<div id="fiveth" class="elem">5 div</div>
</div>
I created my version. Look at this https://codepen.io/damates/pen/VXdKjR .
Jquery:
$("#nextDiv, #previousDiv").click(function(){
actualTopOffset = $(window).scrollTop();
areas = $(".area");
find = false;
newPosition = 0;
type = $(this).attr("data-type");
areasCount = $(areas).length;
$.each(areas, function(index, val) {
if(type == "next"){//if we click to go next area
if($(areas).length > (index+1)){
if(actualTopOffset < $(areas[index+1]).offset().top && !find){// ask if area has top offset higher. If yes set new position
find = true;
newPosition = $(areas[index+1]).offset().top;
}
}
}else if(type == "prev"){ //if we click to go previous area
areasCount--;
if((areasCount) >= 0){
if(actualTopOffset > $(areas[areasCount]).offset().top && !find){// ask if area has top offset lower. If yes set new position
find = true;
newPosition = $(areas[areasCount]).offset().top;
}
}
}
});
if(find){ //If we found new position scroll on new position
$('html, body').animate({
scrollTop: newPosition
}, 1000);
}
});
CSS:
#first {
width:100vw;
height:700px;
background-color:lightyellow;
text-align:center;
}
#second {
width:100vw;
height:700px;
background-color:lightblue;
text-align:center;
}
#third {
width:100vw;
height:1000px;
background-color:lightpink;
text-align:center;
}
#fourht {
width:100vw;
height:1500px;
background-color:lightgreen;
text-align:center;
}
#fiveth {
width:100vw;
height:800px;
background-color:lightgray;
text-align:center;
}
#nextDiv, #previousDiv{
position: fixed;
top: 20px;
background: red;
}
#previousDiv{
top: 0px;
}
HTML:
<div id="first" class="area">1 div</div>
<div id="second" class="area">2 div</div>
<div id="third" class="area">3 div</div>
<div id="fourht" class="area">4 div</div>
<div id="fiveth" class="area">5 div</div>
<div id="previousDiv" data-type="prev">Previous div</div>
Next div
EDIT VERSION WITH SCROLL
I change the script for scrolling. Look at to https://codepen.io/damates/pen/VXdKjR
I am creating a game with jquery, the meaning of the game is that you should , with one element ( a bucket in this case "#spelare" ) catch other elements ".food" that are falling down from above. How can i make so that when the falling elements touch the (bucket), they disappear, and you get 1 score?
Thanks in advance for all help i can get!
Here is the code I have atm:
body{
text-align: center;
background-color:black;
}
#spelplan{
width: 1000px;
height:610px;
position:absolute;
margin-left:460px;
box-shadow: inset 0px 0px 50px;
background-color: green;
}
#spelare{
width:110px;
height: 12vh;
position: relative;
top:53.4vh;
background-image:url(hink.png);
background-size:cover;
}
.food{
width:50px;
height:50px;
position:absolute;
background-image:url(vattendroppe.png);
background-size:cover;
display:block;
}
p{
position:relative;
font-family: 'Electrolize', sans-serif;
}
#poäng{
color:white;
bottom:17vh;
right:45%;
}
#liv{
color:white;
bottom:18vh;
right:46.5%;
}
.fa-heart{
color:red;
bottom:21.5vh;
right:43.5%;
position:relative;
}
#info{
color:white;
font-family: 'Electrolize', sans-serif;
margin-top:68vh;
}
<!DOCTYPE html>
<html>
<head>
<title>Jquery Spel</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Electrolize" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).keydown(function(e){
if (e.keyCode ==39 && $("#spelare").css("left") < '880px')
$("#spelare").animate({left: '+=20px'}, 0);
else if (e.keyCode ==37 && $("#spelare").css("left") > '0px')
$("#spelare").animate({left: '-=20px'}, 0);
});
setInterval(spawnFood,2000);
setInterval(fall, 0);
});
function spawnFood(){
var spelplanWidth = $('#spelplan').width();
var randPosX = Math.floor((Math.random()*spelplanWidth));
var element = $("<div class='food'></div>").css('left',randPosX).css('bottom', '446px');
$("#spelplan").append(element);
}
function fall(){
var elementFall = $(".food").animate({top: '+=20px'}, 500);
$("#spelplan").append(elementFall);
}
</script>
</head>
<body>
<h2 style="color:white">JQUERY SPEL</h2>
<div id="spelplan">
<div id="spelare"> </div>
<div class="food"> </div>
<p id="poäng"> Poäng: </p>
<p id="liv"> Liv: </p>
<i class="fa fa-heart" aria-hidden="true"></i>
</div>
<div id="info">
<h1> Instruktioner: </h1>
<p> Spelet går ut på att du med hjälp av hinken och piltangenterna ska fånga alla vattendroppar! <br/> Du måste hålla ut i 40 sekunder, missa tre vattendroppar så förlorar du! </p>
</div>
</body>
</html>
You have to constently compare each falling element position versus the bucket position.
A nice place for it is in your fall() function.
Have a look!
CodePen
$(document).ready(function(){
var score=0;
var fails=0;
//Bucket movement
$(document).keydown(function(e){
//console.log(e.which);
// if left or right keyboard arrow
if (e.keyCode ==39 && $("#spelare").css("left") < '880px')
$("#spelare").animate({left: '+=20px'}, 0);
else if (e.keyCode ==37 && $("#spelare").css("left") > '0px')
$("#spelare").animate({left: '-=20px'}, 0);
});
// Game init
var spanfoodInterval = setInterval(spawnFood,2000);
var fallInterval = setInterval(fall, 0);
// Water append
function spawnFood(){
var spelplanWidth = $('#spelplan').width();
var randPosX = Math.floor((Math.random()*spelplanWidth));
var element = $("<div class='food'></div>").css('left',randPosX).css('bottom', '446px');
$("#spelplan").append(element);
}
// dropping object animation
function fall(){
var elementFall = $(".food").animate({top: '+=20px'}, 500);
//$("#spelplan").append(elementFall);
$(".food").each(function(){
if( typeof($(this)) !="undefined" && typeof($("#spelare"))!="undefined" ){
// item position
var thisPosition = $(this).position();
var thisWidth = $(this).width();
// Bucket position and width
var bucketPosition = $("#spelare").position();
var bucketWidth = $("#spelare").width();
var bucketHeight = $("#spelare").height();
// If object and bucket at same position
if( thisPosition.top >= bucketPosition.top
&& thisPosition.left >= bucketPosition.left
&& thisPosition.left <= bucketPosition.left + bucketWidth ){
$(this).remove();
score++;
//console.log(score);
// Update the score display
$("#score").html(score);
}
// Food not catched...
if( thisPosition.top >= bucketPosition.top + bucketHeight){
$(this).remove();
fails++;
//console.log("FAILS: "+fails);
}
// if more than 3 miss => Game over.
if(fails>3){
$("#failMsg").show();
$("#spelare").remove();
$(".food").remove();
clearInterval(spanfoodInterval);
clearInterval(fallInterval);
}
}
});
}
}); // ready
body{
text-align: center;
background-color:black;
}
#spelplan{
width: 1000px;
height:610px;
position:absolute;
margin-left:460px;
box-shadow: inset 0px 0px 50px;
background-color: green;
}
#spelare{
width:110px;
height: 12vh;
position: relative;
top:53.4vh;
background-image:url(https://placehold.it/350x150); /* hink.png); */
background-size:cover;
}
.food{
width:50px;
height:50px;
position:absolute;
background-image:url(https://placehold.it/350x150); /* vattendroppe.png); */
background-size:cover;
display:block;
}
p{
position:relative;
font-family: 'Electrolize', sans-serif;
}
#failMsg{
position:fixed;
top:50%;
left:50%;
transform:translate(50% 50%);
color:white;
font-size:4em;
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Electrolize" rel="stylesheet">
<h2 style="color:white">jQuery GAMES - Your score: <span id="score">0</span></h2><!-- JQUERY SPEL</h2-->
<div id="spelplan">
<div id="spelare"> </div>
<div class="food"> </div>
<p id="poäng"> Poäng: </p>
<p id="liv"> Liv: </p>
<i class="fa fa-heart" aria-hidden="true"></i>
</div>
<div id="info">
<h1> Instructions: </h1>
<p> The game is that you are using the bucket and the arrow keys to catch all the drops of water! <br/> You have to hold out for 40 seconds, missing three water drops, you lose! </p>
</div>
<div id="failMsg">Game over!</div>
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!
How can the code below be modified such that I would be able to add a centered "loading..." message inside the box while the progress bar runs in the background? Ie. it would display LOADING..." in the center of the box while the progress bar runs in the background inside the DIV.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var prg_width = 200;
var progress_run_id = null;
function progress() {
var node = document.getElementById('progress');
var w = node.style.width.match(/\d+/);
if (w == prg_width) {
clearInterval( progress_run_id );
w = 0;
alert("done")
} else {
w = parseInt(w) + 5 + 'px';
}
node.style.width = w;
}
function runit() {
progress_run_id = setInterval(progress, 30);
}
</script>
</head>
<body>
<div style="border: 1px solid #808080; width:200px; height:20px;">
<div id="progress" style="height:20px; width:0px; background-color:#DBDBDB;"/>
</div>
</div>
<p>Start</p>
</body>
</html>
<div style="border: 1px solid #808080; width:200px; height:20px;">
<div id="progress" style="text-align: center; height:20px; width:0px; background-color:#DBDBDB;"/>
<div style=" position: fixed; left: 92px ">loading</div>
</div>
</div>