I have a working javascript to clone a div and not move the other divs in the same line. But when I try to implement it in html it is not possible to close the maximized div.
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<script type="text/javascript" src="java_test.js"></script>
<link href="max_css.css" rel="stylesheet" />
</head>
<body>
<div id="box1" class="kaesten" onclick="changeSize('box1', 600, 600)">test1</div>
<div id="box2" class="kaesten" onclick="changeSize('box2', 600, 600)">test2</div>
<div id="box3" class="kaesten" onclick="changeSize('box3', 600, 600)">test3</div>
<div id="box4" class="kaesten" onclick="changeSize('box4', 600, 600)">test4</div>
<div id="dummy" class="absoluteclass" onclick="changeSize('dummy', 600, 600)" ></div>
</body>
function changeSize(id, weight, height){
var elem = document.getElementById(id);
var currentAbsoluteElem = document.getElementById('dummy');
var text = elem.innerHTML;
currentAbsoluteElem.innerHTML = text;
currentAbsoluteElem.setAttribute('style','display:block');
/*Extra styling neeed to be done here*/
}
var elems = document.getElementsByClassName('kaesten');
for(var i = 0; i < elems.length; i++){
elems[i].onclick = function(){
changeSize(this.id, 600, 600);
}
}
var absoluteCl = document.getElementsByClassName('absoluteclass');
absoluteCl[0].onclick = function(){
console.log(document.getElementsByClassName('absoluteclass'))
document.getElementsByClassName('absoluteclass')[0].setAttribute('style','display:none');
}
.kaesten{
width:240px;
height:300px;
background-color:darkgrey;
background-position:center;
background-repeat:no-repeat;
text-shadow:0px 0px 3px #000;
border: 5px solid #F0F8ff;
vertical-align:top;
text-shadow: 3px 3px 4px #777;
float:left;
margin-left:30px;
}
.absoluteclass{
position:absolute;
background-color:darkgrey;
width:600px;
height:600px;
left:calc(30%);
display:none;
}
<div id="box1" class="kaesten">test1</div>
<div id="box2" class="kaesten">test2</div>
<div id="box3" class="kaesten">test3</div>
<div id="box4" class="kaesten">test4</div>
<div id="dummy" class="absoluteclass"></div>
Question: How can I implement the JavaScript function into my HTML to make the big div close by onclick?
you can modify your changeSize function like this.
function changeSize(id, weight, height){
var currentAbsoluteElem = document.getElementById('dummy');
if(id == null && weight == null && height == null){
currentAbsoluteElem.setAttribute('style','display:none');
}else{
var elem = document.getElementById(id);
var text = elem.innerHTML;
currentAbsoluteElem.innerHTML = text;
currentAbsoluteElem.setAttribute('style','display:block');
/*Extra styling neeed to be done here*/
}
}
and in your html
<div id="dummy" class="absoluteclass" onclick="changeSize()" ></div>
I hope this is what you want.
Related
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
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>
I have two boxes, which can be increased and decreased in size by onclick. But now my Hyperlinks don't work.
CODE:
function changeSize(id, weight, height){
var elem = document.getElementById(id);
if(elem.getAttribute('style')){
elem.removeAttribute('style');
} else {
elem.style.width = weight + 'px';
elem.style.height = height + 'px';
elem.style.fontSize = '30px';
}
}
var elems = document.getElementsByClassName('kaesten');
for(var i = 0; i < elems.length; i++){
elems[i].onclick = function(){
changeSize(this.id, 600, 600);
}
}
.kaesten{
width:240px;
height:300px;
background-color:darkgrey;
background-position:center;
background-repeat:no-repeat;
text-shadow:0px 0px 3px #000;
border: 5px solid #F0F8ff;
vertical-align:top;
text-shadow: 3px 3px 4px #777;
float:left;
margin-left:30px;
}
<div id="box1" class="kaesten" onclick="changeSize('standort', 600, 600); return false;">
text
</div>
<div id="box2" class="kaesten" onclick="changeSize('standort', 600, 600); return false;">
text
</div>
Question: I linked some intranet sites and office documents without the onclick function they open! How can I make the links work and keep the function?
Add // at the start of url in hyperlink href="//www.focus.de"
function changeSize(id, weight, height){
var elem = document.getElementById(id);
if(elem.getAttribute('style')){
elem.removeAttribute('style');
} else {
elem.style.width = weight + 'px';
elem.style.height = height + 'px';
elem.style.fontSize = '30px';
}
}
var elems = document.getElementsByClassName('kaesten');
for(var i = 0; i < elems.length; i++){
elems[i].onclick = function(){
changeSize(this.id, 600, 600);
}
}
.kaesten{
width:240px;
height:300px;
background-color:darkgrey;
background-position:center;
background-repeat:no-repeat;
text-shadow:0px 0px 3px #000;
border: 5px solid #F0F8ff;
vertical-align:top;
text-shadow: 3px 3px 4px #777;
float:left;
margin-left:30px;
}
<div id="box1" class="kaesten" onclick="changeSize('standort', 600, 600); return false;">
text
</div>
<div id="box2" class="kaesten" onclick="changeSize('standort', 600, 600); return false;">
text
</div>
I linked some intranet sites and office documents in my homepage and had the problem that only without the onclick function they open!
Now I deleted the return false; in my HTML :
wrong Code:
<div id="box1" class="kaesten" onclick="changeSize('standort', 600, 600); return false;"> text </div>
Right Code:
<div id="box1" class="kaesten" onclick="changeSize('standort', 600, 600);"> text </div>
Now I can open all Links!
I'm looking to make a program that will basically change color when each element is clicked individually. I've got it to work to the point where I can click on just an the page and both of the elements can change color but I need them to be independent of each other. How would I do something like this?
document.onload = function()
{
document.onclick = changeTest("box0", "green");
};
function changeTest(id, color)
{
var element;
element = document.getElementById(id);
element.style.backgroundColor = color;
}
Html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>this will appear on the tab in the browser</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="onclick.js" type="text/javascript"></script>
<style type="text/css">
{
border: 0;
margin:0;
paddig: 0;
}
body
{
font-family:"Times New Roman"; serif;
font-size: 12pt;
}
.box
{
height: 10em;
width: 10em;
margin: 2px;
}
#box0
{
background-color: yellow;
}
#box1
{
background-color: red;
}
</style>
</head>
<body>
<div class="box" id="box0"></div>
<div class="box" id="box1"></div>
</body>
</html>
var box0 = document.getElementById("box0");
var box1 = document.getElementById("box1");
var color = "green";
function changeColor(box, color) {
box.style.backgroundColor = color;
}
box0.onclick = function() {
changeColor(this, color);
};
box1.onclick = function() {
changeColor(this, color);
};
<!DOCTYPE html>
<html>
<head>
<title>this will appear on the tab in the browser</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="onclick.js" type="text/javascript"></script>
<style type="text/css">
* {
border: 0;
margin:0;
padding: 0;
}
body {
font-family:"Times New Roman"; serif;
font-size: 12pt;
}
.box
{
height: 10em;
width: 10em;
margin: 2px;
}
#box0 {
background-color: yellow;
}
#box1 {
background-color: red;
}
</style>
</head>
<body>
<div class="box" id="box0"></div>
<div class="box" id="box1"></div>
</body>
</html>
Knowing you can also perfom this with addEventListener() method.
You will have to bind the event listeners to the individual boxes. It's as simple as that. Something like this (not tested):
document.getElementById("box0").onclick = changeTest("box0", "green");
document.getElementById("box1").onclick = changeTest("box1", "green");
I would use jquery for that:
html:
<body>
<div class="box" id="box0">box0</div>
<div class="box" id="box1">box1</div>
</body>
and Script:
$( "#box0" ).click(function() {
changeTest("box0", "green");
});
$( "#box1" ).click(function() {
changeTest("box1", "red");
});
Here's an jsfiddle:
http://jsfiddle.net/o8c8y23x/
Ok, without jquery:
<body>
<div class="box" id="box0" onclick = "changeTest('box0', 'red');">box0</div>
<div class="box" id="box1" onclick = "changeTest('box1', 'green');">box1</div>
</body>
jsfiddle:
http://jsfiddle.net/o8c8y23x/2/
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>