Z-index issue? Can I overlay a .png on top of a processing graphic in IE and FireFox for PC?

Move this topic

Forum :

Sub forum :

General Discussion Other

fgdesign

Z-index issue? Can I overlay a .png on top of a processing graphic in IE and FireFox for PC?

in General Discussion • Other • 2 years ago

Hello all:

Just started to use Processing and have sold an idea to a client for this logo:

http://fredgatesdesign.com/21stCenturyMusic/logo/newstack2.html

Works great in Safari, Firefox for Mac etc... but the square will not go to the back of a two-object stack in IE or Firefox for PC. I have tried everything including <iframe>, but with no luck. Is there a good place to indicate the z-index for the javascript or do something else for PCs?

Thanks in advance for your help.

-Fred

Replies(3)

PhiLho

Re: Z-index issue? Can I overlay a .png on top of a processing graphic in IE and FireFox for PC?

2 years ago

Using Java for a logo is a bit heavy, and might not appear on some people having deactivated Java, but why not.
Nice idea at least.

There was always a conflict of overlaying active content provided by a plugin (Flash, Java, Adobe SVG plugin it its time...) and HTML content. I don't know if it can be solved...

Re: Z-index issue? Can I overlay a .png on top of a processing graphic in IE and FireFox for PC?

2 years ago

Using canvas and processing.js might work:

http://processingjs.org/reference/articles/p5QuickStart

(this is what they have done in the header by the looks of it), I can sandwich a non-moving version (which we use for print anyway) for browsers that don't support canvas.

Am I missing something?

Thanks for the reply!

-Fred

Re: Z-index issue? Can I overlay a .png on top of a processing graphic in IE and FireFox for PC?

2 years ago

OK, have tried to implement this and it isn't working, or at least the animation isnt:

http://fredgatesdesign.com/21stCenturyMusic/logo/newstack.html

As you can see, it does draw the 400 x 400px black box, but none of the circles.

I even cannibalized their example page replacing my logo.pde file:

http://fredgatesdesign.com/21stCenturyMusic/logo/example.html

with the same result. my PDE file looks like this:

float r;

float g;

float b;

float a;

float diam;

float x;

float y;

void setup() {

size(400,400);

background(0);

smooth();

}

void draw() {

r = random(200);

g = random(100);

b = random(300);

a = random(150);

diam = random(200);

x = random(width);

y = random(height);

delay(200);

noStroke();

fill(r,g,b,a);

ellipse(x,y,diam,diam);

}

Works great in Processing and as Java export, but maybe there is something else I need to have it work with processing.js?

Thanks,

Fred

Statistics

3 Replies
742 Views
0 Followers

Actions

Permalink

Can I Broadcast/Share My App as a (...
How to create side by side stereosc...
Arduino and Processing can't ta...
Exporting animated 3d objects
Image segmentation problem

Z-index issue? Can I overlay a .png on top of a processing graphic in IE and FireFox for PC?

Replies(3)

Re: Z-index issue? Can I overlay a .png on top of a processing graphic in IE and FireFox for PC?

Re: Z-index issue? Can I overlay a .png on top of a processing graphic in IE and FireFox for PC?

Re: Z-index issue? Can I overlay a .png on top of a processing graphic in IE and FireFox for PC?

Statistics

Tags

Actions

Related Posts