How to position a DIV in a specific coordinates

Question

I want to position a DIV in a specific coordinates   How can I do that using Javascript

User · Answer

Here is a properly described article and also a sample with code. JS coordinates

As per requirement. below is code which is posted at last in that article. Need to call getOffset function and pass html element which returns its top and left values.

function getOffsetSum(elem) {
  var top=0, left=0
  while(elem) {
    top = top + parseInt(elem.offsetTop)
    left = left + parseInt(elem.offsetLeft)
    elem = elem.offsetParent        
  }

  return {top: top, left: left}
}


function getOffsetRect(elem) {
    var box = elem.getBoundingClientRect()

    var body = document.body
    var docElem = document.documentElement

    var scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop
    var scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft

    var clientTop = docElem.clientTop || body.clientTop || 0
    var clientLeft = docElem.clientLeft || body.clientLeft || 0

    var top  = box.top +  scrollTop - clientTop
    var left = box.left + scrollLeft - clientLeft

    return { top: Math.round(top), left: Math.round(left) }
}


function getOffset(elem) {
    if (elem.getBoundingClientRect) {
        return getOffsetRect(elem)
    } else {
        return getOffsetSum(elem)
    }
}

User · Answer

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

User · Answer

You don t have to use Javascript to do this  Using plain-old css   div blah     position absolute    top  0     wherever you want it      left 0     wherever you want it        If you feel you must use javascript  or are trying to do this dynamically Using JQuery  this affects all divs of class  blah     var blahclass        blah     blahclass css  position    absolute    blahclass css  top   0     or wherever you want it blahclass css  left   0     or wherever you want it   Alternatively  if you must use regular old-javascript you can grab by id  var domElement   document getElementById  myElement      don t go to to DOM every time you need it  Instead store in a variable and manipulate  domElement style position    absolute   domElement style top   0    or whatever  domElement style left   0     or whatever

User · Answer

You can also use position fixed css property    lt  -- html code -- gt    lt div class  box  id  myElement  gt  lt  div gt      css code     box       position  fixed        js code  document getElementById  myElement   style top   0    or whatever  document getElementById  myElement   style left   0     or whatever

User · Answer

I cribbed this and added the  px   Works very well   function getOffset el      el   el getBoundingClientRect      return       left   el right   window scrollX     px       top   el top   window scrollY     px        to call    Gets it to the right side  el style top   getOffset othis  top     el style left   getOffset othis  left

User · Answer

well it depends if all you want is to position a div and then nothing else  you don t need to use java script for that  You can achieve this by CSS only  What matters is relative to what container you want to position your div  if you want to position it relative to document body then your div must be positioned absolute and its container must not be positioned relatively or absolutely  in that case your div will be positioned relative to the container   Otherwise with Jquery if you want to position an element relative to document you can use offset   method       mydiv   offset   top  10  left  30       if relative to offset parent position the parent relative or absolute  then use following     var pos       parent   offset    var top   pos top    no of pixel you want to give the mydiv from top relative to parent   var left   pos left    no of pixel you want to give the mydiv from left relative to parent        mydiv   css     position  absolute     top top    left left

[javascript] How to position a DIV in a specific coordinates?

Examples related to javascript

Examples related to html

Examples related to coordinates