Div 随机垂直平移

Question

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

Answer 1

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)");