Is there a way to attach numerical values to CSS in order to generate a timeline effect?

My goal is to arrange div elements on a timeline based on an array of floats ranging from 0 to 1. The idea is to have the elements positioned along the timeline according to these float values, with 0 representing the beginning and 1 indicating the end.

 let events = [0, 0.25, 0.5, 1]

I am working with AngularCLI and thinking that using *NgFor to iterate through my list might be a good approach. However, placing CSS elements in the correct proportions using the values in my array seems to be a challenge.

Here's a visual representation of what I am aiming for:

htmlcssangular

Answer №1

If you're looking to get started, consider using a setup like this (check out the demonstration on Stackblitz):

template

<div #containerDiv class="container">
    <hr>
    <div *ngFor="let pos of [0,0.25,0.5,1]" 
        [ngStyle]="{'left.px': _getStyle(containerDiv,pos)}" 
        class="black-ball-container">
        <div>{{pos}}</div>
        <div class="black-ball">
        </div>
    </div>
</div>

typescript

_getStyle($div: HTMLDivElement, pos: number) {
  const rect: DOMRect | ClientRect = $div.getBoundingClientRect();

  return `${pos * rect.width}`;
}

scss

$height: 10px;

.container {
  position: relative;
  display: flex;
  align-items: flex-end;

  max-width: 100%;

  hr {
    position: absolute;
    left: 0;
    bottom: $height/4;
    margin: 0;
    margin-bottom: $height/2;
    border: 1px solid;

    width: 100%;
  }

  .black-ball-container {
    position: absolute;

    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .black-ball {
    height: $height;
    width: $height;
    background-color: black;
    border-radius: $height;
    border: 3px solid white;
  }
}

Additionally, there has been an update with improvements available on Stackblitz

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

Angular does not receive events from Socket.io

Recently I started coding with AngularJS and decided to build a real-time app using Socket.io: The service I'm using shows that the connection is fine on the console. Here's a picture of the Console.log output However, when I attempt to emit c ...

node.jsangularsocketssocket.io

Determining the location of an input field in Angular

I am currently utilizing Angular for my project. Within the framework, I have a primary component called name.component.ts/html. By utilizing this base component, I have created four additional components - first-name.component.ts/html, last-name, middle-n ...

angular

extract keys and values from an array of objects

I would like assistance with removing any objects where the inspectionScheduleQuestionId is null using JS. How can we achieve this? Thank you. #data const data = [ { "id": 0, "inspectionScheduleQuestionId": 1, ...

javascriptangulartypescript

Is there a way to position the button at the bottom right corner of my div box?

Having trouble positioning the button in the bottom-right corner of the parent div? I attempted using float: right;, but it ended up outside of the box. How can I keep the button within the box and align it to the bottom-right corner? If you have a solutio ...

htmlcss

Creating a fake Angular2-toaster component for Jasmine Unit testing

Seeking advice: How can I simulate an external Angular2 library for testing purposes? Currently, my application utilizes Angular2-toaster to display popup messages. While attempting to write a unit test suite using Jasmine for one of the components, I tri ...

angularjasminekarma-jasmineangular2-testingangular2-toaster

What is the best way to conceal a dropdown menu when the page first loads?

I have a dropdown menu that is displaying like this: <ul> <li class="dropdown open"> <a aria-expanded="true" href="#" class="dropdown-toggle waves-effect waves-button waves-classic" data-toggle="dropdown"> <spa ...

javascriptjqueryhtmlcssdrop-down-menu

Pattern matching for CSS class names

My current project involves creating a PHP function that will sift through CSS and JS files, swapping out class names and IDs in CSS selectors without touching the HTML elements or CSS properties themselves. Alas, my knowledge of regular expressions is sev ...

phpcssregex

Animation controlled by a button

I'm working on a project that involves creating a cartoon version of a record player. I want to incorporate an animation where the play button on the side toggles the spinning motion of the record using webkit, while also starting the audio track. The ...

csswebkit

Leveraging interfaces with the logical OR operator

Imagine a scenario where we have a slider component with an Input that can accept either Products or Teasers. public productsWithTeasers: (Product | Teaser)[]; When attempting to iterate through this array, an error is thrown in VS Code. <div *ngFor= ...

angulartypescriptvisual-studio-codeinterface

Unexpected behavior observed with Mui theme breakpoints

I have defined breakpoints for my MUI React-based app like so export const lighttheme = createTheme({ palette: palette, typography: typography, breakpoints: { values: { xs: 0, sm: 600, md: 900, lg: 1200, xl: 1536, ...

cssreactjsmaterial-uibreakpoints

Differentiating Between Observables and Callbacks

Although I have experience in Javascript, my knowledge of Angular 2 and Observables is limited. While researching Observables, I noticed similarities to callbacks but couldn't find any direct comparisons between the two. Google provided insights into ...

javascriptangulartypescriptreactive-programming

Utilizing AJAX to showcase individual PHP files

My PHP elements are not being displayed in the code, and I need to figure out why. Below is the HTML code I am currently using: <div class="tablocation"> <ul class="css-tabs"> <li><a class="current" href="/wp-content/themes ...

phpjqueryhtmlajax

Using two different colors in text with CSS

Is it possible to have text in two different colors like this: https://i.stack.imgur.com/R40W1.png In terms of HTML, I tried looking it up but found answers related to:- https://i.stack.imgur.com/GRAfI.png ...

htmlcsscolorstextcolor

When should I schedule the execution of the .spec and .po.ts files in Protractor?

Curious about TypeScript and Protractor: I have a couple of basic helper functions stored in a shared.po.ts file within my Protractor suite. These functions are triggered by the third it() in my .spec file - meaning they are not immediately called upon ru ...

angulartypescriptprotractor

Jquery not allowing changes and blurring on section tag

After making changes to the contenteditable area and clicking off, nothing happens. This is because the function it's trying to send data to has not been created yet, so an 'failure' alert should appear. Similar code has worked fine for me i ...

jqueryhtml

Passing JSON information from a website to a Node.js server

<script type="text/javascript" src="data.json"></script> var mydata = JSON.parse(data); data = '[{"yer" : "Besiktas", "lat" : "41.044161", "lng" : "29.001056"},{"yer" : "Eminönü", "lat" : "41.017513", "lng" : "28.970939"},{"yer" : "Zeyt ...

javascripthtmljsonnode.js

The selected text on the webpage is not showing up highlighted

Encountering an unusual issue that is challenging to comprehend and difficult to find a solution for using Google search. I have created a website with multiple web pages. Each page follows the same format: header with links at the top, content area in th ...

css

Retrieve information from api and showcase it in html

Recently, I came across an interesting API file that caught my attention: My goal is to extract information from this API and present it on a HTML page in a visually appealing format. Despite scouring various forums, I have yet to find a solution that fi ...

javascripthtmljson

positioning a picture at the middle of a link

Struggling to horizontally center an image within an anchor tag? Despite trying various methods like setting it as a block element, applying auto margins, and nesting divs, the image stubbornly remains aligned to the left. Even after looking at other resou ...

htmlcsstagsanchorcentering

The ng-repeat ng-switch combination is not functioning as expected

My data can be simplified to the following in my code: function DemoCtrl($scope) { $scope.myData= [ {text: "blah", other: 3, V: 'caseOne'}, {text: "blah", other: 3, V: 'caseTwo'}, {text: "blah", other: 3, V ...

javascripthtmlangularjs