Offset top js

function GetOffset [object, offset] { if [!object] return; offset.x += object.offsetLeft; offset.y += object.offsetTop; GetOffset [object.offsetParent, offset]; } function GetScrolled [object, scrolled] { if [!object] return; scrolled.x += object.scrollLeft; scrolled.y += object.scrollTop; if [object.tagName.toLowerCase [] != "html"] { GetScrolled [object.parentNode, scrolled]; } } function GetTopLeft [] { var div = document.getElementById ["myDiv"]; var offset = {x : 0, y : 0}; GetOffset [div, offset]; var scrolled = {x : 0, y : 0}; GetScrolled [div.parentNode, scrolled]; var posX = offset.x - scrolled.x; var posY = offset.y - scrolled.y; alert ["The top-left corner of the div relative to the top-left corner of the browser's client area: \n" + " horizontal: " + posX + "px\n vertical: " + posY + "px"]; } You can get the top-left corner of this element relative to the top left corner of the client area with the button below. Use the scrollbars to test it for different positions. Get the position of the element with red border!

Did you find this example helpful? yes no

function Init [] { UpdateInfo []; if [document.attachEvent] { // Internet Explorer document.attachEvent ["onselectionchange", UpdateInfo]; } else { alert ["Your browser does not support this example!"]; } } function UpdateInfo [] { var info = document.getElementById ["info"]; if [document.selection == undefined] { info.innerHTML = "Your browser does not support this example!"; return; } if [document.selection.type == "None"] { info.innerHTML = "No content is selected, or the selected content is not available!"; } else { var textRange = document.selection.createRange []; var message = "The start point of the selection, relative to the top-left corner of the browser's client area:
"; message += "left: " + textRange.offsetLeft + "
"; message += "top: " + textRange.offsetTop + "
"; message += "
The bounding rectangle of the selection, relative to the top-left corner of the browser's client area:
"; message += "left: " + textRange.boundingLeft + "
"; message += "top: " + textRange.boundingTop + "
"; message += "width: " + textRange.boundingWidth + "
"; message += "height: " + textRange.boundingHeight + "
"; info.innerHTML = message; } } Select some content within this field. The coordinates of the selected content's boundary rectangle are visible in the field below

Did you find this example helpful? yes no