Security

Reply
Occasional Contributor I

js script in background canvas

Hello,

 

i am trying to get a java script animation running in the background of a guest registration page. The problem i got now, is that this animation (which is running in a canvas) is running in the foreground, so i can't use the text boxes and buttons on the registration form...

 

Is there any way to 'send' this canvas in the background? I am using Galleria Skin. The following code is placed in Gallerias 'Background and Image Settings':

 

{literal}
<style>
canvas {
  position: absolute;
  top:0;
  left:0;
}
</style>

<div id="particles-js">
  
<canvas class="particles-js-canvas-el" style="width: 100%; height: 100%">

<script src="public/js/particles.js"></script>
<script src="public/js/app.js"></script>

</canvas></div>

{/literal}

Does someone have an idea how to get the login form into the foreground? :)

 

Thank you,

Niko

As a german native speaker, english is not my mother tongue. Please excuse any mistakes :)
Occasional Contributor I

Re: js script in background canvas

is nobody having any idea? :(

 

 

As a german native speaker, english is not my mother tongue. Please excuse any mistakes :)
Aruba Employee

Re: js script in background canvas

I'm fairly certain canvas does not have a concept of z-index?

 

Have you tried placing the CSS in the HEADER of Galleria?

 

And as a sanity test, try using a "Custom Skin 1" with mode set to Blank, so you don't also have any interference with the Galleria scripting/styling?

 

Check out this codepen for a reference:

https://codepen.io/creotip/pen/jEWGQM

 

Occasional Contributor I

Re: js script in background canvas


hdehal wrote:

I'm fairly certain canvas does not have a concept of z-index?

 


Me too. But if i use "position: absolute;", doesnt this work in like a z-index?

 


hdehal wrote:
Have you tried placing the CSS in the HEADER of Galleria?

 


Yes, i have... Same result.

 


hdehal wrote:
And as a sanity test, try using a "Custom Skin 1" with mode set to Blank, so you don't also have any interference with the Galleria scripting/styling?

 


Did not work either...

 


hdehal wrote:
Check out this codepen for a reference:

https://codepen.io/creotip/pen/jEWGQM

 


Thanks for this code. I think this works because the "position: absolute;" tag is set to h1. So The Header is in the front layer. If you remove the tag and put it on the canvas style sheet, you have the same problem:

/* remove canvas default margin */
canvas{
	display:block;
	vertical-align:bottom;
  position: absolute;
  top:0;
  left:0;
}

#particles-js{
	width:100%;
	height:100%;
}

h1{
font-size: 7rem;
/*position: absolute;*
top: 35%;
left: 35%;
color: #FFF;
font-family: teko;
font-weight: 400;
text-shadow: 5px 5px #5F6D72;
text-transform: uppercase;
}

But without the absolut tag set in the login form, the animation just works in the header, and does not cover the whole background:

Capture.JPG

 

 

 

As a german native speaker, english is not my mother tongue. Please excuse any mistakes :)
Search Airheads
cancel
Showing results for 
Search instead for 
Did you mean: