Help with webpage (putting image layer over a rotating canvas)
#1 15-09-2014 
Hi there. I have a question and I'm hoping someone can help me to fix something on my webpage. It involves placing a semi-transparent PNG file over a rotating canvas item. Here's the webpage in question:
( http://az261.x10.mx/TESTING/1975-Wheel1/...-back.html )

My webpage involves a rotating prize wheel, where if you click the "Spin" button once, the prize wheel will rotate at a random amount of times and come to a stop. There is a "base" to the prize wheel that contains arrow pointers to show where the prize is landed on. The image is static, so the pointers don't move. The image does contain a transparent hole in the middle.

Then there's the "wheel" portion that's currently placed over the "base" image. The wheel is a square image with transparency over the round portions. This part is dynamic, in that it rotates and stops. I'd like to know how to make the "base" image go over the "wheel" image, if it's possible.

This webpage of mine was based off another website by dougTesting.net, seen here: ( http://www.dougtesting.net/winwheel ). Credit for the inspiration goes to them. And the wheel is from deviantart.com from a user named WheelGenius ( http://wheelgenius.deviantart.com )
d_dgjdhh, proud to be a member of LeeFish since Apr 2013.

0
#2 16-09-2014 
I had a look and downloaded the page; I think its because the design of the page is tabular. If it was div based you might be able to use relative positioning and z-index. I am not 100% sure as it is a canvas element.


http://www.ibm.com/developerworks/librar...5layering/

0
#3 16-09-2014 
Thanks for the link, leefish. I'll be looking into that. Maybe I'll change the setup of the webpage from tables to div based setup.

EDIT: Good news, got the prize wheel to work under the base. However, it's not centered.

http://az261.x10.mx/TESTING/1975-Wheel1/newwheel.html

Will continue reading those articles to see how to do it.
(This post was last modified: 16-09-2014 10:11 PM by d_dgjdhh.)

0
#4 17-09-2014 
Good news again. Was able to get the canvas centered...as an iframe object:
http://az261.x10.mx/1975Oct-Wheel3/1975Oct-Wheel3a.html

Now able to place it in a table and add things around it if necessary.

0
#5 17-09-2014 
Looking great Smile

0
#6 18-09-2014 
Thanks. I was worried about if the coding was all right, or if it was just lazy coding. If the latter, what would you suggest to improve on it?

0
#7 18-09-2014 
You might want to fix the doctype = <!DOCTYPE html>

Smile

0
#8 19-09-2014 
Thanks for the recommendation. I was able to fix the pages, except for the wheel canvases. I'm using the W3C Validator, and I think the canvas pages aren't able to be validated properly. What's the issue if a webpage is not validated?

Here's the current list of prize wheels. Basically, all these pages are valid according to the W3C School, but the canvas pages aren't. Here's an example of a canvas page that isn't valid. I was using the "HTML-Tidy" program here, and it pretty much cut out the code for the wheel portion. So...I'm not sure if there's a better way on implementing the wheel.

EDIT: Also, does the wheel spin too fast on the slow mode? I tried out this prize wheel on a Mac computer at an Apple store near me, and it seems to just spiral too quickly on the fast setting. I was wondering if a canvas can regulate the speed of an animation to set a max frame rate or something.
(This post was last modified: 20-09-2014 02:59 AM by d_dgjdhh.)

0
#9 20-09-2014 
The issue you may have with an unvalidated webpage is that some browsers may not display it properly. Please be aware that HTML5 is not actually OFFICIAL (though many sites are using it) and here is a list of features that you can safely use : http://html5please.com

The canvas element may not be supported in an automated tool. What you may also need is the HTML5 shim(v) https://code.google.com/p/html5shim/

Animation speed is one of those things that are impacted depending on which browser you use. Sad

0


Sorry, that is a members only option