parallax.js and animate.css -> onClick doesn't work [closed]

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.

Closed 8 years ago.

Improve this question

I'm using parallax.js and animate.css for a project. I want to click on one red circle to fire a function, but the click event isn't working on them (or anything inside the <ul> layer).

I have tried so many things now and nothing has worked. The only thing to get it working is when I delete the height attributes of the #scene <ul> but then it doesn't look right.

EDIT : The circles should hide when I click on them. It's like a layer would lay over them but there is nothing.

Answer 1

There is nothing wrong with your Javascript here

The problem is that your <li> elements are masking your red circles. Visually you can see them, but if you right-click and Inspect Element on one of your circles it will show your last <li> item. You can also check that your animations are working by writing in your console:

$('.c1').click()

You can usually fix this playing with their z-indices. I.e. Change the z-index of your circles to be higher and set the values of z-index on your other elements to be lower.

However, the issue seems to be that you have a each circle in a new <li> element. I was able to fix this on your site by having the following:

<div class="circle c1 animated"></div>
<div class="circle c2 animated"></div>
<div class="circle c3 animated"></div>
<div class="square s1"></div>
<div class="square s2"></div>
<div class="square s3"></div>

In one <li> element instead of having them in separate ones.