Div Randomly Translates Vertically

Issue

I recently created a VS Code Extension on code completion. Now I started creating a website as a landing page for people to sign up for and customize their extension settings.

I almost finished creating the editor which pops up first on that page but then this issue occured - In this clip, everything seems to work normally:

Here is the video link

But this is not working as intended:

Link of the other video

My CSS file(main_light.css):

function load() {
  var python1 = $("#python-1");
  var python2 = $("#python-2");
  var java1 = $("#java-1");
  var java2 = $("#java-2");
  var typescript1 = $("#typescript-1");

  var fileContents = $(".file-contents");
  var mode = sessionStorage.getItem("mode") || "light";

  let createLineNumbers = (n) => {
    let lineNumbers = "";
    for (let i = 1; i <= n; i++) {
      lineNumbers += "<span class='line-number'>" + i + "</span>";
    }
    let lineNumbersDiv = $(".line-numbers");
    lineNumbersDiv.empty();
    lineNumbersDiv.html(lineNumbers);
  }

  $(python1).click(() => {
    fileContents.empty();
    console.log("python1");
    python1.addClass("selected");
    python2.removeClass("selected");
    java1.removeClass("selected");
    java2.removeClass("selected");
    typescript1.removeClass("selected");
    var vara = ('<span class="var">a</span>');
    var comma = ('<span class="separator">, </span>');
    var varb = ('<span class="var">b </span>');
    var equals = ('<span class="separator">= </span>');
    var zero = ('<span class="number">0</span>');
    var comma2 = ('<span class="separator">, </span>');
    var one = ('<span class="number">1<br></span>');
    var comment = ('<span class="comment">#Print the first 10 numbers of the fibonacci series</span>');
    var loopfor = ('<span class="keyword">for </span>');
    var var1 = ('<span class="var">i </span>');
    var loopin = ('<span class="keyword">in </span>');
    var range = ('<span class="method-2">range</span>');
    var parenopen = ('<span class="bracket">(</span>');
    var ten = ('<span class="number">10</span>');
    var parenclose = ('<span class="bracket">)</span>');
    var colon = ('<span class="separator">:<br></span>');
    var print = ('<span class="method-1">&Tab;print</span>');
    var parenopen2 = ('<span class="bracket">(</span>');
    var varb2 = ('<span class="var">b</span>');
    var parenclose2 = ('<span class="bracket">)<br></span>');
    var vara2 = ('<span class="var">&Tab;a</span>');
    var comma3 = ('<span class="separator">, </span>');
    var varb3 = ('<span class="var">b </span>');
    var equals2 = ('<span class="separator">= </span>');
    var varb4 = ('<span class="var">b</span>');
    var comma4 = ('<span class="separator">, </span>');
    var parenopen3 = ('<span class="bracket">(</span>');
    var vara3 = ('<span class="var">a </span>');
    var plus = ('<span class="operator">+ </span>');
    var varb5 = ('<span class="var">b</span>');
    var parenclose3 = ('<span class="bracket">)</span>');

    var pretyped = $("<div class='line' id='pretyped'>" + vara + comma + varb + equals + zero + comma2 + one + "</div>");
    var completion = $("<div class='completion line'>" + loopfor + var1 + loopin + range + parenopen + ten + parenclose + colon + "</div><div class='completion line'>" + print + parenopen2 + varb2 + parenclose2 + "</div><div class='completion line'>" + vara2 + comma3 + varb3 + equals2 + varb4 + comma4 + parenopen3 + vara3 + plus + varb5 + parenclose3 + "</div>");

    createLineNumbers(2);

    fileContents.append(pretyped);

    var totypeLine = $("<div class='line' id='to-type-line'></div>");
    fileContents.append(totypeLine);

    var typewriter = new Typewriter('#to-type-line', {
      loop: false,
      cursor: '|',
      delay: 50
    });
    typewriter.typeString(comment).pauseFor(1000).start();

    fileContents.append(completion);
    var decoration = $("<div class='decoration'>Codosaurus Copilot</div>");
    fileContents.append(decoration);
    completion.css("opacity", "0");
    decoration.css("opacity", "0");
    setTimeout(() => {
      createLineNumbers(5);
      fileContents.css("transform", "translate(50px, -115px)");
      completion.css("opacity", "1");
      decoration.animate({
        "opacity": "1"
      }, 1000);
    }, 4000);
  });
  $(python2).click(() => {
    fileContents.empty();
    console.log("python1");
    python2.addClass("selected");
    python1.removeClass("selected");
    java1.removeClass("selected");
    java2.removeClass("selected");
    typescript1.removeClass("selected");
    var comment = ('<span class="comment"># Take two numbers from the user as an input and display them after adding</span>');
    var number1 = ('<span class="var">number1 </span>');
    var equals = ('<span class="separator">= </span>');
    var int = ('<span class="method-2">int</span>');
    var parenopen = ('<span class="bracket">(</span>');
    var input = ('<span class="method-1">input</span>');
    var parenopen2 = ('<span class="bracket">(</span>');
    var prompt = ('<span class="string">"Enter a number"</span>');
    var parenclose2 = ('<span class="bracket">)</span>');
    var parenclose = ('<span class="bracket">)<br></span>');
    var number2 = ('<span class="var">number2 </span>');
    var equals2 = ('<span class="separator">= </span>');
    var int2 = ('<span class="method-2">int</span>');
    var parenopen3 = ('<span class="bracket">(</span>');
    var input2 = ('<span class="method-1">input</span>');
    var parenopen4 = ('<span class="bracket">(</span>');
    var prompt2 = ('<span class="string">"Enter another number"</span>');
    var parenclose4 = ('<span class="bracket">)</span>');
    var parenclose3 = ('<span class="bracket">)</span>');
    var sum = ('<span class="var">sum </span>');
    var equals3 = ('<span class="separator">= </span>');
    var number1plusnumber2 = ('<span class="var">number1 </span><span class="operator">+ </span><span class="var">number2</span>');
    var print = ('<span class="method-1">print</span>');
    var parenopen5 = ('<span class="bracket">(</span>');
    var sum2 = ('<span class="var">sum</span>');
    var parenclose5 = ('<span class="bracket">)</span>');

    var pretyped = $("<div class='line' id='pretyped'>" + comment + "<br>" + number1 + equals + int + parenopen + input + parenopen2 + prompt + parenclose2 + parenclose + "<br>" + "</div>");
    var completion = $("<div class='completion line'>" + "</div><div class='completion line'>" + sum + equals3 + number1plusnumber2 + "</div><div class='completion line'>" + print + parenopen5 + sum2 + parenclose5 + "</div>");

    createLineNumbers(3);

    fileContents.append(pretyped);

    var totype = number2 + equals2 + int2 + parenopen3 + input2 + parenopen4 + prompt2 + parenclose4 + parenclose3;

    var totypeLine = $("<div class='line' id='to-type-line'></div>");
    fileContents.append(totypeLine);

    var typewriter = new Typewriter('#to-type-line', {
      loop: false,
      cursor: '|',
      delay: 50
    });
    typewriter.typeString(totype).pauseFor(1000).start();

    fileContents.append(completion);
    var decoration = $("<div class='decoration'>Codosaurus Copilot</div>");
    fileContents.append(decoration);
    completion.css("opacity", "0");
    decoration.css("opacity", "0");
    setTimeout(() => {
      createLineNumbers(6);
      //fileContents.css("transform", "translate(50px, -115px)");
      completion.css("opacity", "1");
      decoration.animate({
        "opacity": "1"
      }, 1000);
    }, 4000);
  });

  python1.click();
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;900&family=Poppins&display=swap');
* {
  outline: none;
}

body {
  background-color: #f5f5f5;
}

.title {
  font-size: 6em;
  font-weight: bold;
  color: #000;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  margin-top: 1em;
  margin-bottom: 0em;
}

.sub {
  font-size: 1.2em;
  font-weight: bold;
  color: #626262;
  font-family: 'Poppins', sans-serif;
  text-align: center;
  margin-top: 0em;
  margin-bottom: 2em
}

.btn-primary {
  background-color: #8000ff;
  color: #fff;
  border: none;
  font-size: 1.2em;
  font-weight: bold;
  font-family: 'Poppins', sans-serif;
  margin: auto;
  margin-bottom: 2em;
  border-radius: 10px;
  padding: 16px 20px;
  display: block;
  cursor: pointer;
  transition: 0.5s;
}

.btn-primary:hover {
  box-shadow: inset 0px 0px 40px 5px #ffb300a4;
}

.material-icons {
  transform: translate(10px, 5px);
}

.editor {
  margin: auto;
  max-width: 950px;
  min-height: 450px;
  height: auto;
  background-color: #fff;
  border-radius: 1em;
  box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 0.2);
}

.editor-tabs {
  width: 100%;
  height: 50px;
  background-color: #effffd;
  border-radius: 1em 1em 0 0;
  overflow-x: scroll;
  overflow-y: hidden;
}

.editor-tabs::-webkit-scrollbar {
  display: none;
}

.file-tab {
  position: relative;
  top: 0;
  left: 0;
  height: 50px;
  width: auto;
  background-color: #effffd;
  border-radius: 1em 1em 0 0;
  color: #6d6d6d;
  overflow: hidden;
  border: none;
  padding: 10px;
  cursor: pointer;
}

.file-tab:hover {
  background-color: #fff;
}

.file-tab.selected {
  background-color: #fff;
  color: #000;
  border-top: #8000ff solid 2px;
}

.file-tab-content {
  position: relative;
  top: 0;
  left: 0;
  height: auto;
  width: auto;
  border-radius: 0.5em;
  display: table-cell;
  vertical-align: top;
}

.lang-logo {
  position: relative;
  top: 0;
  left: 0;
  height: 20px;
  width: auto;
}

.filename {
  position: relative;
  font-size: 1em;
  font-family: 'Poppins', sans-serif;
  font-weight: bold;
  text-align: center;
  margin-top: 0em;
  transform: translateY(-5px);
  display: inline-block;
}

.line-numbers {
  position: relative;
  font-weight: bold;
  color: #2a2a2a;
  text-orientation: upright;
  writing-mode: vertical-lr;
  background-color: #effffd;
  font-size: 1.2em;
  font-family: 'consolas', monospace;
  text-align: right;
  padding-left: 1em;
}

.line {
  position: relative;
  color: #2a2a2a;
  margin-top: 0em;
  background-color: #ffffff;
  font-size: 1.2em;
  font-family: 'consolas', monospace;
}

.file-contents {
  position: relative;
  top: 0;
  left: 0;
  vertical-align: middle;
  transform: translate(50px, -46px);
  width: 90%;
}

.completion {
  background: #d4ebff;
  width: fit-content;
}

.decoration {
  position: relative;
  top: 0;
  left: 0;
  vertical-align: middle;
  width: 160px;
  font-size: 1em;
  font-family: 'Poppins';
  background-color: #8000ff;
  color: #fff;
  padding: 5px 10px;
  font-weight: bold;
  border-radius: 7px;
  margin-top: 10px;
  transform: translateX(180px);
}

.var {
  color: #000;
}

.comment {
  color: #a0a1a7;
}

.separator {
  color: #000;
}

.keyword {
  color: #a626a4;
}

.method-2 {
  color: #4078f2;
}

.bracket {
  color: #000;
}

.method-1 {
  color: #4078f2;
}

.operator {
  color: #000;
}

.number {
  color: #986801;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Codosaurus Copilot - By Melting Obsidian</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <link rel='stylesheet' href='CSS/main-light.css'>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/TypewriterJS/2.18.2/core.min.js"></script>
</head>

<body onload="load()">
  <script src="main.js"></script>
  <article>
    <section>
      <h1 class="title">Codosaurus Copilot</h1>
      <p class="sub">A better AI for a better programming experience</p>
      <button class="btn-primary">Sign Up<span class="material-icons">east</span></button>
      <div class="editor">
        <div class="editor-tabs">
          <!--Fibonacci.py-->
          <button class="file-tab selected" id="python-1">
                        <div class="file-tab-content">
                            <img class="lang-logo" src="assets/python-logo.png" alt="python-logo">
                            <span class="filename">Fibonacci.py</span>
                        </div>
                    </button>
          <!--Add.py-->
          <button class="file-tab" id="python-2">
                        <div class="file-tab-content">
                            <img class="lang-logo" src="assets/python-logo.png" alt="python-logo">
                            <span class="filename">Add.py</span>
                        </div>
                    </button>
          <!--SwingExample.java-->
          <button class="file-tab" id="java-1"> 
                        <div class="file-tab-content"> 
                            <img class="lang-logo" src="assets/java-logo.png" alt="java-logo"> 
                            <span class="filename">SwingExample.java</span>
                        </div> 
                    </button>
          <!--PersonExample.java-->
          <button class="file-tab" id="java-2"> 
                        <div class="file-tab-content"> 
                            <img class="lang-logo" src="assets/java-logo.png" alt="java-logo"> 
                            <span class="filename">PersonExample.java</span>
                        </div> 
                    </button>
          <!--HelloWorld.ts-->
          <button class="file-tab" id="typescript-1"> 
                        <div class="file-tab-content"> 
                            <img class="lang-logo" src="assets/typescript-logo.png" alt="typescript-logo"> 
                            <span class="filename">HelloWorld.ts</span>
                        </div> 
                    </button>
        </div>
        <div class="line-numbers"></div>
        <div class="active-line"></div>
        <div class="file-contents"></div>
      </div>
    </section>
  </article>
</body>

</html>

Any suggestions would be appreciated. Thank you in advance

Solution

You are adding fileContents.css("transform", "translate(50px, -115px)"); due to which file-content is being getting its position changed and when you are switching tab as per .file-content is positioned top:0; left:0; so your div is getting translated to -115px above

For the solution you need to reset its position to 50px, -46px. So, on click of tabs you need to add fileContents.css("transform", "translate(50px, -46px)");

Answered By - Kunika