CODEWITHSUNDEEP
javascriptjquery
Michael
Michael

Reputation: 13636

How can I move an element with JavaScript

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?

Upvotes: 2

Views: 106

Answers (4)

Jordi Nebot
Jordi Nebot

Reputation: 3401

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>

Upvotes: 1

Himanshu Upadhyay
Himanshu Upadhyay

Reputation: 6565

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

Upvotes: 0

Erik Alserda
Erik Alserda

Reputation: 31

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>

Upvotes: 1

Shiladitya
Shiladitya

Reputation: 12161

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.

Upvotes: 1

Related Questions