We Keep Coding

How do I get a CSS object to move using Javascript?

I am trying to make a JavaScript game and I need a CSS object with an animation to move in place of an object I originally made using JavaScript. Basically, what I want to happen is have my "sword" CSS object move with my player object when I have it Unsheathed. I have been looking for a while and they only give me a result as to were it will be when the page is loaded. I need the sword to always be moving with the player. If my code is needed, tell me, and I will provide it. If you have any questions, feel free to ask. I am pretty new so go easy on the terrible JavaScript that may be provided.
PLEASE USE AN EXAMPLE RELATED TO MY CODE!
if you don't I probably wont understand what is going on....
Thank You in Advance

Focusing the the following element of your example I am only going to address CSS here...
....
<div class="player"></div>
<div id="swordl"></div>
<div id="swordr"></div>
....
To move #swordl and #swordr along with .player you can take advantage of a feature of the CSS position attribute.
When a containing element has CSS position: relative; children of that element with the CSS position: absolute; are positioned with reference to the top-left corner of the parent.
In the following example #player would be the parent, and #swordl and #swordr would be the children...
....
<div id="player">
<div id="swordl"></div>
<div id="swordr"></div>
</div>
....
/* CSS */
#player {
position: relative;
}
#swordl, #swordr {
position: absolute;
}
#swordl {
left: 4px;
top: 2px;
}
#swordr {
left: 12px;
top: 2px;
}
Note the change of class to id in 'player'
Now, whenever you animate the position of #player the two #swords will maintain their position relative to the top-left corner of their containing parent element: you will not have to animate the position of #swords explicitly.
Hope that helps. ;)
CSS position # MDN

You can use the transistion. I have included a couple examples. One example is just JavaScript, the other is not just JavaScript.
//Get Element By Id of 'movingdiv'
var div = document.getElementById('movingdiv');
//Create the timeout (not required)
setTimeout(function() {
//Change the style.top to 50%, You can also do this in px
div.style.top = '50%';
//Change the style.top to 50%, You can also do this in px
div.style.left = '50%';
//Add the transform so it can be centered in the viewport
div.style.transform = 'translate(-50%,-50%)';
//Add the timeout below in milliseconds.
}, 1000)
#movingdiv {
width: 100px;
height: 100px;
background: black;
position: absolute;
top: 10px;
left: 10px;
transition: all 2s;
}
<div id='movingdiv'></div>
//Create a div
var div = document.createElement('div');
//Give the div some style. IMPORTANT: notice the transition
div.style = 'width: 100px; height: 100px; background: black; position: absolute; top: 10px; left: 10px; transition: all 2s;';
//Append the div to the body
document.body.appendChild(div);
//Create a timeout for the div to move
setTimeout(function() {
//Change the style.top to 50%, You can also do this in px
div.style.top = '50%';
//Change the style.top to 50%, You can also do this in px
div.style.left = '50%';
//Add the transform so it can be centered in the viewport
div.style.transform = 'translate(-50%,-50%)';
//Add the timeout below in milliseconds.
}, 1000)

How do I get a div created in js to fill the screen after clicking on a dynamically created td?

I'm creating a jeopardy style game where if you click on a dynamically created td containing the dollar amount pertaining to a question, the question (already obtained from Jeopardy API) is placed as an innerText inside a dynamically created div element. After clicking on the td, I want the div to animate and fill the entire screen.
This is a little snippet.
handleClick(e) {
let targetID = e.target.id;
if (this.lockboard) return;
for (let x = 0; x < this.width; x++) {
for (let y = 0; y < this.height - 1; y++) {
if (targetID.includes(`${y}-${x}`) && targetID) {
this.lockboard = true;
let newDiv = document.createElement('DIV');
let clickedTD = document.getElementById(`${y}-${x}`);
console.log(clickedTD);
newDiv.innerText = this.clues[x][y].question;
newDiv.classList.add('zoom-in');
console.log(this.clues[x][y].question);
console.log(this.clues[x][y].answer);
}
this.lockboard = false;
}
}
}
handleClick is the callback passed to an event Listener on the dynamically created td in an instance method.
The .zoom-in class in CSS has the following code:
.zoom-in {
color: white;
position: absolute;
transform: scale(1) translate(100%, 100%);
transition: transform 3s;
}
TDLR: I guess I just don't know how to animate the div to blow up and fill the whole screen after clicking the TD

The class zoom-in can expand the element it targets to full screen and height.
.zoom-in {
color: white;
position: absolute;
width: 100vw;
height: 100vh;
transition: width 3s, height 3s;
}

Try to add property background-color. Not sure if this could solve a problem.
.zoom-in {
background-color: #000;
color: white;
position: absolute;
width: 100vw;
height: 100vh;
transition: width 3s, height 3s;
}

how to append divs to a specific div in jquery?

I am trying to dynamically fadeIn divs with a specific height and width and the same Id to a specific div with class myBox and randomly position them in myBox using the append() function. However divs are being appended inside and outside myBox.
This is my code. What is wrong?
var xx = Math.random() * 100;
for (var i = 0; i < xx; i++) {
var $newdiv1 = $("<div id='object1' style='width: 100px; height: 100px; background: red ;'></div>");
var top = Math.random() * 700 - 30;
var left = Math.random() * 1200;
$($newdiv1).css({
"top": top,
"left": left
});
$($newdiv1).css('background-color', getRandomColor);
$(".myBox").append($newdiv1).fadeIn("slow");
}

By reviewing your question I think Rory's comment gives you the answer, but I just enhaced it. Need to set overflow: hidden property of css on main div to stop showing the child objects outside of main div.
Please review the snippet, or Fiddle here. Just added background color and opacity for better presentation.
$(function(){
var xx = Math.random() * 100;
for (var i = 0; i < xx; i++) {
var $newdiv1 = $("<div id='object1' style='width: 100px; height: 100px; background: red ;'></div>");
var top = Math.random() * 700 - 30;
var left = Math.random() * 1200;
$($newdiv1).css({
"top": top,
"left": left
});
$($newdiv1).css('background-color', '#C00'); //getRandomColor);
$(".myBox").append($newdiv1).fadeIn("slow");
}
});
.myBox {
width: 500px;
height: 300px;
position: relative;
background-color: orange;
overflow: hidden;
}
.myBox div {
position: absolute;
opacity: 0.5;
border: 1px solid green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myBox"></div>
Hope this will help you.

Appending seems to be done correctly, but the first problem I can see here is that you are setting top and left attributes, but position attribute is not set.
You should add to your stylesheet something that will specify position attribute for the main container and child divs.
Example:
.myBox {
position: absolute;
}
.myBox div {
position: relative;
}
Also another thing. You specify $newdiv1 as jQuery object:
var $newdiv1 = $(...)
And then you again wrap it with $(). This should be enough:
$newdiv1.css({
"top": top,
"left": left
});
$newdiv1.css('background-color', getRandomColor);

DOM Coordinates are wrong when using CSS Transformations

I'm trying to solve how to get the correct coordinates and movement of the element but find that the CSS Transformation doesn't align with the elements DOM coordinates.
I've tried to also change the properties of the element's CSS Transformation via the JS code itself.
The problem you can see in the demo is that the element doesn't reach all four corners of the #wrap div.
Is it also better to incorporate a skew or perspective property rather than rotations? I've just read Top & Left position with Transform Rotate (posted as a duplicated question), but this doesn't explain how to rotation of this example's prespective would work?
HTML
<div id="wrap">
<div id="thing"></div>
</div>
JS
$(function() {
$("#wrap").click(function(e) {
var offset = $(this).offset();
var relativeX = (e.pageX - offset.left);
var relativeY = (e.pageY - offset.top);
document.getElementById("thing").style.left = relativeX + "px";
document.getElementById("thing").style.top = relativeY + "px";
document.getElementById("thing").innerHTML = relativeX + "<br />" + relativeY;
});
});
CSS
#wrap {
height: 300px;
width: 500px;
background: green;
position: relative;
overflow: hidden;
transform: rotateX(60deg) rotateZ(-30deg);
}
#thing {
background: blue;
width: 50px;
height: 50px;
position: absolute;
transition: 1s;
left: 0;
top: 0;
}
Live: https://jsfiddle.net/h9ad4k63/

Absolute position after zooming

I have divs with class="myDiv". I need to do this logic: on mouse over, I want to show a popup in the middle of the div.
For that I have the following:
$(".myDiv").mouseover(function () {
positionDiv($(this).position().left + $(this).width() / 2, $(this).position().top + $(this).height() / 2);
});
function positionDiv(xPosition ,yPosition ) {
$("#popupWindow").css("left", xPosition + "px");
$("#popupWindow").css("top", yPosition + "px");
$("#popupWindow").show();
}
The CSS:
.popupWindow{
position:absolute;
width:313px;
height:383px;
display:none;
}
This will position the popup window in the middle of the div on mouse over. Everything works great at this point.
However, if the website is zoomed in (using the browser zoom functionality), tHe position will get messed up. The popup window no longer appears in the middle of myDiv.
Any idea what might be the problem?
Edit:
For more info, if it is created and I zoom it, it is fine. But when I move my mouse to another myDiv and the new popup appears in a weird position. The left and top attribute of the Div are messing up.

You don't need JS for this:
http://jsfiddle.net/coma/6VUpS/1/
The key is to play with CSS and avoid JS calculations. The container div (myDiv) should be position: relative, the popup must be inside and position: absolute, top and left to 50% and using negative margins to center it (http://www.css-101.org/negative-margin/06.php).
Try avoiding JS for visual fanciness, only CSS ensures the correct position even on zoom since it's rendered by the browser.
HTML
<div class="myDiv">
Hi!
<div class="popupWindow">you are welcome!</div>
</div>
CSS
div.myDiv {
padding: 10px;
background-color: #eee;
margin: 50px 0;
position: relative;
}
div.popupWindow {
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -100px;
width: 200px;
line-height: 100px;
background-color: #111;
color: #fff;
text-align: center;
display: none;
pointer-events: none;
}
div.myDiv:hover > div.popupWindow {
display: block;
}
Bonus track using a checkbox to click/tap/toggle popup and some fade in:
http://jsfiddle.net/coma/6VUpS/3/
More hacky:
http://jsfiddle.net/coma/6VUpS/
More complex example:
http://jsfiddle.net/coma/dHTHG/

I understand your problem and my solution is to put every object containing a pop up in pos relative and then set your pop up with those CSS :
.myPopUp{
position:absolute;
display : none;
width:400px;
height : 100px;
margin-top : -50px;
margin-left:-200px;
background-color: red;
top : 50%;
left: 50%;
}
It will alway be centered.
Now i understand you have only 1 pop up for all your hoverable div. My trick is to save the pop up in a var and remove it from its parent container to append it in the hovered div like this :
var popUp = $('.myPopUp');
$('.myDiv').mouseover(appendPopUp);
$('.myDiv').mouseout(function(){popUp.css('display', 'none')});
function appendPopUp(){
console.log(popUp.parent(), $(this))
if(popUp.parent()[0] != $(this)[0]){
popUp.remove();
$(this).append(popUp);
}
popUp.css('display', 'block')
}
That should work, here's my fiddle : http://jsfiddle.net/7EEZT/

$(window).on('resize', function(){
var $md = $('.myDiv');
positionDiv($md.position().left + $md.width() / 2, $md.position().top + $(this).height() / 2);
});

I have a simple css solution if you have a div with known height and width you can do same task with help of css only
.popupWindow {
position:absolute;
width:313px;
height:383px;
left:50%;
top:50%;
margin-left:-156px;/*half of width*/
margin-top:-191px;/*half of height*/
display:none;
}

Go with position:relative and try this. It will solved your problem relate to position.
$(".myDiv").mouseover(function () {
positionDiv( $(this).width() / 2, $(this).height() / 2);
});
function positionDiv(xPosition ,yPosition ) {
$("#popupWindow").css("left","-" + xPosition + "px");
$("#popupWindow").css("top", "-" + yPosition + "px");
$("#popupWindow").show();
}
The CSS:
.popupWindow{
position:relative;
width:313px;
height:383px;
display:none;
}
http://jsfiddle.net/kishan6446/PdNkg/13/