At first there were 4 buttons I only wanted 3 so I removed the 4th one and that's why I want to make the remaining 3 look horizontally centered, it looks weird because of the 4th button's blank space. I tried a few things but they didn't work out.
var tabButtons = document.querySelectorAll(".tabContainer .buttonContainer button");
var tabPanels = document.querySelectorAll(".tabContainer .tabPanel");
function showPanel(panelIndex, colorCode) {
tabButtons.forEach(function(node) {
node.style.backgroundColor = "";
node.style.color = "";
});
tabButtons[panelIndex].style.backgroundColor = colorCode;
tabButtons[panelIndex].style.color = "white";
tabPanels.forEach(function(node) {
node.style.display = "none";
});
tabPanels[panelIndex].style.display = "block";
tabPanels[panelIndex].style.backgroundColor = colorCode;
}
showPanel(0, '#f44336');
.title {
color: #dc2d5e;
text-align: center;
}
.tabContainer {
width: 100%;
height: 350px;
}
.tabContainer .buttonContainer {
height: 15%;
align-items: center;
align-content: center;
justify-content: center;
text-align: center;
}
.tabContainer .buttonContainer button {
width: 25%;
height: 100%;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 10px;
font-family: sans-serif;
font-size: 18px;
background-color: #eee;
}
.tabContainer .buttonContainer button:hover {
background-color: #d7d4d4;
}
.tabContainer .tabPanel {
height: 85%;
background-color: gray;
color: white;
text-align: center;
padding-top: 105px;
box-sizing: border-box;
font-family: sans-serif;
font-size: 22px;
display: none;
}
<h1 class="title">Recieved Data</h1>
<div class="tabContainer">
<div class="buttonContainer">
<button onclick="showPanel(0,'#f44336')">Feedbacks</button>
<button onclick="showPanel(1,'#4caf50')">Suggestions</button>
<button onclick="showPanel(2,'#2196f3')">Messages</button>
</div>
<div class="tabPanel">Tab 1:Content</div>
<div class="tabPanel">Tab 2:Content</div>
<div class="tabPanel">Tab 3:Content</div>
</div>
You are really close, adding these two flex properties can obtain the desired solution:
.tabContainer .buttonContainer{
display: flex;
justify-content: space-between;
}
.title{
color: #dc2d5e;
text-align: center;
}
.tabContainer{
width: 100%;
height: 350px;
}
.tabContainer .buttonContainer{
display: flex;
height: 15%;
align-items: center;
align-content: center;
justify-content: space-between;
text-align: center;
}
.tabContainer .buttonContainer button{
width: 25%;
height: 100%;
float: left;
border: none;
outline:none;
cursor: pointer;
padding: 10px;
font-family: sans-serif;
font-size: 18px;
background-color: #eee;
}
.tabContainer .buttonContainer button:hover{
background-color: #d7d4d4;
}
.tabContainer .tabPanel{
height: 85%;
background-color: gray;
color: white;
text-align: center;
padding-top: 105px;
box-sizing: border-box;
font-family: sans-serif;
font-size: 22px;
display: none;
}
<h1 class="title">Recieved Data</h1>
<div class="tabContainer">
<div class="buttonContainer">
<button onclick="showPanel(0,'#f44336')">Feedbacks</button>
<button onclick="showPanel(1,'#4caf50')">Suggestions</button>
<button onclick="showPanel(2,'#2196f3')">Messages</button>
</div>
<div class="tabPanel">Tab 1:Content</div>
<div class="tabPanel">Tab 2:Content</div>
<div class="tabPanel">Tab 3:Content</div>
</div>
This flexbox guide is my go-to any time I run into this type of issue!
You just need to add this to your css !
.buttonContainer{
display: flex;
}
Since there are only 3 buttons now, I would just make each one's width a third.
You can accomplish this by doing:
.tabContainer .buttonContainer button{
width: calc(100% / 3);
}
EDIT: So it would look like this:
var tabButtons = document.querySelectorAll(".tabContainer .buttonContainer button");
var tabPanels = document.querySelectorAll(".tabContainer .tabPanel");
function showPanel(panelIndex, colorCode) {
tabButtons.forEach(function(node) {
node.style.backgroundColor = "";
node.style.color = "";
});
tabButtons[panelIndex].style.backgroundColor = colorCode;
tabButtons[panelIndex].style.color = "white";
tabPanels.forEach(function(node) {
node.style.display = "none";
});
tabPanels[panelIndex].style.display = "block";
tabPanels[panelIndex].style.backgroundColor = colorCode;
}
showPanel(0, '#f44336');
.title {
color: #dc2d5e;
text-align: center;
}
.tabContainer {
width: 100%;
height: 350px;
}
.tabContainer .buttonContainer {
height: 15%;
align-items: center;
align-content: center;
justify-content: center;
text-align: center;
}
.tabContainer .buttonContainer button {
width: calc(100% / 3);
height: 100%;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 10px;
font-family: sans-serif;
font-size: 18px;
background-color: #eee;
}
.tabContainer .buttonContainer button:hover {
background-color: #d7d4d4;
}
.tabContainer .tabPanel {
height: 85%;
background-color: gray;
color: white;
text-align: center;
padding-top: 105px;
box-sizing: border-box;
font-family: sans-serif;
font-size: 22px;
display: none;
}
<h1 class="title">Recieved Data</h1>
<div class="tabContainer">
<div class="buttonContainer">
<button onclick="showPanel(0,'#f44336')">Feedbacks</button>
<button onclick="showPanel(1,'#4caf50')">Suggestions</button>
<button onclick="showPanel(2,'#2196f3')">Messages</button>
</div>
<div class="tabPanel">Tab 1:Content</div>
<div class="tabPanel">Tab 2:Content</div>
<div class="tabPanel">Tab 3:Content</div>
</div>
calc() is widely supported on modern browsers.
Related
I'm creating a chat application(React). I'm having this textbox which I need to expand vertically upwards as user types. I tried doing it with position absolute but it takes it out of the normal flow. And this does not allow the parent div to move upwards. Is there a way that this can be done? If anyone could point me in the right direction that would be great. Thanks.
Here is the codepen link.
https://codepen.io/ghewadesumit/pen/zYzRjyY
<div class='chat-inputbox-container'>
<div class='chat-inputbox-wrapper'>
<div class='chat-microphone-container'>
<div class='chat-microphone'></div>
</div>
<div class='inputbox-container'>
<div class='inputbox-wrapper'>
<textarea type='text' class='chat-input-box'></textarea>
<div class='input-box-btn'></div>
</div>
<div class='input-character-container'>
<span class='input-character'>
250 out of 250 characters left
</span>
</div>
</div>
</div>
</div>
css
.chat-inputbox-container {
/* border: 1px solid red; */
width: 100%;
height: 113px;
align-self: flex-end;
display: flex;
justify-content: center;
}
.chat-inputbox-wrapper {
width: 736px;
height: 92px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.chat-microphone-container {
width: 32px;
height: 92px;
/* border: 1px solid orange; */
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
}
.chat-microphone {
width: 32px;
height: 32px;
background: orangered;
}
.inputbox-wrapper {
width: 694px;
height: 52px;
/* border: 1px solid blue; */
display: flex;
align-self: flex-end;
align-items: center;
margin-top: 16px;
background: gray;
border: 1px solid red;
box-sizing: border-box;
border-radius: 4px;
}
.chat-input-box {
width: 632px;
height: 20px;
font-size: 14px;
line-height: 20px;
border: hidden;
background: #f7f7f7;
outline: none;
color: #0d1c3d;
margin: 16px 10px;
}
.input-box-btn {
/* Auto Layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0px;
position: static;
width: 32px;
height: 32px;
margin-right: 10px;
background: #0078b3;
border-radius: 4px;
flex: none;
order: 0;
flex-grow: 0;
margin: 0px 0px;
}
.input-character-container {
}
.input-character {
font-size: 12px;
line-height: 16px;
color: #677083;
}
We can use a Javascript ResizeObserver to tell us when the height of the input text has changed. Then we can scroll the window in such a way that the bottom of the input stays in the same position on the viewport - so the elements seem to grow upwards.
Note this snippet uses contenteditable on a div rather than a textarea as the growing/shrinking and text wrapping then happen automatically.
<style>
body {
height: 300vh;
}
.parent {
margin-top: 20vh; /* so we can see it growing not just disappearing */
background: pink;
}
.child {
background: #eeeeee;
}
</style>
<body>
<div class="parent">
Some stuff in the parent<br> here
<div class="child" contenteditable></div>
</div>
<script>
let prevH = 0;
const textArea = document.querySelector('.child');
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
let h = entry.contentRect.height;
let diff = h - prevH;
if (diff != 0) {
prevH = h;
window.scroll(0, prevH);
}
}
});
resizeObserver.observe(textArea);
</script>
</body>
Don't hard code the height of class .inputbox-wrapper instead remove height property from there or put height: auto(which is default value) so that container expand when the the text-area is expanded
.chat-inputbox-container {
/* border: 1px solid red; */
width: 100%;
height: 113px;
align-self: flex-end;
display: flex;
justify-content: center;
}
.chat-inputbox-wrapper {
width: 736px;
height: 92px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.chat-microphone-container {
width: 32px;
height: 92px;
/* border: 1px solid orange; */
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
}
.chat-microphone {
width: 32px;
height: 32px;
background: orangered;
}
.inputbox-wrapper {
width: 694px;
height: auto;/*Change here*/
/* border: 1px solid blue; */
display: flex;
align-self: flex-end;
align-items: center;
margin-top: 16px;
background: gray;
border: 1px solid red;
box-sizing: border-box;
border-radius: 4px;
}
.chat-input-box {
width: 632px;
height: 20px;
font-size: 14px;
line-height: 20px;
border: hidden;
background: #f7f7f7;
outline: none;
color: #0d1c3d;
margin: 16px 10px;
}
.input-box-btn {
/* Auto Layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0px;
position: static;
width: 32px;
height: 32px;
margin-right: 10px;
background: #0078b3;
border-radius: 4px;
flex: none;
order: 0;
flex-grow: 0;
margin: 0px 0px;
}
.input-character-container {
}
.input-character {
font-size: 12px;
line-height: 16px;
color: #677083;
}
<div class='chat-inputbox-container'>
<div class='chat-inputbox-wrapper'>
<div class='chat-microphone-container'>
<div class='chat-microphone'></div>
</div>
<div class='inputbox-container'>
<div class='inputbox-wrapper'>
<textarea type='text' class='chat-input-box'></textarea>
<div class='input-box-btn'></div>
</div>
<div class='input-character-container'>
<span class='input-character'>
250 out of 250 characters left
</span>
</div>
</div>
</div>
</div>
The .inputbox-wrapper should have a min-height not a height if you set only a height, the container will not resize with the textbox.
On another note, if you want the textarea to expand vertically only, you can add resize: vertical; to .chat-input-box {
Textboxes can't expand their height automatically like this by default - you'll need to use a bit of Javascript.
One approach is to dynamically calculate the height of the textfield based on the number of line breaks inside it.
This example from CSS-Tricks has more details on the approach. I've implemented it on your code below.
You also need to change height to min-height on your inputbox-wrapper to allow it to expand as the textfield changes height.
let textarea = document.querySelector(".chat-input-box");
textarea.addEventListener("keyup", () => {
textarea.style.height = calcHeight(textarea.value) + "px";
});
function calcHeight(value) {
let numberOfLineBreaks = (value.match(/\n/g) || []).length;
// min-height + lines x line-height + padding + border
let newHeight = 20 + numberOfLineBreaks * 20 + 0 + 0;
// padding and border are both 0 here but have left in for reference
return newHeight;
}
.chat-inputbox-container {
/* border: 1px solid red; */
width: 100%;
height: 113px;
align-self: flex-end;
display: flex;
justify-content: center;
}
.chat-inputbox-wrapper {
width: 736px;
height: 92px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.chat-microphone-container {
width: 32px;
height: 92px;
/* border: 1px solid orange; */
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
}
.chat-microphone {
width: 32px;
height: 32px;
background: orangered;
}
.inputbox-wrapper {
width: 694px;
min-height: 52px;
/* border: 1px solid blue; */
display: flex;
align-self: flex-end;
align-items: center;
margin-top: 16px;
background: gray;
border: 1px solid red;
box-sizing: border-box;
border-radius: 4px;
}
.chat-input-box {
width: 632px;
height: 20px;
font-size: 14px;
line-height: 20px;
border: hidden;
background: #f7f7f7;
outline: none;
color: #0d1c3d;
margin: 16px 10px;
}
.input-box-btn {
/* Auto Layout */
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 0px;
position: static;
width: 32px;
height: 32px;
margin-right: 10px;
background: #0078b3;
border-radius: 4px;
flex: none;
order: 0;
flex-grow: 0;
margin: 0px 0px;
}
.input-character-container {
}
.input-character {
font-size: 12px;
line-height: 16px;
color: #677083;
}
<div class='chat-inputbox-container'>
<div class='chat-inputbox-wrapper'>
<div class='chat-microphone-container'>
<div class='chat-microphone'></div>
</div>
<div class='inputbox-container'>
<div class='inputbox-wrapper'>
<textarea type='text' class='chat-input-box'></textarea>
<div class='input-box-btn'></div>
</div>
<div class='input-character-container'>
<span class='input-character'>
250 out of 250 characters left
</span>
</div>
</div>
</div>
</div>
JavaScript Noob
On the footer of the site I'm trying to display the contact info with a popup like form
whenever I copied the code to new page or new device the button clicked opens the form
but then the form closes immediately
Is there a way to fix this?
<button class="open-button" onclick="openForm()">
Contact Us</button>
<div class="form-popup">
<form class="form-container" id="myForm">
<h1>info#indiepump.com</h1>
<button type="button" class="btn-cancel" onclick="closeForm()">×</button>
</form>
</div>
<script>
function openForm() {
//openForm().stopPropagation();
document.getElementById("myForm").style.display = "flex";
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
}
</script>
And the CSS part:
.open-button {
background-image: url(/usr/fsociety/indiepump_test/test_4/social_icons/email.png);
background-repeat: no-repeat;
background-color: transparent;
padding: 17px 21px;
border: none;
cursor: pointer;
position: fixed;
justify-content: space-between;
align-items: center;
vertical-align: middle;
text-align: right;
text-decoration: none;
font-size: 0.9rem;
margin-left: 1rem;
height: 27px;
width: 121px;
padding: 3px 3px;
padding-left: 3px;
color: red;
}
.form-popup {
display: none;
position: fixed;
align-items: center;
justify-content: space-between;
vertical-align: middle;
bottom: 2.5rem;
left: 2rem;
border: 1px solid red;
border-radius: 10px;
color: red;
font-size: 0.7rem;
z-index: 10000;
}
.form-container {
display: flex;
max-width: 300px;
width: 300px;
height: 50px;
align-items: center;
justify-content: space-between;
vertical-align: middle;
text-align: center;
padding: 10px;
background-color: #f9e3d5;
z-index: 100000;
}
.btn-cancel {
display: flex;
align-items: center;
margin-bottom: 1rem;
vertical-align: middle;
text-align: center;
width: 25px;
height: 25px;
border: none;
background-color: transparent;
color: red;
font-size: 1.9rem;
cursor: pointer;
}
I've already tried Google search solutions to no avail.
Also different methods from other helpful sites but every time I change something the button doesn't work at all.
After click on button the element with .form-popup class does not show because in your CSS you have set display:none:
.form-popup {
display: none;
....
}
So you need to set display:flex or block for .form-popup too.
Here is working sample:
function openForm() {
document.getElementById("myForm").parentElement.style.display = "flex";
document.getElementById("myForm").style.display = "flex";
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
document.getElementById("myForm").parentElement.style.display = "none";
}
.open-button {
background-image: url(/usr/fsociety/indiepump_test/test_4/social_icons/email.png);
background-repeat: no-repeat;
background-color: transparent;
padding: 17px 21px;
border: none;
cursor: pointer;
position: fixed;
justify-content: space-between;
align-items: center;
vertical-align: middle;
text-align: right;
text-decoration: none;
font-size: 0.9rem;
margin-left: 1rem;
height: 27px;
width: 121px;
padding: 3px 3px;
padding-left: 3px;
color: red;
}
.form-popup {
display: none;
position: fixed;
align-items: center;
justify-content: space-between;
vertical-align: middle;
bottom: 2.5rem;
left: 2rem;
border: 1px solid red;
border-radius: 10px;
color: red;
font-size: 0.7rem;
z-index: 10000;
}
.form-container {
display: flex;
max-width: 300px;
width: 300px;
height: 50px;
align-items: center;
justify-content: space-between;
vertical-align: middle;
text-align: center;
padding: 10px;
background-color: #f9e3d5;
z-index: 100000;
}
.btn-cancel {
display: flex;
align-items: center;
margin-bottom: 1rem;
vertical-align: middle;
text-align: center;
width: 25px;
height: 25px;
border: none;
background-color: transparent;
color: red;
font-size: 1.9rem;
cursor: pointer;
}
<button class="open-button" onclick="openForm()">
Contact Us
</button>
<div class="form-popup">
<form class="form-container" id="myForm">
<h1>info#indiepump.com</h1>
<button type="button" class="btn-cancel" onclick="closeForm()">×</button>
</form>
</div>
#Alireza Ahmadi
Reposting the new code...
function openForm() {
document.getElementById("myForm").parentElement.style.display = "flex";
document.getElementById("myForm").style.display = "flex";
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
document.getElementById("myForm").parentElement.style.display = "none";
}
.open-button {
background-image: url(/usr/fsociety/indiepump_test/test_4/social_icons/email.png);
background-repeat: no-repeat;
background-color: transparent;
padding: 17px 21px;
border: none;
cursor: pointer;
position: fixed;
justify-content: space-between;
align-items: center;
vertical-align: middle;
text-align: right;
text-decoration: none;
font-size: 0.9rem;
margin-left: 1rem;
height: 27px;
width: 121px;
padding: 3px 3px;
padding-left: 3px;
color: red;
}
.form-popup {
display: none;
position: fixed;
align-items: center;
justify-content: space-between;
vertical-align: middle;
bottom: 2.5rem;
left: 2rem;
border: 1px solid red;
border-radius: 10px;
color: red;
font-size: 0.7rem;
z-index: 10000;
}
.div-form {
display: flex;
max-width: 300px;
width: 300px;
height: 50px;
align-items: center;
justify-content: space-between;
vertical-align: middle;
text-align: center;
padding: 10px;
background-color: #f9e3d5;
z-index: 100000;
}
.btn-cancel {
display: flex;
align-items: center;
margin-bottom: 1rem;
vertical-align: middle;
text-align: center;
width: 25px;
height: 25px;
border: none;
background-color: transparent;
color: red;
font-size: 1.9rem;
cursor: pointer;
}
<button class="open-button" onclick="openForm()">
Contact Us</button>
<div class="form-popup">
<div class="div-form" id="myForm">
<form class="form-container">
<h1>info#indiepump.com</h1>
<button type="button" class="btn-cancel" onclick="closeForm()">×</button>
</form>
</div>
</div>
Right now the button doesn't do anything the page only shows that is refreshing
Guys need some help im trying to figure out how can i execute multiple events on single click i am able to change the image on my gallery but i wanted to add some text label on each Img click i need to change each H3 and replace whenever i click the other image, i need to do a multiple event on single click
const current = document.querySelector('#current');
const imgs = document.querySelectorAll('.imgs img');
const main = document.querySelector('#main-info h3');
const info = document.querySelector('.info');
imgs.forEach(img => img.addEventListener('click', imgClick));
function imgClick(e) {
current.src = e.target.src;
}
body {
font-family: Arial, Helvetica, sans-serif;
font: 15px/1.5;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.container {
width: 90%;
margin: auto;
overflow: hidden;
}
header {
display: flex;
justify-content: space-between;
padding-top: 5px;
background-color: #567890;
min-height: 130px;
border-bottom: 3px #e0480c solid;
padding: 0 20px 0 0;
}
header #branding {
float: left;
margin: 0;
}
header #branding img {
margin: 0;
padding: 0;
}
header ul {
margin: 0;
padding: 0;
}
header li {
display: inline;
float: left;
padding: 0 20px 0 20px;
margin-top: 50px;
}
header a {
text-decoration: none;
color: #ffffff;
text-transform: uppercase;
font-size: 16px;
}
header a:hover {
color: #b9b8b9;
opacity: 1;
}
header nav {
float: right;
padding-bottom: 50px;
}
.current a {
color: #e0480c;
font-weight: bold;
}
#showcase {
min-height: 400px;
background: linear-gradient(rgba(0, 0, 50, 0.5), rgba(0, 0, 50, 0.5)),
url(/img/enseymada.jpg) no-repeat 0 -400px;
text-align: center;
background-size: cover;
opacity: 0.9;
}
#showcase .main-info {
margin-top: 100px;
margin-bottom: 10px;
justify-content: center;
font-size: 50px;
font-weight: 600;
color: #fffcff;
}
#showcase p {
font-size: 20px;
font-weight: 200;
color: #ccc;
}
.topinfo {
text-align: center;
justify-content: center;
}
.info2 {
text-align: center;
justify-content: center;
}
footer {
width: 100%;
bottom: 0;
position: relative;
}
.foot {
background: #e24305;
color: #fff;
height: 10px;
margin: 0;
width: 100%;
text-align: center;
padding: 7px 10px;
justify-content: center;
align-items: center;
}
.main-img img,
.imgs img {
margin: auto;
width: 100%;
background: cover;
border-radius: 10%;
}
.imgs {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 5px;
background: cover;
cursor: pointer;
}
.wrapper {
border: #444 solid 3px;
max-width: 800px;
margin: auto;
height: 100%;
padding: 5px;
align-items: center;
justify-content: center;
overflow: hidden;
}
.newsletter {
margin-bottom: 100px;
padding: 0;
width: 100%;
height: 80px;
align-items: center;
justify-content: center;
background-color: #567890;
}
.newsletter h1 {
float: left;
color: #ffffff;
}
.newsletter .btn {
display: inline;
margin: 20px 5px;
padding: 10px;
background-color: #444;
color: #fff;
border: none;
}
.newsletter #subscribe {
padding: 10px;
margin-left: 10px;
border: none;
}
<div class="wrapper">
<div class="main-img">
<h3 id="main-info">Classic Enseymada</h3>
<img src="img/image2.jpg" id="current">
</div>
<div class="imgs">
<img src="img/image2.jpg">
<div class="info">
<img src="img/image3.jpg">
<h3>Nuttela</h3>
</div>
<img src="img/image4.jpg">
<img src="img/image6.jpg">
<img src="img/image7.jpg">
<img src="img/image8.jpg">
</div>
</div>
<footer><div class="foot">Copyright © Abby Cook's 2020</div></footer>
<script src="./js/main.js"></script>
</body>
</html>
I am assuming that you want to pass more arguments to your imgClick function.
One way to do it is to use anonymous functions, something like this should do the trick :
imgs.forEach(img => img.addEventListener('click', function(e){
imgClick(e, 'param1', 'param2',);
}));
function imgClick(e, param1, param2,) {
current.src = e.target.src;
// your code
}
Add then your code in the function.
I'm currently building a Twitter clone for my portfolio using Web Component's template feature. However, my template isn't rendering on screen when the tweet button is clicked. I'm currently getting an error 'Uncaught TypeError: Cannot set property 'innerHTML' of null at HTMLButtonElement.postTweetButton.onclick'.
I have attempted moving the 'tweetText.innerHTML = tweetBoxInput;' line around to no avail. My tweetText variable's value is correct so I'm not sure why the property cannot set. I suspect it's to do with the template not importing correctly.
JS FIDDLE: https://jsfiddle.net/manoj1234/mty68qng/13/
Help greatly appreciated. Thanks.
JS:
window.onload = () => {
const createTweetContainer = document.getElementById("createTweetContainer");
const createTweetButton = document.getElementById("createTweetButton");
const backArrow = document.getElementById("backArrow");
const tweetBox = document.getElementById("tweetBox");
let tweetBoxInput;
const pinnedTweet = document.getElementById("pinnedTweet");
const tweetContainer = document.getElementById("tweetContainer");
const tweetSentContainer = document.getElementById("tweetSentContainer");
createTweetButton.onclick = () => {
createTweetContainer.style.display = "block";
tweetBox.value = "";
}
backArrow.onclick = () => {
createTweetContainer.style.display = "none";
}
postTweetButton.onclick = () => {
var tweetText = document.getElementById("tweetText");
console.log(tweetBox.value);
tweetBoxInput = tweetBox.value;
if (tweetBoxInput == "") {
console.log("please write tweet");
} else {
createTweetContainer.style.display = "none";
tweetSentContainer.style.display = "flex";
var tweetTemplate = document.getElementById("tweet-template");
var tweetInstance = document.importNode(tweetTemplate.content, true);
tweetText.innerHTML = tweetBoxInput;
pinnedTweet.after(tweetInstance);
/* Show Tweet Sent container*/
setTimeout(() => {
tweetSentContainer.style.height = "30px";
}, 1000);
setTimeout(() => {
tweetSentContainer.style.opacity = "1";
}, 1300);
/* End of Show Tweet Sent container */
/* Hide Tweet Sent container */
setTimeout(() => {
tweetSentContainer.style.opacity = "0";
}, 5000);
setTimeout(() => {
tweetSentContainer.style.height = "0";
tweetSentContainer.style.marginBottom = "0";
}, 5300);
setTimeout(() => {
tweetSentContainer.style.display = "none";
tweetSentContainer.style.marginBottom = "12px";
}, 8000);
/*End of Hide Tweet Sent container */
}
}
}
CSS:
* {
margin: 0;
padding: 0;
transition: ease 0.2s;
box-sizing: border-box;
-webkit-user-drag: none;
appearance: none;
outline: none;
font-family: 'Roboto';
}
body {
display: flex;
justify-content: center;
align-items: center;
}
body main {
width: 480px;
/*background-color: $blueBackground;
*/
}
.globalWrap {
padding-left: 25px;
padding-right: 25px;
}
.greyText {
color: #8997a2;
font-weight: normal;
}
.bodyText {
font-size: 15px;
}
#bottomFixed {
width: 100%;
position: fixed;
bottom: 0;
z-index: 4;
display: flex;
align-items: flex-end;
flex-direction: column;
}
#bottomFixed #createTweetButton {
width: 65px;
height: 65px;
font-size: 1.2em;
display: flex;
justify-content: center;
align-items: center;
color: white;
border-radius: 360px;
background-color: #1da1f2;
margin-bottom: 12px;
margin-right: 10px;
}
#bottomFixed #navBar {
height: 50px;
width: 100%;
background-color: #15202b;
border-top: solid 1px #38444d;
}
#bottomFixed #tweetSentContainer {
height: 30px;
height: 0px;
bottom: 20;
z-index: 6;
background-color: #1da1f2;
width: 80%;
display: flex;
align-self: center;
display: none;
opacity: 0;
justify-content: space-between;
align-items: center;
padding-left: 25px;
padding-right: 25px;
margin-bottom: 12px;
border-radius: 5px;
transition: ease-in-out 0.3s;
}
#coverImgContainer {
height: 125px;
width: 100%;
}
#coverImgContainer img {
height: 100%;
width: 100%;
position: relative;
object-fit: cover;
}
#userProfile {
width: 100%;
background-color: #15202b;
color: white;
}
#userProfile #userImgContainer {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
#userProfile #userImgContainer button {
margin-top: 12px;
background-color: transparent;
border: solid 1px #1da1f2;
padding-left: 12px;
padding-right: 12px;
padding-top: 6px;
padding-bottom: 6px;
border-radius: 25px;
color: #1da1f2;
font-size: 0.8em;
}
#userProfile #userImgContainer h2 {
font-size: 1em;
}
#userProfile #userImgContainer #profileImgName {
position: relative;
bottom: 25;
}
#userProfile #profilePicContainer {
height: 80px;
width: 80px;
}
#userProfile #profilePicContainer img {
width: 100%;
border-radius: 100%;
border: solid 4px #15202b;
}
#userProfile #profileNav {
display: flex;
justify-content: space-between;
margin-top: 16px;
}
#userProfile #profileNav h4 {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 12px;
font-size: 16px;
color: #8997a2;
}
#userProfile #profileNav h4:nth-child(1) {
color: #1da1f2;
border-bottom: solid 2px #1da1f2;
padding-left: 25px;
padding-right: 25px;
}
#userProfile #profileNav h4:nth-child(4) {
padding-right: 25px;
}
#userProfile #userInfo p:nth-child(1) {
position: relative;
bottom: 12.5;
}
#userProfile #userInfo p:nth-child(2) {
position: relative;
bottom: 6.25;
display: flex;
}
#userProfile #userInfo p:nth-child(3) {
font-weight: bold;
margin-top: 4px;
font-size: 14px;
}
#userProfile #userInfo span {
font-weight: normal;
}
#userProfile #userInfo span:nth-child(1) {
margin-right: 6px;
}
#userProfile #userInfo svg {
width: 5%;
color: #8997a2;
fill: #8997a2;
margin-right: 5px;
display: none;
}
#timelineContainer {
background-color: #12161e;
height: 100vh;
width: 100%;
}
.tweetContainer {
display: flex;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 25px;
padding-right: 25px;
width: 100%;
background-color: #15202b;
border-top: solid 1px #38444d;
transition: ease-in-out 0.3s;
}
.tweetContainer .tweetName {
color: white;
}
.tweetContainer .tweetText {
color: white;
margin-bottom: 12px;
}
.tweetContainer #tweetText {
color: white;
margin-bottom: 12px;
}
.tweetContainer .tweetImgContainer {
width: 100%;
height: 200px;
display: flex;
border-radius: 12px;
overflow: hidden;
/*Add this to main container so the Border-Radius also rounds child elements*/
border: solid 1px #38444d;
}
.tweetContainer .tweetImgContainer #col-1ImgContainer {
width: 100%;
overflow: hidden;
}
.tweetContainer .tweetImgContainer #col-1ImgContainer img {
height: 100%;
width: 100%;
object-fit: cover;
border-right: solid 5px #12161e;
}
.tweetContainer .tweetImgContainer .col-2ImgContainer {
height: 50%;
overflow: hidden;
}
.tweetContainer .tweetImgContainer .col-2ImgContainer:nth-child(1) {
border-bottom: solid 5px #12161e;
}
.tweetContainer .tweetImgContainer .col-2ImgContainer img {
transform: scale(1.5, 1.5);
height: 100%;
width: 100%;
object-fit: cover;
}
.tweetProfileImgContainer {
min-width: 55px;
min-height: 55px;
max-width: 55px;
max-height: 55px;
padding-right: 12px;
}
.tweetProfileImgContainer .tweetProfileImg {
width: 100%;
border-radius: 100%;
}
/* Create Tweet Page */
#createTweetContainer {
height: 100vh;
width: 100%;
background-color: #15202b;
position: fixed;
z-index: 5;
display: none;
}
#createTweetContainer img {
margin-right: 12px;
margin-left: 25px;
}
#createTweetContainer #createTweetHeader {
height: 45px;
border-bottom: solid 1px #38444d;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
padding-left: 25px;
padding-right: 25px;
}
#createTweetContainer #createTweetHeader i {
color: #1da1f2;
}
#createTweetContainer #createTweetHeader button {
background-color: #1da1f2;
border: solid 1px #1da1f2;
padding-left: 24px;
padding-right: 24px;
padding-top: 6px;
padding-bottom: 6px;
border-radius: 25px;
color: white;
font-size: 0.8em;
font-weight: bold;
opacity: 0.5;
}
#profileTweetBoxContainer {
display: flex;
justify-content: space-between;
padding-top: 12px;
}
textarea {
margin-left: 25px;
width: 100%;
resize: none;
background-color: #15202b;
border: 0;
color: white;
outline: none;
padding-right: 25px;
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
position: relative;
top: 10;
caret-color: #1da1f2;
}
HTML:
<script src="https://kit.fontawesome.com/cd801faa65.js" crossorigin="anonymous"></script>
<div id="bottomFixed">
<div id="createTweetButton">
<i class="fas fa-feather"></i>
</div>
<div id="tweetSentContainer">
<p><i class="fas fa-check-circle"></i>Your Tweet was sent.</p>
<p>View</p>
</div>
<div id="navBar">
</div>
</div>
<section id="createTweetContainer">
<div id="createTweetHeader">
<i id="backArrow" class="fas fa-arrow-left"></i>
<button id="postTweetButton">Tweet</button>
</div>
<div id="profileTweetBoxContainer">
<figure class="tweetProfileImgContainer">
<img class="tweetProfileImg" src="https://cdn.pixabay.com/photo/2016/11/08/15/21/user-1808597_1280.png">
</figure>
<textarea id="tweetBox" cols="500" rows="10" placeholder="What's Happening?"></textarea>
</div>
</section>
<section id="timelineContainer">
<div id="pinnedTweet" class="tweetContainer">
<figure class="tweetProfileImgContainer">
<img class="tweetProfileImg" src="https://cdn.pixabay.com/photo/2016/11/08/15/21/user-1808597_1280.png">
</figure>
<div>
<h4 class="tweetName bodyText">Name <span class="greyText">#username</span></h4>
<p class="tweetText bodyText">Tweet Text Here</p>
<div class="tweetImgContainer">
<div id="col-1ImgContainer">
<img src="https://cdn.getyourguide.com/img/tour/5ac513c518061.jpeg/146.jpg">
</div>
</div>
</div>
</div>
<template id="tweet-template">
<div id="tweetContainer" class="tweetContainer">
<figure class="tweetProfileImgContainer">
<img class="tweetProfileImg" src="images/profilepicture.jpg">
</figure>
<div>
<h4 class="tweetName">Emmanuel</h4>
<p id="tweetText"></p>
</div>
</div>
</template>
</section>
I realised I was attempting to change the original template's p tag rather than the imported node. I added tweetInstance.querySelectorAll(‘p’)[0].innerHTML = tweetBoxInput; which changes the text of the new node.
I wrote this basic website, but the transition between the tabs from the browser of the phone seems sluggish. (On the other hand, the same page works good enough on my desktop).
What can I do in order to improve this?
Script:
function showPanel(panelIndex, colorCode) {
tabButtons.forEach(function (node) {
node.style.backgroundColor = "";
node.style.color = "";
});
tabButtons[panelIndex].style.backgroundColor = colorCode;
tabButtons[panelIndex].style.color = "white";
tabPanels.forEach(function (node) {
node.style.display = "none";
});
tabPanels[panelIndex].style.display = "block";
tabPanels[panelIndex].style.backgroundColor = colorCode;
}
Rather than looping two times, you can refactor your code to save the current button instance. Two forEach is too much code.
var tabButtons = document.querySelectorAll(".tabContainer .buttonContainer button");
var tabPanels = document.querySelectorAll(".tabContainer .tabPanel");
var lastPanel, lastButton;
function showPanel(currentButton, colorCode, panelIndex) {
if (lastButton) {
lastButton.style.backgroundColor = "";
lastButton.style.color = "";
}
lastButton = currentButton;
lastButton.style.backgroundColor = colorCode;
lastButton.style.color = "white";
if (lastPanel) {
lastPanel.style.display = "none";
}
lastPanel = tabPanels[panelIndex];
lastPanel.style.display = "block";
lastPanel.style.backgroundColor = colorCode;
}
showPanel(tabButtons[0], 'red', 0);
.title {
font-family: sans-serif;
color: blueviolet;
text-align: center;
}
.tabContainer {
width: 100%;
height: 350px;
}
.tabContainer .buttonContainer {
height: 15%;
}
.tabContainer .buttonContainer button {
width: 33.33%;
height: 100%;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 10px;
font-family: sans-serif;
font-size: 15px;
background-color: bisque;
}
.tabContainer .buttonContainer button:hover {
background-color: rosybrown;
}
.tabContainer .tabPanel {
height: 85%;
background-color: aquamarine;
color: black;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
box-sizing: border-box;
font-family: sans-serif;
font-size: 22px;
display: none;
}
.dataContainer {
font-size: 40px;
height: 85%;
width: 100%;
text-align: center;
background: Silver;
box-sizing: border-box;
font-family: sans-serif;
grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
.calculateHFOV .input {
margin: 10px;
padding: 10px;
background: LightSkyBlue;
}
.calculateFocalLength .input {
margin: 10px;
padding: 10px;
background: lemonchiffon;
}
.fov {
padding: 10px;
margin: 10px;
background: LightSalmon;
}
.natoTarget {
margin: 10px;
padding: 10px;
background: PaleTurquoise;
}
.humanTarget {
margin: 10px;
padding: 10px;
background: LightPink;
}
.objectTarget {
margin: 10px;
padding: 10px;
background: PaleGreen;
}
.settings .parameters {
margin: 10px;
padding: 10px;
background: PaleTurquoise;
}
.settings .linePairs {
margin: 10px;
padding: 10px;
background: LightPink;
}
.settings .targetSize {
margin: 10px;
padding: 10px;
background: PaleGreen;
}
<div class="tabContainer">
<div class="buttonContainer">
<button onclick="showPanel(this,'red', 0)" style="">Calculate HFOV</button>
<button onclick="showPanel(this,'green', 1)" style="">Calculate Focal Length</button>
<button onclick="showPanel(this,'yellow', 2)">Settings</button>
</div>
<div class="tabPanel" style="display: none; background-color: red;">
<div class="calculateHFOV">
<div class="dataContainer">
<div class="input">input</div>
<div class="fov">fov</div>
<div class="natoTarget">natoTarget</div>
<div class="humanTarget">humanTarget</div>
<div class="objectTarget">objectTarget</div>
</div>
</div>
</div>
<div class="tabPanel" style="display: none; background-color: green;">
<div class="calculateFocalLength">
<div class="dataContainer">
<div class="input">input</div>
<div class="fov">fov</div>
<div class="natoTarget">natoTarget</div>
<div class="humanTarget">humanTarget</div>
<div class="objectTarget">objectTarget</div>
</div>
</div>
</div>
<div class="tabPanel" style="display: block; background-color: yellow;">
<div class="settings">
<div class="dataContainer">
<div class="parameters">parameters</div>
<div class="linePairs">linePairs</div>
<div class="targetSize">targetSize</div>
</div>
</div>
</div>
</div>