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)

Resize an html element using mouse - jQuery

I have container and I want to resize it with mouse using JavaScript.
the implementation uses mousedown ,mouseup, and mousemove events but I have slight problem when page is already scrolled before the mousedown is fired.
the whole page seems to scroll to position zero. How can i fix it so whether page is already scrolled or not the resize will work fine.
JS:
//resize div vertically or horizontal or both
$.fn.resizeMe = function(options){
var grippie = $(this),
options = $.extend({resizeMe:"",resize:"vertical"},options),
resizeMe = $(options.resizeMe);
grippie.on('mousedown',function(e){initialiseGrippieResize(e)});
function initialiseGrippieResize(e) {
$(window).on('mousemove',function(e){
startResizing(e);
resizeMe.css({opacity:.25});
}).on('mouseup',function(e){
stopResizing(e);
resizeMe.css({opacity:1});
});
}
//css objects
function cssOBJ(e,key){
var css = {
vertical:{height:(e.clientY - resizeMe.offset().top)},
horizontal : {width:(e.clientX - resizeMe.offset().left)},
both: {
height:(e.clientY - resizeMe.offset().top),
width: (e.clientX - resizeMe.offset().left)
}
};
//return objects
return css[key];
}
//Start Resizing
function startResizing(e) {
resizeMe.css(cssOBJ(e,options.resize));
}
function stopResizing(e) {
$(window).off('mousemove mouseup');
}
}
$('.grippie').resizeMe({resizeMe:"#pane",resize:'vertical'});
HTML:
<div id='main-container'>
<div id='pane' arial-lable='content-wrapper'>contents will go here</div>
<div class='grippie'></div>
</div>
CSS:
#pane{
resize: n-resize;
overflow: hidden;
border: 1px solid #d6d9dc;
padding:15px 20px;
min-height:50px;
}
#pane *{border:0px !important; background: #fff !important;}
.grippie {
background-position: center;
border: 1px solid #d6d9dc;
border-width: 0 1px 1px;
cursor: s-resize;
height: 9px;
overflow: hidden;
background-color: #eff0f1;
/*background-image: url('images/icons.png');*/
background-repeat: no-repeat;

In JavaScript
pageX, pageY, screenX, screenY, clientX, and clientY returns a number which indicates the number of physical “CSS pixels” a point is from the reference point. The event point is where the user moved the mouse, the reference point is a point in the upper left. These properties return the horizontal and vertical distance from that reference point.
but pageX or pageY returns a number which indicates the amount of page scrolled top or left.
so changing the clientX to pageX and clientY to pageY
solved the problem and now I can resize any element. :) :)
//css objects
function cssOBJ(e,key){
var css = {
vertical:{height:(e.pageY - resizeMe.offset().top)},
horizontal : {width:(e.pageX - resizeMe.offset().left)},
both: {
height:(e.pageY - resizeMe.offset().top),
width: (e.pageX - resizeMe.offset().left)
}
};
//return objects
return css[key];
}

How to get hold of div on mousemove?

JSFiddle code
I am trying to get hold of div with blue lines when I move the mouse pointer within a distance of 20px from the div. I am able to get hold of the div with blue lines only when the mouse pointer is on that div. Basically, selecting a div using the mouser pointer is difficult as the div width is only 1px which cannot be changed.
I am executing the below code but still not able to catch hold of the div which is 20px away from either right or left of the mouse pointer.
Note:The div mentioned above indicated the div with blue lines and not the gray box.
//Div positions and their id has been added to map
var hmap = new Map();
hmap.set("hguide1",96);
hmap.set("hguide2",284);
hmap.set("hguide3",520);
var vmap = new Map();
vmap.set("vguide1", 96);
vmap.set("vguide2",384);
vmap.set("vguide3",720);
$(document).mousemove(function(e){
var mx = e.pageX, my = e.pageY;
//Catch hold of vertical div's
for (var [key, value] of vmap) {
var dist = value - mx;
if(dist >= -20 && dist <= 20){
$('.'+key).css({width: '10px', left:});
} else {
$('.'+key).css({width: '1px'});
}
}
//Catch hold of horizontal div's
for (var [key, value] of hmap) {
var dist = value - my;
if(dist >= -20 && dist <= 20){
$('.'+key).css({height: '10px'});
} else {
$('.'+key).css({height: '1px'});
}
}
});
I looking for a way thru which I can catch hold of the div, which is 20px away from either the left or right side of the mouse pointer, and drag it.
Any suggestions much appreciated.

You can use CSS styling to get this result. We set the ::after size to 100% - 20px on either the left or top, depending if it's the horizontal or vertical line. We then set our width or height, depending on if we're adjusting the row or column, to either 100% or the buffer size(40px, because we want 20px on either side of the line).
I realize that sounds a little confusing, so I'll split them up. Here's the vertical:
.vguide1,.vguide2,.vguide3 {
border-left: 1px solid blue;
padding-bottom: 20px;
position: absolute;
width:1px;
height:650px;
}
.vguide1::after,.vguide2::after,.vguide3::after {
content: '';
position: absolute;
left: calc(50% - 20px);
width: 40px;
height: 100%;
cursor: col-resize;
}
Horizontal:
.hguide1,.hguide2,.hguide3 {
padding-right: 20px;
position: absolute;
width:850px;
height:1px;
border-top: 1px solid blue;
}
.hguide1::after,.hguide2::after,.hguide3::after {
content: '';
position: absolute;
top: calc(50% - 20px);
width: 100%;
height: 40px;
cursor: row-resize;
}
With shading to show the hit box: https://jsfiddle.net/Ljxpj5bt/27/
Without hit box: https://jsfiddle.net/Ljxpj5bt/28/

Positioning text according to the screen

Please check this out http://jsfiddle.net/e8UQn/
In the display screen, you can see the the text at the bottom position when you drag the scroll bar down, I've set the position of #text-box to absolute which is necessary to show the position at the specified top and left position.
What I need is when the browser shrinks, the backstretch image is looking perfect, but the text needs to modify its position so that the scroll bar should not be shown.
There should not be any change in top and left property, because those values are dynamically derived from my web application which is necessary. Is there any possibility in changing the values dynamically according to the screen size?
Thanks!

You need to position #text-box relative to the bottom of the window:
#text-box {
position: absolute;
display: inline-block;
zoom: 1;
bottom: 20px; /* This value here */
left: 51px;
padding-top: 10px;
padding-left: 20px;
}
Fiddle: http://jsfiddle.net/e8UQn/2/
If you don't have the ability to change that output, overwrite the top value:
#text-box {
top: 'auto';
bottom: 20px;
}

updated:
try this:
var t = $(window).height() - $("#text-box").outerHeight();
$("#text-box").css("top", t);
http://jsfiddle.net/e8UQn/3/

How to keep a floating div centered on window resize (jQuery/CSS)

Is there a way (without binding to the window.resize event) to force a floating DIV to re-center itself when the browser window is resized?
To help explain, I imagine the pseudocode would look something like:
div.left = 50% - (div.width / 2)
div.top = 50% - (div.height / 2)
UPDATE
My query having been answered below, I wanted to post the final outcome of my quest - a jQuery extension method allowing you to center any block element - hope it helps someone else too.
jQuery.fn.center = function() {
var container = $(window);
var top = -this.height() / 2;
var left = -this.width() / 2;
return this.css('position', 'absolute').css({ 'margin-left': left + 'px', 'margin-top': top + 'px', 'left': '50%', 'top': '50%' });
}
Usage:
$('#mydiv').center();

This is easy to do with CSS if you have a fixed-size div:
.keepcentered {
position: absolute;
left: 50%; /* Start with top left in the center */
top: 50%;
width: 200px; /* The fixed width... */
height: 100px; /* ...and height */
margin-left: -100px; /* Shift over half the width */
margin-top: -50px; /* Shift up half the height */
border: 1px solid black; /* Just for demo */
}
The problem, of course, is that fixed-size elements aren't ideal.

The simplest way would be with the following CSS code:
#floating-div {
width: 50%;
border: 1px solid gray;
margin: 0 auto;
}
The key line of CSS code above is the "margin: 0 auto;" which tells the browser to automatically set the left/right margins to keep the div centered on the page, even when you resize the browser window.

Try this little article about Horizontal and Vertical centering. It is a little old and has a few hacks but you should be able to work out some test code from it.