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:
But this is not working as intended:
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">	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">	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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.