Issue with onClick in parallax.js and animate.css libraries

In my current project, I am utilizing both parallax.js and animate.css. My goal is to click on a specific red circle in order to trigger a function. However, I am encountering an issue where the click event does not seem to be working on any elements within the <ul> layer.

I have experimented with various solutions but haven't been able to resolve the issue. The only workaround I found was to remove the height attributes from the #scene <ul>, although this causes the layout to look incorrect.

EDIT : When clicking on the circles, they should disappear as if a layer is being positioned over them, but visually nothing seems to change.

javascriptjqueryhtmlcssparallax.js

Answer №1

Your Javascript is perfectly fine

The issue lies in how your <li> elements are covering up your red circles on the page. Even though they are visible, when you inspect them, they show up as the last <li> item. To test if your animations are working correctly, try running this command in your console:

$('.c1').click()

To resolve this problem, try adjusting the z-indexes of your elements. Increase the z-index for your circles and decrease it for the other elements.

It appears that having each circle within a separate <li> element is causing the issue. I managed to fix this issue on your website by consolidating them in one <li> element like this:

<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>

This will help eliminate the masking issue caused by individual <li> elements.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to initiate a slideshow using an external .js file?

Having an issue with my slideshow. When I put the CSS and JavaScript code in the same page, it kind of "works" but quickly goes transparent, which is not ideal for me. I prefer keeping things organized with separate files - one for each. However, when I mo ...

javascriptjqueryhtmlcss

Troubleshooting Angularjs: Why isn't the HTML displaying the variable value?

Trying to display the value of an AngularJS variable in HTML using this code: <div ng-controller="MyTextbox"> <p>Last update date: {{nodeID1}} </p> Here's my angularjs controller code: angular.module("umbraco").controller("MyTex ...

javascripthtmlangularjsumbraco

Retrieve an array field across various documents and combine the elements to form a single object

Consider a scenario where there is a users collection. Each user document includes an array of posts called posts. The goal is to query this collection as follows: Retrieve 2 posts, starting at index Nstart and ending at index Nend, from each user in the ...

javascriptmongodbaggregation-framework

Is it secure to send the one-time authorization code for Google+ Hybrid server-side flow over HTTP?

Hello, I have decided to transition from using Google's Client-side flow to the Hybrid server-side flow. Previously, I would send the client an access_token and then transfer it to the server to verify the user before logging them in or creating a new ...

javascriptphpajaxcurlgoogle-plus

axios.get consistently delivers a Promise of type <Pending>

I have been searching for a solution to my issue, but so far none of the suggestions have worked for me. Below is the code that I am struggling with: const Element = () => { async function getEndData() { const data = (await getEnd()) ...

javascripttypescriptaxios

What could be causing my webpage to freeze every time a filter button is selected?

Tasked with developing a webpage similar to Pinterest by utilizing data from a JSON response. Each JSON object contains a service_name key, which can be manual, twitter, or instagram. I made an effort to implement three filter buttons to only display the r ...

javascriptjqueryhtmlcssjson

The functionality of the Google Analytics pageTracker function is hindered when it is loaded through AJAX requests

After previously discussing this issue, I have conducted further research and attempted to resolve the problem, but unfortunately, a solution still eludes me... My website (www.seatgeek.com) incorporates numerous links that are loaded via AJAX. Whenever a ...

javascriptajaxgoogle-analytics

Sending data from HTML and JavaScript to Python

In the process of developing a website that will operate on an embedded device, I am implementing an interface for users to engage with multiple functions on the site. These functions within the HTML interface will communicate with a Python script, which i ...

javascriptpythonhtmlvariables

Sending parameters to a personalized Angular directive

I am currently facing a challenge in creating an Angular directive as I am unable to pass the necessary parameters for displaying it. The directive code looks like this: (function () { "use strict"; angular.module("customDirectives", []) .directive ...

javascriptangularjsangularjs-directive

Using Vue with Nuxt and Axios for cross-domain POST requests with a proxy

I've been attempting to perform a cross-domain POST request using nuxt and axios this.$axios.$post('https://hooks.zapier.com/hooks/catch/111111/xxxxx/', { name: 'Jose', }) Encountering CORS blocking, I decided to try using nuxt/p ...

javascriptvue.jsaxios

Increasing the font size by 1px for each element within a specified parent element

Is there a method to automatically increase the font size of all elements within the .wrap container by 1px, without having to adjust each one individually? .wrap{ margin-top: 169px; .element1{ font-size:31px; } .element2{ ...

csssassfont-size

Resetting an object back to its initial value while preserving its bindings in AngularJS

My service deals with a complex object retrieved from an API, like this: { name: "Foo", addr: { street: "123 Acacia Ave", zip: "10010" } } The initial value is stored in myService.address, and another variable holds a copy of ...

javascriptangularjsdata-binding

Gradually reveal each individual path of the SVG, one by one

I am faced with an SVG containing numerous paths like the following: <svg version="1.1" id="svg2" inkscape:version="0.91 r13725" sodipodi:docname="drawing.svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://w ...

jquerycsssvgsvg-animate

Ways to retrieve the starting position of a span element and then append a value to a hidden field

Link to the Fiddle example: http://jsfiddle.net/socc95bd/1/ JQuery code snippet: var offsets = $('#ss').offset(); var left = offsets.left; $("#hfYN").val(left); alert(left); $(".switch input").on("click", function () { var offsets = $(&apo ...

javascriptjqueryhtmlasp.net

Concealing information beneath a veil of darkness

I'm looking to implement a solution using JS/CSS/HTML5 to hide content within a div container with a shadow effect. The end result should resemble the example image I've provided. Additionally, I'd like the ability to customize the color of ...

javascriptjqueryhtmlcss

Expand the image within the iron-image component

Within a div, I have an element: <div style="width:330px;"><iron-image src="image.png"></iron-image></div>. The image is 315px wide and 237px tall. I want the image to expand to 330px in width to fit its container without breaking t ...

htmlcssimagepolymerpolymer-1.0

Using React to implement MUI autocomplete feature alongside a MUI form

Recently, I have been utilizing a MUI form structured in the following manner: <Box component="form" onSubmit={event => { return handleSubmit(event); }} noValidate sx={{mt: 1}}> <TextField margin="normal" ...

javascriptreactjstypescriptreact-hooksmaterial-ui

Conceal content in Bootstrap navbar when clicking on #link

I am facing an issue with the navbar-fixed-top element as it is causing content to be hidden from the container. To resolve this common problem, you can add the following CSS code: body { padding-top: 70px; } After applying the above code, the container ...

htmlcssbootstrap-4navbar

Update your mappings for the city of Istanbul when utilizing both TypeScript and Babel

Currently, I am facing the challenge of generating code coverage for my TypeScript project using remap Istanbul. The issue arises due to the usage of async/await in my code, which TypeScript cannot transpile into ES5 directly. To circumvent this limitation ...

javascripttypescriptbabeljsremap-istanbul

What is the best method for animating a display table to none or reducing its height to

My goal is to animate a header whenever the class collapseTest is applied. After some trial and error, I have come up with the following solution: http://jsfiddle.net/robertrozas/atuyLtL0/1/. A big shoutout to @Hackerman for helping me get it to work. The ...

javascriptcssanimation