Div inside a div not appearing? - javascript

I am trying to place a div(id="testDiv") inside of a div that slides down from the top using jQuery .slideToggle(). Presently, the div inside the sliding div does not appear at all. Here are some pictures to explain what I mean:
You can run this here, but this is a link to a Plunker with my code just in case:
https://plnkr.co/edit/fxulzV76HJ0APP0wqZkD?p=info
Here is the code:
(function($){
$(document).ready(function(){
$('.selector').click(function () {
$('.dropDown').slideToggle(300);
});
$("#infoButton").click(function(){
$('#infoDiv').slideToggle(300);
});
$("#searchButton").click(function(){
$('#searchDiv').slideToggle(300);
});
});
})(jQuery);
body{
margin:0;
padding: 0;
}
.dropDown{
padding: 10px;
background: black;
display: none;
position: relative;
width: 70%;
height: 70px;
margin: 0 auto;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
color: white;
box-shadow: 2px 2px 10px rgb(51, 51, 51);
clear: both;
z-index: 100;
}
.selector{
text-align: center;
position: absolute;
transform: scaleX(1.5);
padding: 4px;
left: 49%;
background-image: -moz-linear-gradient(center top , rgb(219, 79, 0), rgb(255, 185, 95));
box-shadow: 2px 2px 10px rgb(51, 51, 51);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
cursor: pointer;
width: 24px;
height: 24px;
color: white;
z-index: 100;
}
#leftDrop {
float: left;
text-align: center;
width: 33%;
margin-top: 20px;
}
#rightDrop {
float: right;
text-align: center;
width: 33%;
margin-top: 20px;
}
#centerDrop {
margin: 0 auto;
text-align: center;
width: 33%;
}
.dropButtonLeft {
transform: scale(1.6,1.6);
padding: 8px;
margin-left: 25px;
margin-top: -6px;
float: left;
cursor: pointer;
}
.dropButtonRight {
transform: scale(1.6,1.6);
padding: 8px;
margin-right: 25px;
margin-top: -6px;
float: right;
cursor: pointer;
}
.dropdowns div {
display: inline-block;
padding: 10px;
background-color: rgba(34, 34, 34, 0.8);
display: none;
position: relative;
width: 20%;
height: 18%;
margin-left: 16%;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
color: white;
box-shadow: 2px 2px 10px rgb(51, 51, 51);
z-index: 100;
text-align: center;
padding-left: 1%;
}
#infoDiv {
float: left;
margin-left: 17%;
}
#searchDiv {
float: right;
margin-right: 17%;
height: 200px;
}
#testDiv {
width: 100px;
height: 100px;
background: yellow;
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class = 'dropDown'>
<div id = 'leftDrop'>
<button type="button" id="infoButton">Click Me!</button>
</div>
<div id = 'rightDrop'>
<button type="button" id="searchButton">Click Me!</button>
</div>
<div id = 'centerDrop'>
</div>
</div>
<div class='selector'>
<span id="dropArrow" class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>
</div>
<div class="dropdowns">
<div id="infoDiv">
</div>
<div id="searchDiv">
<div id="testDiv">
<br>
<p>testDiv</p>
</div>
</div>
</div>
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery-ui.js"></script>
<script src="script.js"></script>
</body>
</html>


Set display: block or display:inherit; on your #test div CSS
(function($){
$(document).ready(function(){
$('.selector').click(function () {
$('.dropDown').slideToggle(300);
});
$("#infoButton").click(function(){
$('#infoDiv').slideToggle(300);
});
$("#searchButton").click(function(){
$('#searchDiv').slideToggle(300);
});
});
})(jQuery);
body{
margin:0;
padding: 0;
}
.dropDown{
padding: 10px;
background: black;
display: none;
position: relative;
width: 70%;
height: 70px;
margin: 0 auto;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
color: white;
box-shadow: 2px 2px 10px rgb(51, 51, 51);
clear: both;
z-index: 100;
}
.selector{
text-align: center;
position: absolute;
transform: scaleX(1.5);
padding: 4px;
left: 49%;
background-image: -moz-linear-gradient(center top , rgb(219, 79, 0), rgb(255, 185, 95));
box-shadow: 2px 2px 10px rgb(51, 51, 51);
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
cursor: pointer;
width: 24px;
height: 24px;
color: white;
z-index: 100;
}
#leftDrop {
float: left;
text-align: center;
width: 33%;
margin-top: 20px;
}
#rightDrop {
float: right;
text-align: center;
width: 33%;
margin-top: 20px;
}
#centerDrop {
margin: 0 auto;
text-align: center;
width: 33%;
}
.dropButtonLeft {
transform: scale(1.6,1.6);
padding: 8px;
margin-left: 25px;
margin-top: -6px;
float: left;
cursor: pointer;
}
.dropButtonRight {
transform: scale(1.6,1.6);
padding: 8px;
margin-right: 25px;
margin-top: -6px;
float: right;
cursor: pointer;
}
.dropdowns div {
display: inline-block;
padding: 10px;
background-color: rgba(34, 34, 34, 0.8);
display: none;
position: relative;
width: 20%;
height: 18%;
margin-left: 16%;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
color: white;
box-shadow: 2px 2px 10px rgb(51, 51, 51);
z-index: 100;
text-align: center;
padding-left: 1%;
}
#infoDiv {
float: left;
margin-left: 17%;
}
#searchDiv {
float: right;
margin-right: 17%;
height: 200px;
}
#testDiv {
width: 100px;
height: 100px;
background: yellow;
color: black;
display:inherit;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class = 'dropDown'>
<div id = 'leftDrop'>
<button type="button" id="infoButton">Click Me!</button>
</div>
<div id = 'rightDrop'>
<button type="button" id="searchButton">Click Me!</button>
</div>
<div id = 'centerDrop'>
</div>
</div>
<div class='selector'>
<span id="dropArrow" class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>
</div>
<div class="dropdowns">
<div id="infoDiv">
</div>
<div id="searchDiv">
<div id="testDiv">
<br>
<p>testDiv</p>
</div>
</div>
</div>
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery-ui.js"></script>
<script src="script.js"></script>
</body>
</html>


Set display: block; for #testDiv
Your .dropdowns div are hidden


#testDiv is set to display: none;
Update the styles for that div
#testDiv {
display: block;
}

Related

Why is my automatic chatbox not showing up?

So when i click "chat with us", the full chat box must appear but it doesn't. The console announces mistake as:'Uncaught TypeError: Cannot read property 'style' of null
at HTMLButtonElement. '
Anything wrong with my codes? somebody can help me? Thank you so much!
This is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Snake</title>
<link rel="stylesheet" href="chat.css">
<script src="https://kit.fontawesome.com/48a972c999.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="chat-bar-collapsible">
<button id="chat-bar-button" type="button" class="collapsible">Chat With Us!
<i id="chat-icon" style="color: #fff;" class="fas fa-fw fa-comment-o"></i>
</button>
</div>
<div class="content">
<div class="full-chat-block">
<!--Mesage Container-->
<div class="outer-container">
<div class="container">
<!--Messages-->
<div id="chatbox">
<h5 id="chat-timestamp"></h5>
<p id="botStarterMessages " class="botText"><span>loading...</span></p>
</div>
<!--User Input Box-->
<div class="chat-bar-input-block">
<div id="user-input">
<input type="text" id="textInput" class="input-box" placeholder="Tap 'enter' to send a mesage" />
<p></p>
</div>
<div class="chat-bar-icons">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
</html>
This is my css:
.chat-bar-collapsible {
position: fixed;
bottom: 0;
right: 50px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.collapsible {
background-color: rgb(82, 151, 255);
color: white;
cursor: pointer;
padding: 18px;
width: 350px;
text-align: left;
outline: none;
font-size: 18px;
border-radius: 10px 10px 0px 0px;
border: 3px solid white;
border-bottom: none;
}
.content {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
.full-chat-block {
width: 350px;
background: white;
text-align: center;
overflow: auto;
scrollbar-width: none;
height: max-content;
transition: max-height 0.2s ease-out;
}
.outer-container {
min-height: 500px;
bottom: 0%;
position: relative;
}
.chat-container {
max-height: 500px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
scroll-behavior: smooth;
hyphens: auto;
}
.chat-container::-webkit-scrollbar {
display: none;
}
.chat-bar-input-block {
display: flex;
float: left;
box-sizing: border-box;
justify-content: space-between;
width: 100%;
align-items: center;
background-color: rgb(235, 235, 235);
border-radius: 10px 10px 0px 0px;
padding: 10px 0px 10px 10px;
}
.chat-bar-icons {
display: flex;
justify-content: space-evenly;
box-sizing: border-box;
width: 25%;
float: right;
font-size: 20px;
}
#chat-icon:hover {
opacity: .7;
}
/* Chat bubbles */
#userInput {
width: 75%;
}
.input-box {
float: left;
border: none;
box-sizing: border-box;
width: 100%;
border-radius: 10px;
padding: 10px;
font-size: 16px;
color: #000;
background-color: white;
outline: none
}
.userText {
color: white;
font-family: Helvetica;
font-size: 16px;
font-weight: normal;
text-align: right;
clear: both;
}
.userText span {
line-height: 1.5em;
display: inline-block;
background: #5ca6fa;
padding: 10px;
border-radius: 8px;
border-bottom-right-radius: 2px;
max-width: 80%;
margin-right: 10px;
animation: floatup .5s forwards
}
.botText {
color: #000;
font-family: Helvetica;
font-weight: normal;
font-size: 16px;
text-align: left;
}
.botText span {
line-height: 1.5em;
display: inline-block;
background: #e0e0e0;
padding: 10px;
border-radius: 8px;
border-bottom-left-radius: 2px;
max-width: 80%;
margin-left: 10px;
animation: floatup .5s forwards
}
#keyframes floatup {
from {
transform: translateY(14px);
opacity: .0;
}
to {
transform: translateY(0px);
opacity: 1;
}
}
#media screen and (max-width:600px) {
.full-chat-block {
width: 100%;
border-radius: 0px;
}
.chat-bar-collapsible {
position: fixed;
bottom: 0;
right: 0;
width: 100%;
}
.collapsible {
width: 100%;
border: 0px;
border-top: 3px solid white;
border-radius: 0px;
}
}
This is my JS:
var coll = document.getElementsByClassName('collapsible')
for (let i = 0; i < coll.length; i++) {
coll[i].addEventListener('click', function() {
this.classList.toggle('active')
var content = this.nextElementSibling
if (content.style.maxHeight) {
content.style.maxHeight = null
} else {
content.style.maxHeight = content.scrollHeight + "px"
}
})
}

Using .nextSibling will look directly for the next child element under your parent div. Since this refers to your button inside of chat-bar-collapsible there are no more child elements that are adjacent to your button element under the char-bar-collapsible div. You need to walk up to the parent element using .parentNode, and then access the adjacent content div from that using .nextElementSibling:
var content = this.parentNode.nextElementSibling;
var coll = document.getElementsByClassName('collapsible');
for (let i = 0; i < coll.length; i++) {
coll[i].addEventListener('click', function() {
this.classList.toggle('active');
var content = this.parentNode.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null
} else {
content.style.maxHeight = content.scrollHeight + "px"
}
})
}
.chat-bar-collapsible {
position: fixed;
bottom: 0;
right: 50px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.collapsible {
background-color: rgb(82, 151, 255);
color: white;
cursor: pointer;
padding: 18px;
width: 350px;
text-align: left;
outline: none;
font-size: 18px;
border-radius: 10px 10px 0px 0px;
border: 3px solid white;
border-bottom: none;
}
.content {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: #f1f1f1;
}
.full-chat-block {
width: 350px;
background: white;
text-align: center;
overflow: auto;
scrollbar-width: none;
height: max-content;
transition: max-height 0.2s ease-out;
}
.outer-container {
min-height: 500px;
bottom: 0%;
position: relative;
}
.chat-container {
max-height: 500px;
width: 100%;
position: absolute;
bottom: 0;
left: 0;
scroll-behavior: smooth;
hyphens: auto;
}
.chat-container::-webkit-scrollbar {
display: none;
}
.chat-bar-input-block {
display: flex;
float: left;
box-sizing: border-box;
justify-content: space-between;
width: 100%;
align-items: center;
background-color: rgb(235, 235, 235);
border-radius: 10px 10px 0px 0px;
padding: 10px 0px 10px 10px;
}
.chat-bar-icons {
display: flex;
justify-content: space-evenly;
box-sizing: border-box;
width: 25%;
float: right;
font-size: 20px;
}
#chat-icon:hover {
opacity: .7;
}
/* Chat bubbles */
#userInput {
width: 75%;
}
.input-box {
float: left;
border: none;
box-sizing: border-box;
width: 100%;
border-radius: 10px;
padding: 10px;
font-size: 16px;
color: #000;
background-color: white;
outline: none
}
.userText {
color: white;
font-family: Helvetica;
font-size: 16px;
font-weight: normal;
text-align: right;
clear: both;
}
.userText span {
line-height: 1.5em;
display: inline-block;
background: #5ca6fa;
padding: 10px;
border-radius: 8px;
border-bottom-right-radius: 2px;
max-width: 80%;
margin-right: 10px;
animation: floatup .5s forwards
}
.botText {
color: #000;
font-family: Helvetica;
font-weight: normal;
font-size: 16px;
text-align: left;
}
.botText span {
line-height: 1.5em;
display: inline-block;
background: #e0e0e0;
padding: 10px;
border-radius: 8px;
border-bottom-left-radius: 2px;
max-width: 80%;
margin-left: 10px;
animation: floatup .5s forwards
}
#keyframes floatup {
from {
transform: translateY(14px);
opacity: .0;
}
to {
transform: translateY(0px);
opacity: 1;
}
}
#media screen and (max-width:600px) {
.full-chat-block {
width: 100%;
border-radius: 0px;
}
.chat-bar-collapsible {
position: fixed;
bottom: 0;
right: 0;
width: 100%;
}
.collapsible {
width: 100%;
border: 0px;
border-top: 3px solid white;
border-radius: 0px;
}
}
<script src="https://kit.fontawesome.com/48a972c999.js" crossorigin="anonymous"></script>
<div class="chat-bar-collapsible">
<button id="chat-bar-button" type="button" class="collapsible">Chat With Us!<i id="chat-icon" style="color: #fff;" class="fas fa-fw fa-comment-o"></i></button>
</div>
<div class="content">
<div class="full-chat-block">
<!--Mesage Container-->
<div class="outer-container">
<div class="container">
<!--Messages-->
<div id="chatbox">
<h5 id="chat-timestamp"></h5>
<p id="botStarterMessages " class="botText"><span>loading...</span></p>
</div>
<!--User Input Box-->
<div class="chat-bar-input-block">
<div id="user-input">
<input type="text" id="textInput" class="input-box" placeholder="Tap 'enter' to send a mesage" />
<p></p>
</div>
<div class="chat-bar-icons">
</div>
</div>
</div>
</div>
</div>
</div>

How to move a search icon to the right of the search bar in HTML?

So this is all the code for a website I'm making and I have a search bar in my nav section. I wanted to include an icon from Font Awesome and I've added this in there, but I can't seem to place it in the correct place, which is next to the search bar on the right. Is there any way I can fix this? Some help would be greatly appreciated :)
As follows is the Javascript, CSS and HTML code for the website.
function AboutHover() {
document.getElementById('about-button').firstElementChild.style.fontWeight = "bold";
}
function AboutNormal() {
document.getElementById('about-button').firstElementChild.style.fontWeight = "normal";
}
function GalleryHover() {
document.getElementById('gallery-button').firstElementChild.style.fontWeight = "bold";
}
function GalleryNormal() {
document.getElementById('gallery-button').firstElementChild.style.fontWeight = "normal";
}
function ContactHover() {
document.getElementById('contact-button').firstElementChild.style.fontWeight = "bold";
}
function ContactNormal() {
document.getElementById('contact-button').firstElementChild.style.fontWeight = "normal";
}
body, html{
height: 100%;
margin: 0;
padding: 0;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 1.5%;
}
header{
background:rgb(241, 200, 203);
position: relative;
overflow: hidden;
}
header::after{
content: "";
display: table;
clear:both;
}
.logo{
width: 9%;
height: 5.4%;
float: left;
padding: 0px;
}
nav{
float: inline-end;
overflow: auto;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav li{
display: inline-block;
margin-left: 6.3%;
padding-top: 1.8%;
font-size: 112.5%;
position: relative;
}
nav input[type=text]{
float: right;
margin-top: 2%;
background-color: transparent;
color: rgb(95, 62, 64);
font-size: 112.5%;
border: none;
border-bottom: solid 2px black;
margin-right: 10%;
}
nav input::placeholder{
color: rgb(95, 62, 64);
font-family: 'Work Sans', sans-serif;
}
nav i{
float: right;
}
nav a{
color: black;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover{
color: rgb(0, 0, 0);
}
nav a::before{
content: "";
display: block;
height: 10%;
background-color: rgb(0, 0, 0);
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before{
width: 100%;
}
.bg-one{
background-image: url("bg-one.jpg");
height: 100%;
padding-top: 0;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position:relative;
}
.transbox{
padding: 0.8%;
width: 30%;
background-color: rgba(255, 255, 255, 0.1);
border: 10px double rgb(240, 178, 182);
margin-left: 2.5%;
margin-right: auto;
margin-bottom: auto;
display: block;
position: absolute;
margin-top: 2.5%;
}
h1{
text-align: center;
font-size: 406.25%;
color:rgb(0, 0, 0, .7);
}
.first-block{
height: 12%;
background-color:rgb(241, 200, 203);
text-align: center;
border: 10px double white;
padding-top: 1.6%;
padding-bottom: 3.8%;
vertical-align: auto;
}
h3{
text-transform: uppercase;
font-size: 250%;
text-align: center;
color: rgb(199, 127, 131);
font-weight: 500;
}
.bg-two{
background-image: url("bg-two.jpg");
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position: relative;
}
.about-box{
width: 32%;
height: 40%;
background-color: rgba(241, 200, 203, 0.7);
position: absolute;
margin-top: 15%;
margin-left: 3.8%;
margin-right: auto;
margin-bottom: auto;
display: block;
border-radius: 10px;
padding: 1.35%;
}
h4{
font-size: 312%;
text-align: center;
font-weight: 300;
margin-top: 7%;
margin-bottom: 10%;
color:rgb(126, 81, 83);
}
.about-box p, .gallery-box p, .contact-box p{
font-size: 125%;
text-align: center;
color:rgb(95, 62, 64);
}
.about-box-two{
width: 92%;
height: 45%;
background-color: rgb(241, 200, 203);
position: absolute;
margin-left: 0%;
display: block;
border-radius: 10px;
}
.about-button{
width: 25%;
height: auto;
background-color: rgb(241, 200, 203);
position: absolute;
margin-top: 21%;
margin-left: 102%;
display: block;
padding: 20px;
border: 2px solid rgb(126, 81, 83);
border-radius: 10px;
}
.about-button a, .gallery-button a, .contact-button a{
font-size: 156.25%;
text-decoration: none;
text-transform: uppercase;
color: rgb(126, 81, 83);
}
.far{
padding-left: 20px;
padding-bottom: 2px;
}
.bg-three{
background-image: url("bg-three.jpg");
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position: relative;
}
.gallery-box{
width: 30%;
height: 40%;
background-color: rgba(241, 200, 203, .7);
position: absolute;
margin-top: 15%;
margin-left: 65%;
margin-bottom: auto;
display: block;
border-radius: 10px;
}
.gallery-box-two{
width: 91%;
height: 45%;
background-color: rgb(241, 200, 203);
position: absolute;
margin-left: 3.5%;
display: block;
border-radius: 10px;
padding: 1%;
}
.gallery-button{
width: auto;
height: auto;
background-color: rgb(241, 200, 203);
position: absolute;
margin-top: 30.55%;
margin-left: 50%;
display: block;
padding: 1.2%;
border: 2px solid rgb(126, 81, 83);
border-radius: 10px;
}
.bg-four{
background-image: url("bg-four.jpg");
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position: relative;
}
.contact-box{
width: 36%;
height: 35%;
background-color: rgba(241, 200, 203, 0.7);
position: absolute;
margin-top: 16%;
margin-left: 3%;
margin-right: auto;
margin-bottom: auto;
display: block;
border-radius: 10px;
}
.contact-box-two{
width: 93%;
height: auto;
background-color: rgb(241, 200, 203);
position: absolute;
margin-left: 3.4%;
margin-bottom: 15%;
display: block;
border-radius: 10px;
}
.contact-button{
width: auto;
height: auto;
background-color: rgb(241, 200, 203);
position: absolute;
margin-top: 28.8%;
margin-left: 630px;
display: block;
padding: 20px;
border: 2px solid rgb(126, 81, 83);
border-radius: 10px;
}
.footer{
height: 20%;
text-align: center;
background-color: rgb(241, 200, 203);
position: relative;
}
#media screen and (max-width: 768px) {
h1{
font-size: 312%;
}
a{
font-size: 80%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<title>New York - The City That Never Sleeps</title>
<link rel="stylesheet" href="main.css">
<script src="app.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght#400&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/f107c76e74.js" crossorigin="anonymous"></script>
<body>
<header>
<div class="container">
<img src="nyc-logo.png" alt="logo" class="logo">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contacts</li>
<input type="text" placeholder="Search" >
</ul>
<i class="fas fa-search"></i>
</nav>
</div>
</header>
<div class="bg-one">
<div class="transbox">
<h1>NEW YORK</h1>
</div>
</div>
<div class="first-block">
<h3>Welcome to the city that never sleeps...</h3>
</div>
<div class="bg-two">
<div class="about-box">
<h4>ABOUT</h4>
<div class="about-box-two">
<p> Well-known for its attractive landscapes and environment, New York attracts more than 67 million visitors every year.
<br>Click on the button to explore New York's finest attractions and landmarks in the 'About' page!</br>
</p>
</div>
<div class="about-button" id="about-button" onmouseover="AboutHover()" onmouseout="AboutNormal()">
ABOUT<i class="far fa-arrow-alt-circle-right"></i>
</div>
</div>
</div>
<div style="width:auto; height: 20px; background-color: rgb(241, 200, 203, .7);"></div>
<div class ="bg-three">
<div class="gallery-box">
<h4>GALLERY</h4>
<div class= "gallery-box-two">
<p>Take a peek into some first-hand images taken by tourists in New York.
<br>Click on the button to discover New York's beautiful features...</br></p>
</div>
</div>
<div class= "gallery-button" id="gallery-button" onmouseover="GalleryHover()" onmouseout="GalleryNormal()">
GALLERY<i class="far fa-arrow-alt-circle-right"></i>
</div>
</div>
<div style="width: auto; height: 20px; background-color: rgba(241, 200, 203, .7);"></div>
<div class="bg-four">
<div class = "contact-box">
<h4>CONTACT</h4>
<div class = "contact-box-two">
<p>To find out the places where you can experience the best of New York, click on the button!</p>
</div>
</div>
<div class = "contact-button" id="contact-button" onmouseover="ContactHover()" onmouseout="ContactNormal()">
CONTACT<i class="far fa-arrow-alt-circle-right"></i>
</div>
</div>
<div class="footer">
<p> </p>
</div>
</body>
</html>
What the header currently looks like

There are a few ways to do this, but going off the code you already have, I will suggest just a few tweaks that should make this possible:
Take the input out of the <ul> in your nav. Since it isn't in a <li> tag, it is actually invalid html to do it that way
Put a <div> after the <ul> and place the <input> and the icon inside it
Adjust the css so that the float: right; is on your <div> instead of on the input and i elements. Also move any spacing related styles onto the div
In the example below, I gave the new div a class of .search and moved some styles on to it from your input. I also removed the float from the icon style.
function AboutHover() {
document.getElementById('about-button').firstElementChild.style.fontWeight = "bold";
}
function AboutNormal() {
document.getElementById('about-button').firstElementChild.style.fontWeight = "normal";
}
function GalleryHover() {
document.getElementById('gallery-button').firstElementChild.style.fontWeight = "bold";
}
function GalleryNormal() {
document.getElementById('gallery-button').firstElementChild.style.fontWeight = "normal";
}
function ContactHover() {
document.getElementById('contact-button').firstElementChild.style.fontWeight = "bold";
}
function ContactNormal() {
document.getElementById('contact-button').firstElementChild.style.fontWeight = "normal";
}
body, html{
height: 100%;
margin: 0;
padding: 0;
font-family: 'Work Sans', sans-serif;
font-weight: 400;
}
.container {
width: 80%;
margin: 0 1.5%;
}
header{
background:rgb(241, 200, 203);
position: relative;
overflow: hidden;
}
header::after{
content: "";
display: table;
clear:both;
}
.logo{
width: 9%;
height: 5.4%;
float: left;
padding: 0px;
}
nav{
float: inline-end;
overflow: auto;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav li{
display: inline-block;
margin-left: 6.3%;
padding-top: 1.8%;
font-size: 112.5%;
position: relative;
}
nav .search{
float: right;
margin-top: 2%;
margin-right: 10%;
}
nav input[type=text]{
background-color: transparent;
color: rgb(95, 62, 64);
font-size: 112.5%;
border: none;
border-bottom: solid 2px black;
}
nav input::placeholder{
color: rgb(95, 62, 64);
font-family: 'Work Sans', sans-serif;
}
nav a{
color: black;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover{
color: rgb(0, 0, 0);
}
nav a::before{
content: "";
display: block;
height: 10%;
background-color: rgb(0, 0, 0);
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before{
width: 100%;
}
.bg-one{
background-image: url("bg-one.jpg");
height: 100%;
padding-top: 0;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position:relative;
}
.transbox{
padding: 0.8%;
width: 30%;
background-color: rgba(255, 255, 255, 0.1);
border: 10px double rgb(240, 178, 182);
margin-left: 2.5%;
margin-right: auto;
margin-bottom: auto;
display: block;
position: absolute;
margin-top: 2.5%;
}
h1{
text-align: center;
font-size: 406.25%;
color:rgb(0, 0, 0, .7);
}
.first-block{
height: 12%;
background-color:rgb(241, 200, 203);
text-align: center;
border: 10px double white;
padding-top: 1.6%;
padding-bottom: 3.8%;
vertical-align: auto;
}
h3{
text-transform: uppercase;
font-size: 250%;
text-align: center;
color: rgb(199, 127, 131);
font-weight: 500;
}
.bg-two{
background-image: url("bg-two.jpg");
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position: relative;
}
.about-box{
width: 32%;
height: 40%;
background-color: rgba(241, 200, 203, 0.7);
position: absolute;
margin-top: 15%;
margin-left: 3.8%;
margin-right: auto;
margin-bottom: auto;
display: block;
border-radius: 10px;
padding: 1.35%;
}
h4{
font-size: 312%;
text-align: center;
font-weight: 300;
margin-top: 7%;
margin-bottom: 10%;
color:rgb(126, 81, 83);
}
.about-box p, .gallery-box p, .contact-box p{
font-size: 125%;
text-align: center;
color:rgb(95, 62, 64);
}
.about-box-two{
width: 92%;
height: 45%;
background-color: rgb(241, 200, 203);
position: absolute;
margin-left: 0%;
display: block;
border-radius: 10px;
}
.about-button{
width: 25%;
height: auto;
background-color: rgb(241, 200, 203);
position: absolute;
margin-top: 21%;
margin-left: 102%;
display: block;
padding: 20px;
border: 2px solid rgb(126, 81, 83);
border-radius: 10px;
}
.about-button a, .gallery-button a, .contact-button a{
font-size: 156.25%;
text-decoration: none;
text-transform: uppercase;
color: rgb(126, 81, 83);
}
.far{
padding-left: 20px;
padding-bottom: 2px;
}
.bg-three{
background-image: url("bg-three.jpg");
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position: relative;
}
.gallery-box{
width: 30%;
height: 40%;
background-color: rgba(241, 200, 203, .7);
position: absolute;
margin-top: 15%;
margin-left: 65%;
margin-bottom: auto;
display: block;
border-radius: 10px;
}
.gallery-box-two{
width: 91%;
height: 45%;
background-color: rgb(241, 200, 203);
position: absolute;
margin-left: 3.5%;
display: block;
border-radius: 10px;
padding: 1%;
}
.gallery-button{
width: auto;
height: auto;
background-color: rgb(241, 200, 203);
position: absolute;
margin-top: 30.55%;
margin-left: 50%;
display: block;
padding: 1.2%;
border: 2px solid rgb(126, 81, 83);
border-radius: 10px;
}
.bg-four{
background-image: url("bg-four.jpg");
height: 100%;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-size: cover;
position: relative;
}
.contact-box{
width: 36%;
height: 35%;
background-color: rgba(241, 200, 203, 0.7);
position: absolute;
margin-top: 16%;
margin-left: 3%;
margin-right: auto;
margin-bottom: auto;
display: block;
border-radius: 10px;
}
.contact-box-two{
width: 93%;
height: auto;
background-color: rgb(241, 200, 203);
position: absolute;
margin-left: 3.4%;
margin-bottom: 15%;
display: block;
border-radius: 10px;
}
.contact-button{
width: auto;
height: auto;
background-color: rgb(241, 200, 203);
position: absolute;
margin-top: 28.8%;
margin-left: 630px;
display: block;
padding: 20px;
border: 2px solid rgb(126, 81, 83);
border-radius: 10px;
}
.footer{
height: 20%;
text-align: center;
background-color: rgb(241, 200, 203);
position: relative;
}
#media screen and (max-width: 768px) {
h1{
font-size: 312%;
}
a{
font-size: 80%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<title>New York - The City That Never Sleeps</title>
<link rel="stylesheet" href="main.css">
<script src="app.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght#400&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/f107c76e74.js" crossorigin="anonymous"></script>
<body>
<header>
<div class="container">
<img src="nyc-logo.png" alt="logo" class="logo">
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contacts</li>
</ul>
<div class="search">
<input type="text" placeholder="Search">
<i class="fas fa-search" aria-hidden="true"></i>
</div>
</nav>
</div>
</header>
<div class="bg-one">
<div class="transbox">
<h1>NEW YORK</h1>
</div>
</div>
<div class="first-block">
<h3>Welcome to the city that never sleeps...</h3>
</div>
<div class="bg-two">
<div class="about-box">
<h4>ABOUT</h4>
<div class="about-box-two">
<p> Well-known for its attractive landscapes and environment, New York attracts more than 67 million visitors every year.
<br>Click on the button to explore New York's finest attractions and landmarks in the 'About' page!</br>
</p>
</div>
<div class="about-button" id="about-button" onmouseover="AboutHover()" onmouseout="AboutNormal()">
ABOUT<i class="far fa-arrow-alt-circle-right"></i>
</div>
</div>
</div>
<div style="width:auto; height: 20px; background-color: rgb(241, 200, 203, .7);"></div>
<div class ="bg-three">
<div class="gallery-box">
<h4>GALLERY</h4>
<div class= "gallery-box-two">
<p>Take a peek into some first-hand images taken by tourists in New York.
<br>Click on the button to discover New York's beautiful features...</br></p>
</div>
</div>
<div class= "gallery-button" id="gallery-button" onmouseover="GalleryHover()" onmouseout="GalleryNormal()">
GALLERY<i class="far fa-arrow-alt-circle-right"></i>
</div>
</div>
<div style="width: auto; height: 20px; background-color: rgba(241, 200, 203, .7);"></div>
<div class="bg-four">
<div class = "contact-box">
<h4>CONTACT</h4>
<div class = "contact-box-two">
<p>To find out the places where you can experience the best of New York, click on the button!</p>
</div>
</div>
<div class = "contact-button" id="contact-button" onmouseover="ContactHover()" onmouseout="ContactNormal()">
CONTACT<i class="far fa-arrow-alt-circle-right"></i>
</div>
</div>
<div class="footer">
<p> </p>
</div>
</body>
</html>

HTML and JavaScript Issue 'Uncaught TypeError: Cannot set property 'textContent' of null' found in console

So I have been following this youtube tutorial on how to create a login/sign up form and I've run into a problem. Whilst coding the JS, I tried testing out the continue button without any values submitted into the input groups, and nothing happened. So I went to check the console and I was met with this error message, "Uncaught TypeError: Cannot set property 'textContent' of null". The error occurs around the 'messageElement.textContent = message;' area. Any help would be greatly appreciated.
function setFormMessage(formElement, type, message) {
const messageElement = formElement.querySelector(".form__message");
messageElement.textContent = message;
messageElement.classList.remove("form__message--success", "form__message--error");
messageElement.classList.add(`form__message--${type}`);
}
function setInputError(inputElement, message) {
inputElement.classList.add("form__input--error");
inputElement.parentElement.querySelector(".form__input-error-message").textContent = message;
}
function clearInputError(inputElement) {
inputElement.classList.remove("form__input--error");
inputElement.parentElement.querySelector(".form__input-error-message").textContent = "";
}
document.addEventListener("DOMContentLoaded", () => {
const loginForm = document.querySelector("#login");
const createAccountForm = document.querySelector("#createAccount");
document.querySelector("#linkCreateAccount").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.add("form--hidden");
createAccountForm.classList.remove("form--hidden");
});
document.querySelector("#linkLogin").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.remove("form--hidden");
createAccountForm.classList.add("form--hidden");
});
loginForm.addEventListener("submit", e => {
e.preventDefault();
// Perform your AJAX/Fetch login
setFormMessage(loginForm, "error", "Invalid username/password combination");
});
document.querySelectorAll(".form__input").forEach(inputElement => {
inputElement.addEventListener("blur", e => {
if (e.target.id === "signupUsername" && e.target.value.length > 0 && e.target.value.length < 10) {
setInputError(inputElement, "Username must be at least 10 characters in length");
}
});
inputElement.addEventListener("input", () => {
clearInputError(inputElement);
});
});
});
#import url('https://fonts.googleapis.com/css2?family=Belleza&display=swap') * {
box-sizing: border-box;
}
/*Navugation Bar*/
nav {
z-index: 1;
height: 120px;
background: black;
box-shadow: grey;
overflow: hidden;
background-color: black;
position: sticky;
top: 0;
width: 100%;
}
nav ul {
float: centre;
text-align: center;
}
nav ul li {
display: inline-block;
line-height: 0px;
margin: 0px 15px;
padding: 30px;
}
nav ul li a {
position: sticky;
color: grey;
font-size: 20px;
text-transform: uppercase;
padding: 50px;
text-decoration: none;
width: 100px;
}
nav ul li a:hover {
color: white;
font-size: 30px
}
/*Home Page*/
.header-image {
padding: 0px;
position: sticky;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: auto;
width: 100%;
background-color: black;
height: 290px
}
#Home-page {
font-size: 2em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
.first-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 10px solid;
color: grey;
padding: 50px;
margin-top: 20%;
margin-bottom: 30%;
}
.first-container-h1 {
color: white;
text-align: center;
font-size: 4em;
border-bottom: 20px solid white;
}
.first-container-h2 {
color: white;
text-align: center;
font-size: 4em;
}
#second-container-main {
width: 80%;
margin: auto;
min-width: 460px;
margin-top: 5%;
margin-bottom: 10%;
}
.second-container-title {
background: white;
text-align: center;
font-size: 40px;
height: 6pc;
line-height: 90px;
}
.second-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 2px solid;
color: grey;
padding: 50px;
font-size: 20px;
}
.second-container:hover {
font-size: 1em;
color: white;
}
.logo {
float: center;
width: 20%;
float: center;
text-align: center;
color: white;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
background-color: black;
height: 100px;
border: none
}
/* Footer*/
.footer-wrapper {
width: 100%;
margin: 0 auto;
display: block;
}
footer {
width: 100%;
height: 300px;
float: right;
text-align: center;
position: relative;
bottom: 0;
background-color: black;
}
/*About Page*/
.About-me-page-header {
font-size: 1em;
margin: 0;
background-position: center;
background-size: cover;
background-color: grey;
position: relative;
text-align: left;
padding-top: 50px;
padding-left: 50px;
height: 400px;
border: white 10px solid;
background-color: rgb(0, 0, 0, .7);
color: white;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}
#About-page {
font-size: 1em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
#About-page-main {
width: 80%;
margin: auto;
min-width: 460px;
margin-top: 5%;
margin-bottom: 10%;
}
.About-page-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 2px solid;
color: grey;
padding: 50px;
font-size: 1em;
}
.About-page-container:hover {
font-size: 30px;
color: white;
}
.about-page-title {
background: white;
text-align: center;
font-size: 40px;
height: 6pc;
line-height: 90px;
}
.AB-container-h {
color: white;
text-align: center;
}
/* Resources*/
.R-first-container {
height: 75hv;
background: rgb(0, 0, 0, .7);
border: white 10px solid;
color: grey;
padding: 50px;
margin-top: 20%;
margin-bottom: 30%;
}
.R-first-container-h1 {
color: white;
text-align: center;
font-size: 4em;
}
/*Login Page*/
.About-me-page-header {
font-size: 1em;
margin: 0;
background-position: center;
background-size: cover;
background-color: grey;
position: relative;
text-align: left;
padding-top: 50px;
padding-left: 50px;
height: 400px;
border: white 10px solid;
background-color: rgb(0, 0, 0, .7);
color: white
}
#About-page {
font-size: 1em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
#About-page-main {
margin: auto;
min-width: 460px;
margin-top: 5%;
margin-bottom: 10%;
}
/* Login in and Sign Up Form*/
#Login-page {
font-size: 2em;
margin: 0;
margin-bottom: 250px;
background: url(About\ Page\ Background.png)no-repeat;
background-position: center;
background-size: cover;
}
#Login-page-main {
--color-primary-dark: #009579;
--color-primary-dark: #007f67;
--color-secondary: #252c6a;
--color-primary-dark: #cc3333;
--color-success: #4bb544;
--color-error: red;
border-radius: 4px;
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.container {
max-width: 400px;
margin: 2rem;
padding: 5rem;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
border-radius: var(--border-radius);
background-color: rgba(0, 0, 0, .7);
color: white;
border: 3px solid white;
width: 1000px
}
.form--hidden {
display: none
}
.form>*:firstchild {
margin-top: 0;
}
.form>*:lastchild {
margin-bottom: 0;
}
.form__title {
margin-bottom: 2rem;
text-align: center;
font-size: 3rem;
}
.form__message {
margin-bottom: 1rem;
}
.form__message--success {
color: var(--color-success);
}
.form__message--error {
text-align: center;
color: var(--color-error);
}
.form__input-group {
margin-bottom: 2rem;
}
input,
select,
textarea {
color: white;
}
.form__input-error-message {
color: var(--color-error);
border-bottom: var(--color-error)
}
.form__input-error-message {
margin-top: 2rem;
font-size: 1.5rem;
color: var(--color-error);
}
.form__button {
width: 100%;
padding: 1rem 2rem;
font-weight: bold;
font-size: 1.1rem;
color: white;
background-color: rgb(0, 0, 0, .7);
outline: none;
cursor: pointer;
border: none;
border-radius: 20px
}
.form__button:hover {
background-color: white;
color: black
}
.form__button:active {
transform: scale(0.98)
}
.form__text {
font-size: 20px;
text-align: center;
cursor: pointer;
}
.form-text,
.form-textarea {
border-style: none;
}
.form__link {
text-decoration: none;
color: white
}
.form__link:hover {
text-decoration: underline;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Clarte Mentale - Login</title>
<link rel="stylesheet" href="Style.css" />
</head>
<body id="Login-page">
<div class="header-image">
<a href="Home.html">
<img src="Website Header.png">
</a>
</div>
<nav>
<ul>
<li>Welcome</li>
<li>About</li>
<li>Resources</li>
<li>Login</li>
</ul>
</nav>
<div class="About-me-page-header">
<h1 style="font-size:48px">Login Page</h1>
<p style="font-size:35px">
Contents:
</p>
<ul style="font-size:25px">
<li>Login</li>
<li>Sign Up</li>
</ul>
</div>
<main id="Login-page-main">
<div class="container">
<div class="form-container">
<!-- Login FormUp Form-->
<form class="form" id="login">
<h1 class="form__title">Login</h1>
<div class="form__messsage form__message--error"></div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Username or Email" input style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width:100%;">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Password" style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width: 100%">
<div class="form__input-error-message"></div>
</div>
<button class="form__button" type="submit">Continue</button>
<p class="form__text" style="margin-top: 35px;">
<a class="form__link" id="linkCreateAccount">Don't have an account? Create account</a>
</p>
</form>
<!-- Sign Up Form-->
<form class="form form--hidden" id="createAccount">
<h1 class="form__title">Create Account</h1>
<div class="form__messsage form__message--error"></div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Username" input style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width:100%;">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Email" input style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width:100%;">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Password" style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width: 100%">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Confirm password" style="height:30px;font-size:14pt; border:none; border-bottom: 4px solid black; background-color: rgba(0,0,0,0); width: 100%">
<div class="form__input-error-message"></div>
</div>
<button class="form__button" type="submit">Continue</button>
<p class="form__text" style="margin-top: 35px;">
<a class="form__link" id="linkLogin">Already have an account? Sign</a>
</p>
</form>
</main>
<footer>
<button class="logo" class="footer-wrapper" onclick="topFunction()" id="myBtn" title="Go to top">
<img src="Logo.png">
</button>
</footer>
<script src="Javascript.js"></script>
<script src="Login.js"></script>
</body>
</html>

You have <div class="form__messsage ... "> instead of <div class="form__message ... ">. Fixing that should work. GL.

Try and replace DomContentLoaded with load

Fix textbox at the bottom of chatbox and implement scroll [duplicate]

This question already has answers here:
How can I send an inner <div> to the bottom of its parent <div>?
(9 answers)
Closed 2 years ago.
I need the textbox to be fixed to the bottom of the chatbox and stay there irrespective of how many messages there are, right now it is after the last message. And also it would be great if someone can help me implement scroll in this that moves the view down to the last message. Right now it would just go out of the box if I add more messages than the desired height.
.chatbox {
position: relative;
background-color: #fff;
max-width: 350px;
height: 400px;
margin: 20px;
border-radius: 10px;
font-family: Avenir;
font-size: 14px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.nav {
background-color: #0077fb;
height: 30px;
padding: 10px;
color: #ffff;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
display: flex;
align-items: center;
}
.chatbody {
padding: 10px 10px;
}
#bot {
padding: 10px;
float: left;
margin: 5px;
max-width: 90%;
display: table;
clear: both;
margin-left: 15px;
background-color: #edefed;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
#user {
padding: 10px;
float: right;
max-width: 70%;
background-color: #0077fb;
margin: 5px;
color: white;
margin-right: 15px;
display: table;
clear: both;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
}
#text {
width: 90%;
outline: none;
border: none;
padding: 10px;
border-radius: 50px;
margin-top: 7px;
margin-left: 10px;
}
.icon {
padding: 15px;
color: #0077fb;
right: -30px;
min-width: 50px;
position: absolute;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<container>
<div class="chatbox">
<div class="nav">
<span>Alice</span>
</div>
<div class="chatbody">
<div id="bot">Hi there</div>
<div id="bot">How are you doing ?</div>
<div id="user">I am doing good</div>
<div id="bot">Awesome. So how can I help you today ?</div>
</div>
<div>
<input type="text" id="text" name="" placeholder="Message" autocomplete="off">
<i class="fa fa-send icon"></i>
</div>
</div>
</container>

I've added a class to one of your div's called .message and used this code:
.message {
position: absolute;
bottom: 0;
width: 100%;
}
working demo
.chatbox {
position: relative;
background-color: #fff;
max-width: 350px;
height: 400px;
margin: 20px;
border-radius: 10px;
font-family: Avenir;
font-size: 14px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.nav {
background-color: #0077fb;
height: 30px;
padding: 10px;
color: #ffff;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
display: flex;
align-items: center;
}
.chatbody {
padding: 10px 10px;
}
#bot {
padding: 10px;
float: left;
margin: 5px;
max-width: 90%;
display: table;
clear: both;
margin-left: 15px;
background-color: #edefed;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
}
#user {
padding: 10px;
float: right;
max-width: 70%;
background-color: #0077fb;
margin: 5px;
color: white;
margin-right: 15px;
display: table;
clear: both;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
}
#text {
width: 90%;
outline: none;
border: none;
padding: 10px;
border-radius: 50px;
margin-top: 7px;
margin-left: 10px;
}
.icon {
padding: 15px;
color: #0077fb;
right: -30px;
min-width: 50px;
position: absolute;
}
.message {
position: absolute;
bottom: 0;
width: 100%;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<container>
<div class="chatbox">
<div class="nav">
<span>Alice</span>
</div>
<div class="chatbody">
<div id="bot">Hi there</div>
<div id="bot">How are you doing ?</div>
<div id="user">I am doing good</div>
<div id="bot">Awesome. So how can I help you today ?</div>
</div>
<div class="message">
<input type="text" id="text" name="" placeholder="Message" autocomplete="off">
<i class="fa fa-send icon"></i>
</div>
</div>
</container>

Make a p tag into an input field by pressing on a random card

I am new to JS, HTML and CSS. So far I created a button which creates random cards. On the card is a p tag "title". When you click on the card you will see two input fields and a save- and a delete button.
I need help with the design. I tried my best but i cant make this two buttons and the two input fields look good. Can you help me on that.
When I click on a card I want the p tag title goes into one of the input fields. When I click on the input field the p tag should disappear again.
And what I want to make last is that only one card can be in edit mode.
This is my Code:
$(document).ready(function() {
$("button.plus").on("click", function() {
var newCard = $('#cardPrototype').clone(true);
$(newCard).css('display', 'block').removeAttr('id');
$('#newCardHolder').append(newCard);
});
$('body').on('click', '.card', function() {
$(this).find('form').show();
$(this).find('span').remove();
});
/*delete button*/
$('body').on('click', '.card .delete', function() {
$(this).closest('.card').remove();
});
});
.item {
width: 300px;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 10px;
float: left;
padding: 10px;
background-color: #BBBBBB;
border: 1px solid #ccc;
border-radius: 10px;
}
button div.item {
right: 0;
margin-right: 10px;
height: 80px;
width: 80px;
border-top-left-radius: 55px;
border: 5px solid white;
background-color: #666666;
font-size: 70px;
color: white;
text-align: center;
line-height: 75px;
bottom: 10px;
position: fixed;
cursor: pointer;
z-index: 2;
}
.input-feld {
font-family: TheSans Swisscom;
margin: 3px;
width: 260px;
}
.card {
width: 300px;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 10px;
float: left;
padding: 10px;
background-color: #BBBBBB;
border: 1px solid #ccc;
border-radius: 10px;
position: relative;
}
.delete {
font-family: 'TheSans Swisscom';
right: 12px;
top: 0;
position: absolute;
}
.speichern {
font-family: 'TheSans Swisscom';
background-color: greenyellow;
border-radius: 5px;
}
.abbrechen {
font-family: "TheSans Swisscom";
background-color: red;
border-radius: 5px;
margin-left: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="plus">
<div class="item">
<p>+</p>
</div>
</button>
<div id="newCardHolder">
</div>
<div id="cardPrototype" class="card" style="display:none;">
<p class="delete">x</p>
<span>Title</span>
<form name="theform" style="display:none;">
<input class="input-feld" type="text">
<br>
<input class="input-feld " type="text">
<br>
<input class="speichern"type="button" onClick="new Person()" value="Speichern">
<input class="abbrechen"type="button" onClick="new Person()" value="Abbrechen">
</form>
</div>

Try This - May be this might help you
I have changed
some design changes with CSS
Input will have a placeholder for the corresponding title in span tag
Only One Item .class will be visible in edit mode
$(".plus").on("click", function() {
var newCard = $('#cardPrototype').clone(true);
$(newCard).css('display', 'block').removeAttr('id');
$('#newCardHolder').append(newCard);
});
$('body').on('click', '.card', function() {
$(this).find('.input-feld').attr("placeholder", $(this).find('span').text());
$(this).find('span').hide();
$(this).find('.minimize').show();
$(this).find('form').show();
});
$('.card').on('click', function() {
$('.card').find('form').hide();
$('.card').find('span').show();
$('.card').find('.minimize').hide();
});
/*delete button*/
$('body').on('click', '.card .delete', function() {
$(this).closest('.card').remove();
});
/*min button*/
$('body').on('click', '.card .minimize', function() {
return false;
});
.item {
width: 300px;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 10px;
float: left;
padding: 10px;
background-color: #BBBBBB;
border: 1px solid #ccc;
border-radius: 10px;
}
.item p {
margin: 0px;
}
div.item {
right: 0;
margin-right: 10px;
height: 80px;
width: 80px;
border-top-left-radius: 55px;
border: 5px solid white;
background-color: #666666;
font-size: 70px;
color: white;
text-align: center;
line-height: 75px;
bottom: 10px;
position: fixed;
cursor: pointer;
z-index: 2;
}
.input-feld {
font-family: TheSans Swisscom;
margin: 5px 3px;
padding: 3px;
width: 250px;
}
.card {
width: 300px;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 10px;
float: left;
padding: 10px;
background-color: #F4F4f4;
border: 1px solid #ccc;
border-radius: 3px;
position: relative;
}
.delete {
font-family: 'TheSans Swisscom';
right: 12px;
top: -10px;
color: red;
position: absolute;
font-weight: bold;
cursor: pointer;
}
.minimize {
font-family: 'TheSans Swisscom';
right: 28px;
top: -10px;
color: grey;
position: absolute;
font-weight: bold;
cursor: pointer;
display: none;
}
.speichern {
font-family: 'TheSans Swisscom';
background-color: lightgreen;
border-radius: 5px;
color: darkgreen;
border-color: lightgreen;
margin-top: 5px;
}
.abbrechen {
font-family: "TheSans Swisscom";
background-color: orangered;
border-radius: 5px;
margin-left: 10px;
color: white;
border-color: orangered;
margin-top: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="plus">
<div class="item">
<p>+</p>
</div>
</div>
<div id="newCardHolder">
</div>
<div id="cardPrototype" class="card" style="display:none;">
<p class="delete" title="delete">×</p>
<p class="minimize" title="minimize">–</p>
<span>Title</span>
<form name="theform" style="display:none;">
<input class="input-feld" type="text">
<br>
<input class="input-feld" type="text">
<br>
<input class="speichern" type="button" onClick="new Person()" value="Speichern">
<input class="abbrechen" type="button" onClick="new Person()" value="Abbrechen">
</form>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
</div>
</body>
</html>

Categories