How can I move an element with JavaScript

Question

I need to move div on click of one of the 4 buttons: left, right, top, bottom

By clicking on each button I want div to move to the left, right, top, bottom according to the clicked button.

function left(){
  $( "#rstSearch" ).position().left = $( "#rstSearch" ).position().left + 10;
}

function right(){
  $( "#rstSearch" ).position().right = $( "#rstSearch" ).position().right + 10;
}

function top2(){
  $( "#rstSearch" ).position().top = $( "#rstSearch" ).position().top + 10;
}

function bottom(){
  $( "#rstSearch" ).position().bottom = $( "#rstSearch" ).position().bottom + 10;
}

#rstSearch {
  background-color: blue;
  width:50px; 
  height:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="btnLeft"  onclick="left();" class="button_air-medium"> left</button>    		 
<button type="button" id="btnRight"  onclick="right();" class="button_air-medium">right</button>
<button type="button" id="btnTop"  onclick="top2();" class="button_air-medium">top</button>
<button type="button" id="btnBottom"   onclick="bottom();" class="button_air-medium">bottom</button>




<div id="rstSearch" class="exosphere" ></div>

As you can see each button has an event listener that calls a function to move the div to said direction.

This however does not work, what do I have change to make it work?

is this what you want jsfiddle.net/o2gxgz9r/14495?

Carsten Løvbo Andersen
– Carsten Løvbo Andersen

2017-09-21 08:06:20 +00:00
Commented Sep 21, 2017 at 8:06 — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Sep 21, 2017 at 8:06

Shiladitya · Accepted Answer · 2017-09-21 08:16:37Z

Here you go with a solution https://jsfiddle.net/o2gxgz9r/14501/

function left(){
  $( "#rstSearch" ).css('left',$( "#rstSearch" ).position().left - 10 );
}

function right(){
  $( "#rstSearch" ).css('left', $( "#rstSearch" ).position().left + 10);
}

function top2(){
  $( "#rstSearch" ).css('top', $( "#rstSearch" ).position().top - 10);
}

function bottom(){
  $( "#rstSearch" ).css('top', $( "#rstSearch" ).position().top + 10);
}

#rstSearch {
  background-color: blue;
  width:50px; 
  height:50px;
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="btnLeft"  onclick="left();" class="button_air-medium"> left</button>    		 
<button type="button" id="btnRight"  onclick="right();" class="button_air-medium">right</button>
<button type="button" id="btnTop"  onclick="top2();" class="button_air-medium">top</button>
<button type="button" id="btnBottom"   onclick="bottom();" class="button_air-medium">bottom</button>

<div id="rstSearch" class="exosphere" ></div>

You need to specify the position as absolute to the div container.

Element position has only two property left and top, you need to use these two & calculate based on that.

Hope this will help you.

Shiladitya · Accepted Answer · 2017-09-21 08:20:56Z

Use instead of position the jquery css modifier add position fixed to your css.

function left(){
  $( "#rstSearch" ).css("left", $( "#rstSearch" ).position().left -= 10);
}

function right(){
  $( "#rstSearch" ).css("left", $( "#rstSearch" ).position().left += 10);
}

function top2(){
  $( "#rstSearch" ).css("top", $( "#rstSearch" ).position().top -= 10);
}

function bottom(){
  $( "#rstSearch" ).css("top", $( "#rstSearch" ).position().top += 10);
}

#rstSearch {
  background-color: blue;
  width:50px; 
  height:50px;
  position: fixed;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="btnLeft"  onclick="left();" class="button_air-medium"> left</button>    		 
<button type="button" id="btnRight"  onclick="right();" class="button_air-medium">right</button>
<button type="button" id="btnTop"  onclick="top2();" class="button_air-medium">top</button>
<button type="button" id="btnBottom"   onclick="bottom();" class="button_air-medium">bottom</button>

<div id="rstSearch" class="exosphere" ></div>

Jordi Nebot · Accepted Answer · 2017-09-28 10:41:25Z

A different approach without jQuery and only two functions for movements on x and y-axis.

var rstSearch = document.getElementById('rstSearch');

function horizontal(value) {  
  rstSearch.style.left = (parseInt(rstSearch.style.left) || 0) + value + 'px';
}

function vertical(value) {  
  rstSearch.style.top = (parseInt(rstSearch.style.top) || 0) + value + 'px';
}

#rstSearch {
  background-color: blue;
  width: 50px; 
  height: 50px;
  position: relative;
}

<button type="button" id="btnLeft"   onclick="horizontal(-10);" class="button_air-medium">left</button>    		 
<button type="button" id="btnRight"  onclick="horizontal(10);" class="button_air-medium">right</button>
<button type="button" id="btnTop"    onclick="vertical(-10);" class="button_air-medium">top</button>
<button type="button" id="btnBottom" onclick="vertical(10);" class="button_air-medium">bottom</button>

<div id="rstSearch" class="exosphere"></div>

Shiladitya · Accepted Answer · 2017-09-21 08:38:36Z

0

Change css little:

#rstSearch {
  background-color: blue;
  width:50px; 
  height:50px;
  position: absolute;  // added this
}

Here you go for updated jquery code:

function left(){
  $( "#rstSearch" ).attr('style','margin-right:10px;');
}

function right(){
  $( "#rstSearch" ).attr('style','margin-left:10px;');
}

function top2(){
  $( "#rstSearch" ).attr('style','margin-bottom:10px;');        
}

function bottom(){
  $( "#rstSearch" ).attr('style','margin-top:10px;');   
}

Check JSFIDDLE

edited Sep 21, 2017 at 8:38

Shiladitya

12.2k17 gold badges29 silver badges43 bronze badges

answered Sep 21, 2017 at 8:05

Himanshu Upadhyay

6,5571 gold badge23 silver badges34 bronze badges

2 Comments

Dellirium Over a year ago

this will move it only once though, make it read what it is currently and move by 10 instead maybe? Or am I wrong?

Jordi Nebot Over a year ago

You're right @Dellirium. Also, adding a margin-bottom won't make the element to move up...

Collectives™ on Stack Overflow

How can I move an element with JavaScript

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related