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)

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

JQuery full screen background rotator/slideshow example

How to create full screen background rotator/slideshow using jquery.It is simple with using jquery supersized plugin.Only you have to pass parameters it the function and it’ll automatically rotating with images.It is not re-size when zoom in and zoom out of the browser and working with all major web browsers.Read more to view demo and download full source code.

Continue reading JQuery full screen background rotator/slideshow example

JQuery autocomplete example with database accessing

How can I create text box or drop down box using jquery autocomplete feature with database accessing.It is happening when you are pressing keys in that field.Then call to the database to get records.First you must access jquery-ui auto complete library files.

Here is a php front-end file.First include the jquery library file and jquery-ui.css,jquery-ui.min.js files.

This is the data.php file to get and send the records of the database.

If you want to change auto complete styles change add the following stylesand change that as you want.

View Demo

Download JQuery autocomplete with database accessing Example (3 KB)

Get twitter followers list with each followers count using JQuery-JSON

Get twitter followers list with each followers count using JQuery-JSON.This is easy and can be get given user’s twitter followers list with each followers count without using any PHP code.See this following diagram.You can understand this better from it.

Get twitter followers list with each followers count using JQuery-JSON
Continue reading Get twitter followers list with each followers count using JQuery-JSON

JQuery check page is fully loaded or not | $(document).ready() vs $(window).load()

How to check web page is fully load or not using JQuery.First you must understand JQuery document.ready and window.load functions.Here this is simply describes also differences between document.ready and window.load functions and usages.
Continue reading JQuery check page is fully loaded or not | $(document).ready() vs $(window).load()