0

I have a spinning wheel that rotates and lands on a prize. The problem is, next to that wheel is a red arrow pointing at the winning prize, and that red arrow moves around a bit depending on the size and orientation of the screen because it's a responsive app.

I thought a good solution would be to overlay a still image of an arrow on top of the rotating one. I would imagine that would ensure the arrow is always pointing to the correct prize.

If I were to put the html code for that image directly next to the code for the rotating image, I know it would place it next to/under each other. How can I overlay two images in the same position?

Here is the page in question if that helps at all.

https://friendlyroots.com/pages/prize-wheel

Thank you very much for any direction on how I can learn or do this.

1 Answers1

0

This is difficult to diagnose since you need a code to spin the wheel. I can think of a few possible answers, but based on what I can see...

Looks like you're using flexbox and some JS to spin the wheel, which means you're comfortable with both. Your wheel and polygon are within a container.

To do what you're asking, set the proper parent element to position:relative, add another polygon in an Absolute position, and set the "real polygon" to being "invisible". There are a few ways you could do this.

1) display:none Use javascript to set polygon to display:none and replace it with your correct-facing arrow when the prize appears. If how to do this is unclear, look for how to change classes with JS OR how to change CSS styles with JS. Also look for how to insert a child element into JS. (You'll have to target the parent element -#chart-container)

2) visibility:hidden Use javascript to set polygon to visibility:hidden and replace it with your correct-facing arrow when the prize appears.

Doing either of these could be noticeable by the user though, since you're removing & replacing the Polygon. Also setting the correct parent element to the relative position will determine the initial bounds of your absolute arrow.

Jackie James
  • 41
  • 4
  • Thank you for the ideas. I'm actually not familiar with flexbox, I had the app developed by someone else. I have experience with C# and Unity, but have almost no knowledge of web design besides some basic HTML. I can read javascript but I can't code in it. I'm trying to learn what I can since I want to add a lot of functionality to it. –  Feb 01 '20 at 14:27
  • But I will do my best to figure it out based on your description. I appreciate the advice. –  Feb 01 '20 at 14:27
  • Ah ok. That's cool. Good on you for trying to fix it anyway! As an additional FYI, `display:none` removes the entire element from your page design, but it's still there in your code for when you need to "put it back" into the design. `visibility:hidden` only makes the element invisible, but it's still there occupying the space. HTML will stack elements one on top of/beside the other from top left to bottom right, so these two options will change how the page looks/acts for the user. Good luck! – Jackie James Feb 01 '20 at 16:39