It may be winter but that does not tame the golf bug. I love golf and I love improving. With spring right around the corner, I wanted to create an application that will help me improve. Step in myRound. myRound is a golf round stat tracker. What makes myRound different is that it will show you where you hit the green and fairway for your round with out any gps and a slick interface. For each hole when you enter your score you just click on each image where your approach shot landed and it will store it and show all your shots locations at the end of the round. To get this to work is easier than you think. Check it out!
First you start by adding a simple eventlistner() to your image. Once the user clicks I need to do a few of things.
- I need to find out where the click happened
- Where the image is on the page
- Where that click happen on the image
- Place a dot in the correct place on the image.
To find out where the click happen is pretty simple. All I have to do is take the event and find the pageX and pageY.
To find out where the image is, I need to find a way to compare its location to its eldest parent element. I can do this by calling a for loop. Once I get to the eldest parent element, I can then find the offset from the top and left. This will give us and x and y point I can use to reference where the image is.
I needed a way to save where the user clicked on the actual image not just the window. If I just used the event coordinates I got from step one everything would be messed up once the user scrolled or if my page is dynamic. If I knew exactly where on the image the click happen I could reverse engineer the above to put the dot back on the image on the summary page. To do this, I just simply took the x coordinate from the event and subtracted the image position. For example: If the image was position at x = 100px and the click happened at x=150px. 150 -100 = 50. This tells me that the click happen on x=50px of the actual image. Now I can store this value to use later when I place all the dots from every hole on one image.
In order to place the dot in the correct place I needed to do a couple of things. I need to create a dot through CSS. I also needed to do everything I did from above in reverse. I have where on the image the user clicked. Now I need to find out where the image is on my summary page. Then all I have to do is add the coordinates from the image location and the coordinate from the location on the actual image that I have stored. For example: If the image was located at x=200px and the click happened on x=50px of the actual image. 200 + 50 = 250 That means if I place the dot at x=250px then the dot would be on the same location as the click happened before. Now all I have to do is call a loop for all my dots and create a new div with my dots css class and style the top and left to be the coordinates I need. This will put dots in all the locations that user entered before.
See that was not too bad. There is no advance javascript needed. All we had to do was think a little abstract and do things in a specific order. This feature makes my web app interface much better. I am sure you can think of ways to use this as well!
Top comments (0)