What's the best way to create an onclick event for a li element that includes a pseudo-element ::before

I have successfully created a Timeline using HTML and CSS elements. The visual result is as follows:

My goal is to enable users to click on the second circle, triggering a color change in the line that connects the first and second circles. This color transition simulates a progress bar effect, enhancing the realism of the timeline.

The challenge lies in detecting clicks on these circles, which were generated using the pseudo-element ::before.

Here is the code snippet I am working with:

ul {
  align-content: center;
  align-items: center;
  display: flex;
  justify-content: space-around;
  margin-top: 40px;
}

li {
  background: #DBAC78;
  color: white;
  content: ' ';
  display: flex;
  flex-grow: 1;
  height: .3em;
  line-height: 1em;
  margin: 0;
  position: relative;
  text-align: right;
  z-index: -1;
  cursor: pointer;
}

<div class="container" id="containerTimeLine">
  <ul class="bigger highlight-active">
    <li onclick="PlayAudios();"></li> 
    <li class="video"></li>
    <li class="question"></li>
    <li class="question"></li>
    <li class="question"></li>
    <li class="question"></li>
    <li></li>
  </ul>
</div>

Any suggestions on how I can detect user clicks on the circles and implement a JavaScript / jQuery function to alter the color of the connecting line gradually like a progress bar?

javascriptjqueryhtmlcss

Answer №1

ul {
  align-content: center;
  align-items: center;
  /* counter-reset: stepCount;*/
  display: flex;
  justify-content: space-around;
  margin-top: 40px;
  /* for codepen */
}

li {
  background: #DBAC78; 
  color: white;
  content: ' ';
  display: flex;
  flex-grow: 1;
  height: .3em;
  line-height: 1em;
  margin: 0;
  position: relative;
  text-align: right;
  z-index: -1;
  cursor: pointer;
}

li::before {
  color: white;
  background: #DBAC78;
  border-radius: 50%;
  /*counter-increment: stepCount;*/
  content: '';
  height: 2em;
  left: -2em;
  line-height: 2em;
  position: absolute;
  text-align: center;
  top: -.85em;
  width: 2em;
}

li.video::before {
  color: #3A1101;
  background: #DBAC78;
  border-radius: 50%;
  content: '\f04b';
  height: 2em;
  left: -2em;
  line-height: 2em;
  position: absolute;
  text-align: center;
  top: -.85em;
  width: 2em;
  font-family: FontAwesome !important;
  vertical-align: top;
  font-weight: 700;
}

li.question::before {
  color: #3A1101;
  background: #DBAC78;
  }

li.active {
  background-color: #DBAC78;
}

li.active~li {
  background-color: #DBAC78;
}

li.active~li::before {
  background-color: #DBAC78;
}

li.video {
  background-color: #DBAC78;
}

li.video~li {
  background-color: #DBAC78;
}

li.video~li::before {
  background-color: #DBAC78;
}

li.question {
  background-color: #DBAC78;
}

li.question~li {
  background-color: #DBAC78;
}

li.question~li::before {
  background-color: #DBAC78;
}

 li:last-child {
  flex-basis: 0;
  flex-grow: 0;
  flex-shrink: 1;

}

ul.bigger {
  font-size: 1.2em;
}

ul.highlight-active li.active::before {
  font-size: 1.6em;
  background: #DBAC78;
}

ul.highlight-active li.video::before {
  font-size: 2em;
  background: #DBAC78;
}

ul.highlight-active li.question::before {
  font-size: 1.3em;
  background: #DBAC78;
}

ul.roman li::before {
  content: counter(stepCount, upper-roman);
}

ul.triangle li::before {
  width: 0;
  height: 0;
  border-radius: 0;
  border-left: 1em solid white;
  border-right: 1em solid white;
  border-bottom: .8em solid #DBAC78;
  content: '';
  top: -.65em;
}

ul.triangle li:first-child::before {
  left: 0;
}

ul.triangle li.active~li::before {
  border-bottom-color: #DBAC78;
}

ul.triangle li.video~li::before {
  border-bottom-color: #DBAC78;
}

ul.triangle li.question~li::before {
  border-bottom-color: #DBAC78;
}

#containerTimeLine {
  width: 80%;
  margin-left: 120px;
  ;
  margin-right: 0;
  padding-right: 40px;
  padding-top: 30px !important;
}
<div class="container" id="containerTimeLine">

  <ul class="bigger highlight-active">
    <li onclick="PlayAudios();"></li>
    
    <li class="video"></li>
    <li class="question"></li>
    <li class="question"></li>
    <li class="question"></li>
    <li class="question"></li>
    <li></li>
  </ul>

</div>

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

Facing difficulties in Angular 8 while trying to import firestore and firebase for an authentication system

While attempting to implement Firestore/Firebase functionalities for Google OAuth signin, I encountered an error indicating that Firebase is not imported: https://i.sstatic.net/oL4rY.png CODE: ERROR in node_modules/@angular/fire/auth/auth.d.ts:4:28 - er ...

javascriptangularfirebasegoogle-cloud-firestore

You cannot make a hook call within the body of a function component, unless you are using useNavigate and useEffect in conjunction with axios interceptors

Currently, I am delving into React and attempting to include a Bearer token for private API calls. My approach involves writing a private axios function to intercept requests and responses. Subsequently, I invoke it in my API.js file to fetch data from the ...

javascriptreactjsreact-hooksaxios

Adjusted the background scale transformation without impacting the content inside the div

My concern revolves around the transform: scale property. I am trying to achieve a gradual zoom effect on my background when hovered over, without affecting the text content. I have omitted browser prefixes for brevity. Below is the CSS code: #cont-nl { ...

htmlcss

Unable to transmit Props to Component - Fluctuating Behavior

I developed a React.js and Next.js application where I needed to pass the User object to all pages. My plan was to then pass this User component to the Head component in order to display different navigation options based on the user's role. Here is w ...

javascriptreactjsreact-routernext.js

Tips for ensuring v-tabs-items and v-tab-item fill height

I found an example that I am trying to follow at the following link: https://vuetifyjs.com/en/components/tabs#content <v-tabs-items v-model="model"> <v-tab-item v-for="i in 3" :key="i" :value="`tab-${i}`" > < ...

cssvue.jsvuetify.js

How to detect the Back Button or Forward Button events in a single-page application

Currently, I am developing a single-page application that utilizes ASP.NET MVC, Backbone.js, and JQuery. My task involves capturing the browser's back and forward button events for breadcrumb implementation. I previously attempted to use the hashchan ...

javascriptjqueryasp.netajaxbackbone.js

Guide on capturing JSON objects when the server and client are both running on the same system

I created an HTML page with a form that triggers JavaScript when submitted using the following event handler: onClick = operation(this.form) The JavaScript code is: function operation(x) { //url:"C:\Users\jhamb\Desktop\assignmen ...

javascriptjqueryhtmlajaxjson

How can I execute a task following a callback function in node.js?

Is there a way to run console.log only after the callback function has finished executing? var convertFile = require('convert-file'); var source, options; source = 'Document.pdf'; options = '-f pdf -t txt -o ./Text.txt'; ca ...

javascriptnode.jscallback

What sets $emit and $dispatch apart in Vue.js?

Vue 2.0 has deprecated the use of $dispatch and $broadcast. I have noticed that $dispatch is similar to $emit. What are the key differences between them? Can we safely replace $dispatch with $emit during migration? ...

javascripteventsmvvmvue.jsvuejs2

Using object bracket notation in TypeScript to retrieve values from props with the help of string interpolation

I encountered an issue in my code while attempting to utilize a variable within my TSX component. This problem arises due to the dynamic props being passed into the component, which are always a string that matches one of four keys in the "characters" obje ...

javascriptreactjstypescriptnext.js

Tips for changing array items into an object using JavaScript

I am working with a list of arrays. let arr = ["one","two"] This is the code I am currently using: arr.map(item=>{ item }) I am trying to transform the array into an array of sub-arrays [ { "one": [{ ...

javascriptarraysreactjsobjectfunctional-programming

Error: It is not possible to access the 'map' property of an undefined value 0.1

I'm currently experimenting with React.js and I encountered an error that's giving me trouble. I can't seem to pinpoint the root cause of this issue. Shout out to everyone helping out with errors: TypeError: Cannot read property 'map ...

javascriptreactjs

Creating dynamic HTML table rows with data from a JSON object

Query: In search of a Jquery or JavaScript solution for generating dynamic table rows with colspan using the JSON structure provided below. I am encountering difficulties in creating the necessary rows and have attempted several approaches without success ...

javascriptjqueryhtmljson

Use CSS3 and jQuery.validate to highlight mandatory fields in red

I've been attempting to change the color of required fields in a form to red, but so far I haven't had any success. Here is the form code and the CSS that I have experimented with. contact.html <h2>Send us an ...

csshtml

Prevent Text Overflow in CSS, Material-UI, and React styling efforts

I am facing an issue where the cardTitle is overlapping the Card when the text is too long. Currently, I am manually setting a static maxWidth, but I would prefer for it to adjust based on the size of the Card. Is there a way to achieve this dynamically? ...

cssreactjsmaterial-ui

Is it Appropriate for Custom React Hooks to Trigger Re-Render of Related Components?

I have just developed a custom hook that internally uses useState and useEffect. After importing this hook into another React function component called ComponentA, I noticed that ComponentA re-renders every time the state within the custom hook changes. ...

javascriptreactjsreact-hooks

Combining various arbitrary values, like :has in Tailwind, can be achieved by following these steps

I'm facing an issue where I need to hide an element if it has children. In regular CSS, this is achieved with the following code: &:not(:has(*)){ display: none } However, when trying to implement this in Tailwind, I'm struggling to figure ...

cssreactjstailwind-css

Communication between Python and the front-end

I am currently working on a web application that utilizes jQuery for ajax requests to communicate with PHP, which in turn interacts with a MySQL database. I now have the need to implement some machine learning functionalities using Python, specifically for ...

phpjquerypython-3.xajax

Maintaining a reference to an element while binding event handlers in a prototype

Is there a way to utilize a bound event handler in prototype while maintaining the "this" context? It seems that doing so disrupts the default binding provided by prototype for event handlers. According to the documentation: The handler's context ...

javascripteventsprototypejs

React Native - Scaling images dynamically

I have a responsive photo grid built within a mobile app. I want to display three images across the screen with equal spacing between them. All the images are squares. Unfortunately, using percentages for each image's width and height is not possible ...

cssreactjsreact-nativeflexbox