move div with javascript

Question

I have two divs as follows:

HTML:

<body>
<div id="container">
    <div id="health"></div>
    <div id="food"></div>
    <button id="click" onClick="position();">sdcasdfzsdvv</button>
</div>
</body>

CSS :

@charset "utf-8";
*{
    padding:0px;
    margin:0px;}

body{
    background-color:#F4F4F2;
    margin-top:15px;}

#container{
    width:270px;
    height:162px;
    margin-top:0px;
    margin-left:auto;
    margin-right:auto;
    position:fix;}

#health{
    height:80px;
    margin-bottom:0px;
    border: solid 1px red;
    background-color:green;}

#food{
    height:80px;
    margin-bottom:0px;
    border: solid 1px blue;
    background-color:yellow;}

button{
    width:100px;
    height:80px;}

I want to have a function in JavaScript to move these two divs in a way that once the yellow on top and green bottom and by clicking on the button, the green moves up and yellow moves down and vice versa.

but in the first trial, the code below does not work. I don't know how to change the position of these divs without changing their positions to absolute and relative and without using jQuery. I'd be grateful if you kindly help.

function position() {
    document.getElementById('health').style.top='80px';
    document.getElementById('food').style.top='0px';
}

can you explain why #container has position:fix;? which is also wrong it s fixed not fix. — Onur Topal
– Onur Topal, Commented Oct 6, 2014 at 17:00
@ Onur TOPAL, because every time I tried different .style.top in the function, the container would jump. So I thought I have to fix its position. — SRYZDN
– SRYZDN, Commented Oct 6, 2014 at 17:04

nipos · Accepted Answer · 2014-10-06 17:04:50Z

1

You must add position:absolute to the divs.
You must add " before and after the number in the Javascript.

answered Oct 6, 2014 at 17:04

nipos

762 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Monte · Accepted Answer · 2014-10-06 17:17:38Z

1

use JS only:

<body>
<div id="container">
    <div id="health" class="top-div"></div>
    <div id="food" class="bottom-div"></div>
    <button id="click" onClick="position()">sdcasdfzsdvv</button>
</div>

<script>
function position() {
    var topdiv = document.getElementsByClassName("top-div")[0];
    var bottomdiv = document.getElementsByClassName("bottom-div")[0];
    topdiv.parentNode.insertBefore(bottomdiv,topdiv);
    topdiv.className = 'bottom-div';
    bottomdiv.className = 'top-div';
}
</script>

</body>

fiddle: http://jsfiddle.net/rpopanrp/

answered Oct 6, 2014 at 17:17

Monte

1,0168 silver badges15 bronze badges

Comments

shmuli · Accepted Answer · 2014-10-06 17:05:40Z

0

Try:

function position() {
    document.getElementById('health').style.marginTop="80px";
    document.getElementById('food').style.marginTop="0px";
}

answered Oct 6, 2014 at 17:05

shmuli

5,2126 gold badges36 silver badges64 bronze badges

1 Comment

SRYZDN Over a year ago

sorry I just had pasted an incomplete code - I edited my question. That won't solve the problem.

Onur Topal · Accepted Answer · 2014-10-06 17:11:03Z

0

try below code there are also explanation with the changes.

#container{
    width:270px;
    height:162px;
    margin-top:0px;
    margin-left:auto;
    margin-right:auto;
    position:relative; //says the child will be relative to that not body
}

#health{
    height:80px;
    border: solid 1px red;
    background-color:green;
    position:absolute; // the positining for that by the top and left not flow position defalt is top:0 left 0
}

function position() {
    document.getElementById('health').style.top="80px";
}

just implement what you want to other div. this should work.

answered Oct 6, 2014 at 17:11

Onur Topal

3,0611 gold badge26 silver badges44 bronze badges

2 Comments

Onur Topal Over a year ago

also it is better if you give width to the elements.

SRYZDN Over a year ago

@TOPAL yes, when I change their position to absolute, I changed the width

akinuri · Accepted Answer · 2014-10-06 17:13:41Z

0

Would this work for you? If not, try to be more specific. FIDDLE

function position() {
    var container = document.getElementById("container");
    var divs = container.getElementsByTagName("div");
    container.insertBefore(divs[1], divs[0]);
}

answered Oct 6, 2014 at 17:13

akinuri

12.3k10 gold badges75 silver badges108 bronze badges

3 Comments

SRYZDN Over a year ago

The function you have written is right, I just checked it but it does not work. The function should swap the position of divs health and food.

akinuri Over a year ago

Have you checked the fiddle? You didn't position your divs using absolute positioning, so you don't have to modify top property of the divs. Changing their html order swaps their position.

SRYZDN Over a year ago

@aknuri Thanks I checked and it worked - Thanks again

sinisake · Accepted Answer · 2014-10-06 17:15:23Z

0

http://jsfiddle.net/45zkgk57/6/

JS:

    click=1;
function position() {
    if(click==1) {
    document.getElementById('health').style.top='80px';
    document.getElementById('food').style.top='0px';
        click=2;
    }

    else {
            document.getElementById('health').style.top='0px';
    document.getElementById('food').style.top='80px';
        click=1;
    }
}

Also, css is little changed, check fiddle. (Set position: absolute to elements)

answered Oct 6, 2014 at 17:15

sinisake

11.3k2 gold badges21 silver badges29 bronze badges

Collectives™ on Stack Overflow

move div with javascript

6 Answers 6

Comments

Comments

1 Comment

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

1 Comment

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related