-1

Before reading on, my issue is to know what are the optimal methods to find an objects height/width/position as there seems to be some conflict about this. After that I'll need help with how to use the previously obtained data to do number 4 in the following list. And after that I'll need help with number 5. I was hoping to do this gradually so please bear with me.

I found code for how to divide a square into two equal triangular clickable areas (Two triangular clickable area within a square). I didn't really understand much of what the code was doing to be honest. My question was about subdividing the rectangle that represents the visible screen area into four clickable areas, imagine its diagonals are drawn. I did find this very useful (pseudo)-pseudocode :

  1. Create a div and style it to be a square. Use a background image to illustrate the triangles

  2. Create a variable, square, in javascript to hold the square element

  3. Get the position, height, and width of square in your js

  4. Do some math to determine the coordinates of each triangle's vertices

  5. Write a function, getQuadrant(), that determines which triangle any given point within the square is in

  6. Add an event listener to click events on the square. The event listener should call the getQuadrant function

  7. Use a switch/case to execute whatever code you need to call conditional upon which quadrant the click lands in

I'm not going to ask for the full code right away, I'd like to learn in the process. Could someone please help in just pointing me towards which methods to use for numbers 3 and 4? And I'll most probably need help with number 5 as well.

Thanks a for the help! =)

K

Community
  • 1
  • 1
Kizer Yakuza
  • 747
  • 2
  • 8
  • 13
  • _Create a variable, square, in javascript to hold the square element_. Surely you can just google this? – Evan Davis Apr 03 '13 at 13:58
  • @Mathletics my issue is not with that, you picked the thing I didn't need help with. And yes I can google but the problem is you then find lots of possible answers, some methods are then often recommended instead of the ones given in the first answers, updates in libraries change the methods used for specific things over time, some browsers aren't up to date on all code updates.. etc. like here http://stackoverflow.com/questions/294250/how-do-i-retrieve-an-html-elements-actual-width-and-height# – Kizer Yakuza Apr 03 '13 at 14:02
  • the link in your question should work for you, just replace hover with click function – razz Apr 03 '13 at 14:02
  • @TedHopp thanks for the edit, I'm sorry if my formatting came out wrong. I pasted a chunk of text that was put into code format, my bad! – Kizer Yakuza Apr 03 '13 at 14:04

1 Answers1

1

If you translate everything so that the center of the square is the origin, then the borders of the triangle are defined by the lines x == y and x == -y. You can base your quadrant classification on that relationship:

  1. If x > Math.abs(y), then you are in the right triangle
  2. If y > Math.abs(x), then you are in the top triangle
  3. If -x > Math.abs(y), then you are in the left triangle
  4. If -y > Math.abs(x), then you are in the bottom triangle

Ties can be resolved arbitrarily between the two (or four, if x == y == 0) closest triangles.

Ted Hopp
  • 232,168
  • 48
  • 399
  • 521
  • guys im sorry but I'm am a real noob. Just like everyone else has been at one point in their life. As mentioned the code I've come across I dont understand and I don't want to just blindly copy paste it. And most of the anwers I get are to me just more gibberish, no offense to the helpers like Ted Hopp in this case, who actually read more than the first line of my question. Btw, the pseudo code pasted above is not my assignment, its taken from an answer from this website. I was just curious as to how to change it into code in a way I understood. – Kizer Yakuza Apr 03 '13 at 14:20
  • thanks for the input, I'll apply it as soon as I get that far! I'm still struggling with anything that is outside the comfort zone of basic code and the manipulations thereof. I'll let you know how it goes. – Kizer Yakuza Apr 03 '13 at 14:32