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

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

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

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

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

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

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

Examples related to javascript

Examples related to html

Examples related to coordinates