Align the non-paranted objects using js (responsive webite)

132
January 16, 2022, at 1:50 PM

Here's an example of what I am trying to achieve:

Hello everyone. So I made a vertical timeline/roadmap with interactive progress bar on scroll. Now I am trying to make my website adaptive for different devices and that's where I encountered a problem. Positioning of every stage changes a lot depending on the screen size, together with its height and milestone indicator position. I tried to write down in CSS with @media and screen the main screen sizes but even 20px difference in width makes it not aligned. those circles are in SVG in order to create a clip-path for my progress bar. I tried to write a script to declare the top border of each stage and align the milestone indicator accordingly but it doesn't seem to work. I would very much appreciate any corrections or suggestions regarding my solution as I am not very familiar with JavaScript.

This is my SVG:

<svg height="1650" width="40" class="loader" style=" z-index:4">
    <rect class="rect1" x="15" y="0" width="10" height="1650" rx="5" ry="5" style="fill:#022c3a;"/>
    <circle class="c1" cx="20" cy="90" r="10" stroke="#022c3a" stroke-width="10" fill="none"/>
    <circle class="c2" cx="20" cy="455" r="10" stroke="#022c3a" stroke-width="10" fill="none"/>
    <circle class="c3" cx="20" cy="800" r="10" stroke="#022c3a" stroke-width="10" fill="none"/>
    <circle class="c4" cx="20" cy="1105" r="10" stroke="#022c3a" stroke-width="10" fill="none"/>
    <circle class="c5" cx="20" cy="1475" r="10" stroke="#022c3a" stroke-width="10" fill="none"/>
</svg>

This is my attempt in JavaScript:

var stage1 =  document.getElementById("stage1");
var stage2 =  document.getElementById("stage2");
var stage3 =  document.getElementById("stage3");
var stage4 =  document.getElementById("stage4");
var stage5 =  document.getElementById("stage5");
var road = document.getElementById("road_text");
var rec = document.getElementsByClassName("rect1");
window.onload = function() {
    let st1 = stage1.getBoundingClientRect().y,
        st2 = stage2.getBoundingClientRect().y,
        st3 = stage3.getBoundingClientRect().y,
        st4 = stage4.getBoundingClientRect().y,
        st5 = stage5.getBoundingClientRect().y,
        height = road.getBoundingClientRect().height,
        curH = rec.getBoundingClientRect().height;
    if (curH < height | curH > height) {
        document.getElementsByClassName("c1").style.cy = st1;
        document.getElementsByClassName("c2").style.cy = st2;
        document.getElementsByClassName("c3").style.cy = st3;
        document.getElementsByClassName("c4").style.cy = st4;
        document.getElementsByClassName("c5").style.cy = st5;
    }
}

Let me know if there is anything else I can add.

Answer 1

Maybe you could use this example as a starting point. The green line and circles are made with SVG and is part of the CSS. Both the line and circles are placed in the middle of the containing box.

It should be responsive. I use flex box and percentages.

div.left,
div.right {
  display: flex;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDIgMiI+PGNpcmNsZSBjeD0iMSIgY3k9IjEiIHI9IjEiIGZpbGw9ImdyZWVuIi8+PC9zdmc+');
  background-repeat: no-repeat;
  background-position: center top;
}
div.right {
  justify-content: flex-start;
}
div.right {
  justify-content: flex-end;
}
div.left>div {
  width: 48%;
  border: black solid thin;
  height: 80px;
}
div.right>div {
  width: 48%;
  border: solid thin black;
  height: 100px;
}
div.container {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEgMSI+PHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iZ3JlZW4iLz48L3N2Zz4=');
  background-repeat: repeat-y;
  background-position: center 20px;
}
<div class="container">
  <div class="left">
    <div>Text to the left</div>
  </div>
  <div class="right">
    <div>Text to the right</div>
  </div>
  <div class="left">
    <div>Text to the left</div>
  </div>
  <div class="right">
    <div>Text to the right</div>
  </div>
  <div class="left">
    <div>Text to the left</div>
  </div>
</div>

Rent Charter Buses Company
READ ALSO
How to animate any click event [duplicate]

How to animate any click event [duplicate]

I have written this code to remove an element now I want give any effect to it using jQuery

87
Checking my math for distance between 2 points in miles

Checking my math for distance between 2 points in miles

Hello I am trying to do a calculator of finding the distance between 2 pointsEverything works properly

121
How can I make a Horizontal scrolling nav bar that also works with mobile

How can I make a Horizontal scrolling nav bar that also works with mobile

So I have a website about the NBA and the problem is there is 30 teams in the NBAWhen I make a nav bar it takes up half the page because there is 30 teams lol

68
Mongodb updateMany() not working in nodejs

Mongodb updateMany() not working in nodejs

I have a collection called imported_products with documents as following,

101