jQuery get click element’s coordinates

How can I get clicked element’s coordinates that means mouse x and y positions related to the clicked element, related to document and related to it’s parent element?This is not the big task.jQuery pageX, pageY, offset() events can be use for this purpose. I’ll describe these all types, it’s usages and error handling.

So we’ll get the position of mouse pointer related to element or simply the mouse pointer location.

Get click element’s coordinates related to the element

Here is the html content.

Here is the css style.

Here is the jquery script to get the clicked position’s coordinates related to the element.

Explanation

Check this diagram.Then you can easily understand what am I saying above. 😉
NOTE: You must set the css styles in the element as position:relative.
jQuery get clicked element's-coordinates

Get clicked element’s coordinates related to the document

Now we’ll see how to get clicked position’s coordinates related to the document.Previously we discussed related to the element.
Here is the jquery script to get the clicked position’s coordinates related to the document.

Explanation

Get the clicked position's coordinates-related to the document

Get clicked element’s coordinates related to it’s parent element

Further explanations about offset() and position()

The .offset() method allows to retrieve the current position of an element related to the document.
.position(), which retrieves the current position related to the offset parent.

For a example, I have following html content.

The offset of the id named “subElement” is top:200 and left:200.But it’s the position is left:0 and top:0

But if you add attribute in the css position:relative; you can find the difference then.

.offset().top will get the top from the document.

.position().top will get the top from the relative parent.(if parent is relatively set)

Javascript open the url in new tab

If you’re working with javascript and html sometimes you want to open the url in browser new tab using javascript.Because that process is dynamically doing using javascript and can’t apply the html.For a example If I clicked on the link it open in new tab, but that clicking process is doing by javascript.I think you have an idea about that.OK, let’s see how to open a link in the new tab using javascript.

Continue reading Javascript open the url in new tab

JQuery trigger click event not working

Sometimes jquery trigger click event not working properly.That is not the browser issue.There is not jquery conflicting or javascript errors.If you already added jQuery.noConflict(), not working trigger click event.The main issue is the .click() function call is calling the browser’s built-in ‘click’ function,not the jquery’s.In other words, you can only trigger a click that jQuery has created.

Continue reading JQuery trigger click event not working

JQuery get href value of anchor tag in clicked li tag

I have the following list items with each anchor tags.So I need to get each clicked list item’s anchor tag href value.Here tested solutions and possible errors of the discussions beyond the expectation. Continue reading JQuery get href value of anchor tag in clicked li tag

How to create popup window in JQuery

Creating popup window or pop-under window using JQuery.Pop-under window means when we go to the web sites(some web sites) and after we closing the browser window we can see some windows is open.These are named pop-under windows and the reason of named “pop-unders” they are creating under the current window.So then we can see them after closing browser.Specially these are generate some mouse event or like that.
Continue reading How to create popup window in JQuery