Show Buttons
Share On Facebook
Share On Twitter
Share On Google Plus
Share On Linkdin
Share On Reddit
Share On Stumbleupon
Contact us
Hide Buttons

Event coordinates and element dimentions on a page

Often times you will find your­self in a sit­u­a­tion where you need to get the width and height of an ele­ment or the coor­di­nates of a mouse click or mouse move. There­fore, I cre­ated a very sim­ple illus­tra­tion to help you eas­ily deter­mine what prop­erty you need to get for your needs.

Event coor­di­nates

Dia­gram show­ing the prop­er­ties rel­a­tive to the mouse event.

event coordinates


Ele­ment coordinates

Dia­gram show­ing the prop­er­ties of a ele­ment with respect to its par­ent. The one with the green out­line is the par­ent and the one with the red out­line is the child. In this case, the child is larger than the par­ent and over­flows out of it in both x and y direc­tions.
There are sev­eral more but most of the time, the ones you see here will be sufficient.

element dimentions


Ryan Sukale

Ryan is just a regular guy next door trying to manage his life and finances.