Get Position of Element in Javascript - javascript

I am trying to get the position of an element dropped onto the canvas using the following code.
var x = $(".partitiondrop").position();
alert("Top position: " + x.top + "\nLeft position: " + x.left);
The above works fine. I would like to know if I can get the Right and Bottom positions in the same way so that I can have the area bound by the element as I need to check which elements fall inside this element.

var $partitiondrop = $(".partitiondrop");
var position = $partitiondrop.position();
position.bottom = position.top + $partitiondrop.height();
position.right = position.left + $partitiondrop.width();
alert("Top position: " + position.top + "\nLeft position: " + position.left + "\nBottom position: " + position.bottom + "\nRight position: " + position.right);

U can always add width to x.left position and add height to x.top position.

To get the position of any element by its ID you can do the following
var elementID; //Already obtained via attr(id) method or so
var $element = $("#" + elementID);
var position = $element.position();
position.bottom = position.top + $element.height();
position.right = position.left + $element.width();
var top_position=position.top;
var left_position=position.left;
var bottom_position=position.bottom;
var right_position=position.right;

In Jquery, it can be done using the following code
var p = $( "elementId" );
var position = p.position();
$( "p:last" ).text( "left: " + position.left + ", top: " + position.top );

Right Position:
$(window).width() - ($('.partitiondrop').offset().left + $('.partitiondrop').width());
Bottom Position:
$(window).height() - $('.partitiondrop').offset().top;

Related

tool-tip positioning inside the canvas

I am trying to position tool-tip inside the canvas
.this is the code i have got for postion and displaying.
`var position = this._chart.canvas.getBoundingClientRect();
tooltipEl.style.position = 'absolute';
tooltipEl.style.left = (position.left + window.pageXOffset + tooltipModel.caretX) + 'px';
tooltipEl.style.top = (position.top + window.pageYOffset + tooltipModel.caretY) + 'px';`

Get x and y coordinate in HTML5 [duplicate]

This question already has answers here:
jQuery x y document coordinates of DOM object
(3 answers)
Closed 8 years ago.
I have section and article for displaying contents. My code is:
<section id = "examples">
<article id="item_1">
...
</article>
<article id="item_2">
...
</article>
<article id="item_3">
...
</article>
<article id="item_4">
...
</article>
...
</section>
How can I get the x and y co-ordinates of all the articles?
Easy to do with jQuery
$('article').each(function() {
var element = $(this);
var position = element.position();
console.log( "left: " + position.left + ", top: " + position.top );
}
you can use instead pure js as #koningdavid pointed out in the same way
var elements = document.getElementsByTagName('article');
for(var i = 0; i < elements.length; i++)
{
var element = elements[i].getBoundingClientRect();
console.log( "left: " + element.left + ", top: " + element.top );
}
Live: http://jsfiddle.net/HMHbE/1/
Pure Javascript method
document.querySelector('#item_1').getBoundingClientRect() // for example for #item_1
element.getBoundingClientRect
The returned value is a TextRectangle object which is the union of the rectangles returned by getClientRects() for the element, i.e., the CSS border-boxes associated with the element.
The returned value is a TextRectangle object, which contains read-only left, top, right and bottom properties describing the border-box, in pixels, with the top-left relative to the top-left of the viewport.
https://developer.mozilla.org/en-US/docs/Web/API/Element.getBoundingClientRect
You could do it with jQuery using position or offset:
$('article').each(function(){
var position = $(this).position();
console.log("top: " + position.top + " left: " + position.left);
});
LIVING DEMO
Take into account that position is relative to the document and offset calculates the coordinates relative to the parent offset element.
I would try this in javascript:
// element is each article
// then you can use element.top and element.left for the x and y
var element = document.getElementById('Item_1');
var ele = element.getBoundingClientRect();:
You can use getBoundingClientRect() javascript function
var div = document.getElementById("item_1");
var position = div.getBoundingClientRect();
alert("Coordinates: " + position.left + "px," + position.right+"px,"+ position.top + "px," + position.bottom + "px" );

Disable click Youtube iframe in mozilla

I need to disable click of the Youtube iframe or set difference click,.
I tried to put a div in front the iframe but it doesn't work.
Here is my code, works in Chrome but not in Mozilla:
$(".youtube").each(function () {
var div = this;
var offset = $(this).offset();
var x = offset.left;
var y = offset.top;
var height = $(this).height();
var width = $(this).width();
var divInFront = '<div style="position:absolute; height:' + height + '; width:' + width + '; top:' + y + '; left:' + x + ';" ></div>';
$("body").append(divInFront);
});

JavaScript popup window with scrollbars

I have a function that pops up window in the center and I want it to have a vertical scrollbar.
function popUpCal()
{
var url = "calendar_flight_maint.php";
var width = 700;
var height = 600;
var left = parseInt((screen.availWidth/2) - (width/2));
var top = parseInt((screen.availHeight/2) - (height/2));
var windowFeatures = "width=" + width + ",height=" + height + ",status,resizable,left=" + left + ",top=" + top + "screenX=" + left + ",screenY=" + top;
window.open(url, "subWind", windowFeatures, "POS", "toolbar=no", "scrollbars=1");
}
I have tried scrollbars=yes, scrollbars=auto, scrollbars=1 but the scrollbars still aren't appearing. Is there something wrong with my code? I'm using Firefox 21.0 and I've already tested it in IE 8. What seems to be the problem?
As seen in the specs for window.open, your parameters are wrong.
Try this:
function popUpCal()
{
var url = "calendar_flight_maint.php";
var width = 700;
var height = 600;
var left = parseInt((screen.availWidth/2) - (width/2));
var top = parseInt((screen.availHeight/2) - (height/2));
var windowFeatures = "width=" + width + ",height=" + height +
",status,resizable,left=" + left + ",top=" + top +
"screenX=" + left + ",screenY=" + top + ",scrollbars=yes";
window.open(url, "subWind", windowFeatures, "POS");
}
Here is a jsFiddle

How to make a div or object gradually move to point of mouseclick with javascript?

So I have an object or div that is a square 10x10 pixels. I want to be able to click somewhere in the browser window that causes the div to gradually move towards the point I clicked.
jQuery
$(document).click(function(event) {
var x = event.pageX,
y = event.pageY;
$('div').animate({
top: y,
left: x
}, 1000);
});
CSS
div {
background: red;
padding: 5px;
position: absolute;
}
HTML
<div>hello</div>
jsFiddle.
$(document).click(function(event) {
$('#divID').css({
'position': 'absolute',
'left': event.clientX + document.body.scrollLeft,
'top': event.clientY + document.body.scrollTop });
});
Demo
jQuery code
$("body").bind("click", function(e){
var str = "( " + e.pageX + ", " + e.pageY + " )";
$("span").text("Clicked at " + str);
});
after getting this you need to update your div.style.left and div.style.top !

Categories

Resources