How to Position a Div in a Specific Coordinates

How to position a DIV in a specific coordinates?

Script its left and top properties as the number of pixels from the left edge and top edge respectively. It must have position: absolute;

var d = document.getElementById('yourDivId');
d.style.position = "absolute";
d.style.left = x_pos+'px';
d.style.top = y_pos+'px';

Or do it as a function so you can attach it to an event like onmousedown

function placeDiv(x_pos, y_pos) {
  var d = document.getElementById('yourDivId');
  d.style.position = "absolute";
  d.style.left = x_pos+'px';
  d.style.top = y_pos+'px';
}

How to position an absolute element in the specific coordinates of the body with a relative position?

The reason why everything falls apart when the body is position: relative; is that an absolute element inside of a relative or absolute positioned parent element is affected by the position of the parent element.

For example, if you have a relative div 200px from the left of the body and 500px from the top of the body, and you have an absolute div inside of that relative div with top: 0; and left: 0, the absolute div will by 0px from the top and left of the parent div. Here's an example:

.parent {
  position: relative;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  border: 1px solid;
}

.child {
  background: blue;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
}

<div class="parent">
  <div class="child"></div>
</div>

Place div at specific coordinates using something like the coords attribute of a map area

I guess you could wrap your image in a div, and set that div's position to relative then you can place inner div to absolute

<div class="relative">
<img your map/>
<div class="pin"><img your pin image></div>
</div>

.relative{
position:relative
}
.pin{
position:absolute;
top:20px;
left:50px;
}

Of course you would set top and left via javascript as needed

setting div position using coordinates

The top property is a string. Try document.getElementById('division').style.top=x + 'px';

I tried the following code and it worked fine for IE and Firefox. The onclick is for IE, the addEventListener is for compliant browsers.

<div id="clickMe" style="position: absolute; top: 10px;" onclick="myClick();">
    clickMe
</div>
<div id="division" style="position: absolute; top: 40px;">
    division
</div>
<script type="text/javascript">
    var clickMe = document.getElementById('clickMe');
    clickMe.addEventListener('click', myClick, 'false');

    function myClick(e) {
        var evt = e || window.event; //windows.event is for IE
        var x = evt.clientX;
        var y = evt.clientY;            
        document.getElementById('division').style.top = y + 'px';
        document.getElementById('division').style.left = x + 'px';
    }
</script>

Position the center of a div to given coordinates on a page

this should work:

//onload 
$(document).ready(function() {
    var x=200;
    var y=140;
    var div = $("#myDiv");
    var divWidth = div.width() / 2;
    var divHeight = div.height() / 2;
    div.css('left', x - divWidth );
    div.css('top', y - divHeight);
});

here is the CSS

#myDiv{position:absolute; left:0; width:50px; height:50px; background-color:red;}

See it in action here: http://jsfiddle.net/cgvAB/3//

How do I move a div to a specific coordinate regardless of its current position?

You can use the below mentioned function which takes three parameters.

divElement: div that you want to move
direction : left or top 
position:  position where you want div to get moved

function MoveDiv(divElement,direction,position){
    $(divElement).css("psoition", "absolute");
    $(divElement).animate({direction:position});
}

JSP : positioning DIV at specific coordinates not working

I have test your code on Chrome and found that in your js code document.Show.sMouseY.value and document.Show.sMouseX.value are null or undefined .So, when you assigned these value to your div divSpec it was not positioning it to required coordinate.Instead i have make certain changes in your js code as you can see below :

var IE = document.all ? true : false

var codeEl;

// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE)

// Set-up to use getMouseXY function onMouseMove
document.onmousemove = getMouseXY;

// Temporary variables to hold mouse x-y pos.s
var tempX = 0;//declare 
var tempY = 0;//declare
var mouseX = 0;
var mouseY = 0;
//var frm = document.dashboardSearchForm;

function getMouseXY(e) {
  if (IE) { // grab the x-y pos.s if browser is IE
    tempX = event.clientX + document.body.scrollLeft
    tempY = event.clientY + document.body.scrollTop
  } else { // grab the x-y pos.s if browser is NS
    tempX = e.pageX
    tempY = e.pageY

  }
  // catch possible negative values in NS4
  if (tempX < 0) {
    tempX = 0
  }
  if (tempY < 0) {
    tempY = 0
  }

  return true;
}

function showCodeLookup(el, divName) {
  //Hide any lookup tables that are displayed first
  document.getElementById("divSpec").style.display = "none";

  var divCodes = document.getElementById(divName);

  codeEl = el;
  computeCoordinates();
  divCodes.style.display = "block";
  divCodes.style.left = tempX; //(change here)assigning coordinate found
  divCodes.style.top = tempY; //(change here)

}

function setCode(divName, code) {

  var divEl = document.getElementById(divName);
  codeEl.value = code;
  divEl.style.display = "none";
}

function computeCoordinates() {
  var isIE = document.all ? true : false;
  var ScrollTop = document.body.scrollTop;
  var _x = tempX;
  var _y = tempY;

  if (ScrollTop == 0) {
    if (window.pageYOffset)
      ScrollTop = window.pageYOffset;
    else
      ScrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;
  }

  if (isIE) {
    _x = tempX + document.body.scrollLeft;
    _y = tempY + ScrollTop;
  }

  tempX = _x;//change here 
  tempY = _y;//change here
}

function hideThis(id) {
  document.getElementById(id).style.display = "none";
}

(Also above code is already tested on chrome and working as accepted)

Working code :

var IE = document.all ? true : false
var codeEl;
// If NS -- that is, !IE -- then set up for mouse captureif (!IE) document.captureEvents(Event.MOUSEMOVE)
// Set-up to use getMouseXY function onMouseMovedocument.onmousemove = getMouseXY;
// Temporary variables to hold mouse x-y pos.svar tempX = 0; //declare var tempY = 0; //declarevar mouseX = 0;var mouseY = 0;//var frm = document.dashboardSearchForm;
function getMouseXY(e) {  if (IE) { // grab the x-y pos.s if browser is IE    tempX = event.clientX + document.body.scrollLeft    tempY = event.clientY + document.body.scrollTop  } else { // grab the x-y pos.s if browser is NS    tempX = e.pageX    tempY = e.pageY
  }  // catch possible negative values in NS4  if (tempX < 0) {    tempX = 0  }  if (tempY < 0) {    tempY = 0  }
  return true;}
function showCodeLookup(el, divName) {  //Hide any lookup tables that are displayed first  document.getElementById("divSpec").style.display = "none";
  var divCodes = document.getElementById(divName);
  codeEl = el;  computeCoordinates();  divCodes.style.display = "block";  divCodes.style.top = tempX +'px'; //(change here)assigning coordinate found  divCodes.style.left = tempY +'px'; //(change here)}
function setCode(divName, code) {
  var divEl = document.getElementById(divName);  codeEl.value = code;  divEl.style.display = "none";}
function computeCoordinates() {  var isIE = document.all ? true : false;  var ScrollTop = document.body.scrollTop;  var _x = tempX;  var _y = tempY;
  if (ScrollTop == 0) {    if (window.pageYOffset)      ScrollTop = window.pageYOffset;    else      ScrollTop = (document.body.parentElement) ? document.body.parentElement.scrollTop : 0;  }
  if (isIE) {    _x = tempX + document.body.scrollLeft;    _y = tempY + ScrollTop;  }

  tempX = _x; //change here   tempY = _y; //change here}
function hideThis(id) {  document.getElementById(id).style.display = "none";}

.lookupTable{  display:none;  padding:5px;  z-index:10;  font-size: 10px;   position: absolute;  border: 2px solid #933;   background-color:white;   width: 220px;   height:180px;   }

<html><body><div class="mRow">  <label for="SS">Special Subjects:</label>  <span class="numLbls">1. </span><input type="text" name="ade" value="<%=ade[0]%>" size="6" maxlength="6" onclick="showCodeLookup(this, 'divSpec')" />  <span class="numLbls">2. </span><input type="text" name="ade" value="<%=ade[1]%>" size="6" maxlength="6" onclick="showCodeLookup(this, 'divSpec')" />  <span class="numLbls">3. </span><input type="text" name="ade" value="<%=ade[2]%>" size="6" maxlength="6" onclick="showCodeLookup(this, 'divSpec')" /></div><div id="divSpec" class="lookupTable" onClick="hideThis(this.id)">  <table>          


       
Related Topics
          

             
 Should an Async API Ever Throw Synchronously
 Differences Between JavaScript Regexp Literal and Constructor
 Fade Background Image in and Out with Jquery
 Completely Removing Duplicate Items from an Array
 Difference Between the 'Controller', 'Link' and 'Compile' Functions When Defining a Directive
 How to Set a JavaScript Breakpoint from Code in Chrome
 Http Get Request in Node.Js Express
 How to Develop Desktop Apps Using HTML/Css/Javascript
 How to Run Function in Angularjs Controller on Document Ready
 Regex to Check Whether a String Contains Only Numbers
 How to Save JSON to Local Text File
 Handling Multiple Catches in Promise Chain
 Nesting Quotes in JavaScript/Html
 Why Does a Form with One Text Input Submit on Enter While One with Two Text Inputs Does Not
 Javascript: How to Dynamically Create Nested Objects Using Object Names Given by an Array
 Reformat String Containing Date with JavaScript
 How to Find the Array Index with a Value
 How to Abort Image <Img> Load Requests Without Using Window.Stop()
          
d  </table></div></body></html>

---

Related Topics