How to add a whole section using JavaScript? - javascript

So I am trying to write a script to add a whole, newly added, section to Adobe Analytics. I am not sure I can do it though, so I will appreciate your help. I thought I should add a class name to the section and use document.getElementsbyClassName but it does not seem to work? I also need to add the nested divs and their styles again using JS?
Here is my code:
<section class="flex-columns" style="
background-color: crimson;
height: 450px;
display: flex;
justify-content: center;
align-items: center;
">
<div style="
top: 132px;
left: 340px;
width: 400px;
height: 400px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border-radius: 10px;
opacity: 1;
margin-left: 5px;
margin-right: 15px;
">
<p style="
top: 187px;
left: 391px;
width: 31px;
height: 138px;
text-align: left;
font: normal normal bold 120px/36px Value;
letter-spacing: 0px;
opacity: 1;
margin-top: 65px;
margin-left: 30px;
color: black;
border-style: solid;
border-color: black;
">1</p>
<p style="
top: 326px;
left: 391px;
width: 298px;
height: 152px;
text-align: left;
font: normal normal bold 45px/50px Value;
letter-spacing: 0px;
color: #888888;
opacity: 1;
margin-left: 30px;
">Find your nearest store</p>
</div>
<div style="
top: 132px;
left: 340px;
width: 400px;
height: 400px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border-radius: 10px;
opacity: 1;
margin-left: 5px;
margin-right: 15px;
">
<p style="
top: 187px;
left: 811px;
width: 66px;
height: 138px;
text-align: left;
font: normal normal bold 120px/36px Value;
letter-spacing: 0px;
color: black;
opacity: 1;
margin-top: 65px;
margin-left: 30px;
">2</p>
<p style="
top: 326px;
left: 811px;
width: 298px;
height: 152px;
text-align: left;
font: normal normal bold 45px/50px Value;
letter-spacing: 0px;
color: #888888;
opacity: 1;
margin-left: 30px;
">Book a free hearing test</p>
</div>
<div style="
top: 132px;
left: 340px;
width: 400px;
height: 400px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border-radius: 10px;
opacity: 1;
margin-left: 5px;
margin-right: 15px;
">
<p style="
top: 187px;
left: 1231px;
width: 68px;
height: 138px;
text-align: left;
font: normal normal bold 120px/36px Value;
letter-spacing: 0px;
color: black;
border: 2px;
border-color: black;
margin-top: 65px;
margin-left: 30px;
">3</p>
<p style="
top: 326px;
left: 1231px;
width: 298px;
height: 152px;
text-align: left;
font: normal normal bold 45px/50px Value;
letter-spacing: 0px;
color: #888888;
opacity: 1;
margin-left: 30px;
/* margin-bottom: 0px; */
">Get supported by our experts</p>
</div>
</section>


Since the post editing queue is full, I am sharing the current work in this area again. Could you explain the problem more clearly?
/* I don't understand what the problem is and what you want to do! */
.section-style {
background-color: crimson;
height: 450px;
display: flex;
justify-content: center;
align-items: center;
}
/* Common */
.columns {
top: 132px;
left: 340px;
width: 400px;
height: 400px;
background: #FFFFFF 0% 0% no-repeat padding-box;
border-radius: 10px;
opacity: 1;
margin-left: 5px;
margin-right: 15px;
}
.titles{
top: 187px;
height: 138px;
text-align: left;
font: normal normal bold 120px/36px Value;
letter-spacing: 0px;
margin-top: 65px;
margin-left: 30px;
color: black;
}
.contents{
top: 326px;
width: 298px;
height: 152px;
text-align: left;
font: normal normal bold 45px/50px Value;
letter-spacing: 0px;
color: #888888;
opacity: 1;
margin-left: 30px;
}
/* Titles */
.title-first {
left: 391px;
width: 31px;
opacity: 1;
border-style: solid;
border-color: black;
}
.title-second {
left: 811px;
width: 66px;
opacity: 1;
}
.title-thirth {
left: 1231px;
width: 68px;
border: 2px;
border-color: black;
}
/* Contents */
.content-first {
left: 391px;
height: 152px;
}
.content-second {
left: 811px;
}
.content-thirth {
left: 1231px;
/* margin-bottom: 0px; */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test Application</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="flex-columns section-style">
<div class="columns">
<p class="titles title-first">1</p>
<p class="contents content-first">Find your nearest store</p>
</div>
<div class="columns">
<p class="titles title-second">2</p>
<p class="contents content-second">Book a free hearing test</p>
</div>
<div class="columns">
<p class="titles title-thirth">3</p>
<p class="contents content-thirth">Get supported by our experts</p>
</div>
</section>
</body>
</html>

Related

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>

Filling next available box with a random number, if first box is occupied - JS

Very new to coding and this website in particular.
I am trying to create a 'Countdown'-style numbers game which involves trying to reach a target number using 6 random numbers. There are two categories of numbers: small numbers (1-10) and large numbers (25,50,75,100). I have created a button for each category which randomly generates a number within that category.
I am able to randomly generate these numbers and populate the first card slot using .onclick method, but I am unable to populate the next 5 card slots; every time I click it randomly generates a number in the same 1st card slot.
The goal is to populate the next card slot every time I click, not all slots at once.
I am using JS. Please see attached code.
Apologies in advance for errors as this is my first post!
HTML:
//Click on small number button to generate a random small number
document.getElementById("small_number_card").onclick = function(){
genSmallNumber();
}
document.getElementById("large_number_card").onclick = function(){
genLargeNumber();
}
//FUNCTIONS//
//Generate random small number from array
function genSmallNumber(){
var smallArray = Array(1,1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10);
var smallNumber = smallArray[Math.floor(Math.random()*smallArray.length)];
var cardSlot = 1;
document.getElementById("box"+cardSlot).innerHTML = smallNumber;
}
//Generate random large number from array
function genLargeNumber(){
var largeArray = Array(25,50,75,100);
var largeNumber = largeArray[Math.floor(Math.random()*largeArray.length)];
var cardSlot = 1;
document.getElementById("box"+cardSlot).innerHTML = largeNumber;
}
```
*{
font-family: monospace, 'Courier New';
}
html{
height: 100%;
background: radial-gradient(circle, white, grey);
}
::placeholder{
color: black;
opacity: 0.5;
text-transform: uppercase;
font-size: 20px;
line-height: 27px;
text-align: left;
}
#container{
width: 600px;
height: 1000px;
background: blue;
margin: 15px auto;
position: relative;
border-radius: 10px;
text-align: center;
padding: 1px;
}
#target_box{
width: 500px;
height: 200px;
background: #17bef6;
border-radius: 10px;
margin: 15px 45px;
position: relative;
border: 5px solid grey;
}
#target_number_box{
width: 200px;
height: 80px;
font-size: 80px;
line-height: 80px;
margin: 14px 150px;
background: black;
border: 5px solid grey;
color: yellow;
}
#target{
margin: 0;
padding: 0;
float: left;
width: 200px;
}
#start_button{
background: red;
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 0;
margin: 29px 45px;
border-radius: 50px;
border: 5px solid grey;
cursor: pointer;
text-align: center;
font-size: 15px;
line-height: 50px;
color: white;
}
#start_button:active{
top: 5px;
border-bottom: none;
}
#selection_box{
position: absolute;
background: grey;
height: 60px;
width: auto;
border: 5px solid grey;
left: 50px;
bottom: 14px;
color: white;
text-align: center;
line-height: 60px;
font-size: 30px;
}
.box{
float: left;
width: 60px;
height: 60px;
background: blue;
margin-right: 6px;
}
#box6{
margin-right: 0;
}
#whiteboard{
background: white;
width: 550px;
height: 140px;
border-radius: 10px;
border: 5px solid grey;
position: absolute;
left: 20px;
top: 240px;
}
#working_area{
width: 530px;
height: 120px;
padding: 10px;
margin: 0;
outline: none;
border: none;
border-radius: 10px;
font-size: 20px;
color: black;
background-image: linear-gradient(to right, #e8eded 1px, transparent 1px), linear-gradient(to bottom, #e8eded 1px, transparent 1px);
background-size: 30px 30px;
line-height: 27px;
resize: none;
}
#card_selection_box{
background: #17bef6;
height: 120px;
width: 550px;
position: absolute;
top: 405px;
left: 20px;
border-radius: 10px;
border: 5px solid grey;
}
#small_number_box{
float: left;
width: 275px;
height: 120px;
}
#large_number_box{
float: right;
width: 275px;
height: 120px;
}
.number_card{
width: 60px;
height: 60px;
background: blue;
border: 5px solid grey;
font-size: 30px;
color: white;
line-height: 60px;
cursor: pointer;
}
.number_card:active{
bottom: 5px;
border-bottom: none;
}
#small_number_card{
position: absolute;
left: 102.5px;
bottom: 10px;
}
#large_number_card{
position: absolute;
right: 102.5px;
bottom: 10px;
}
#counter_box{
background: #17bef6;
height: 120px;
width: 550px;
position: absolute;
top: 405px;
left: 20px;
border-radius: 10px;
border: 5px solid grey;
margin: 0;
padding: 0;
line-height: 120px;
font-size: 100px;
color: white;
display: none;
}
```
<div id="container">
<div id="target_box">
<div id="target_number_box">
<span id="target">100</span>
<div id="start_button">Start</div>
<div id="selection_box">
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>
<div class="box" id="box5"></div>
<div class="box" id="box6"></div>
</div>
</div>
</div>
<div id="whiteboard">
<textarea id="working_area" placeholder="Use this area as a working space..."></textarea>
</div>
<div id="card_selection_box">
<div id="small_number_box">
Small number<br/>(1-10)
<div class="number_card" id="small_number_card">
S
</div>
</div>
<div id="large_number_box">
Large number<br/>(25, 50, 75, 100)
<div class="number_card" id="large_number_card">
L
</div>
</div>
</div>
<div id="counter_box">
<span id="counter_value">30</span>
</div>
</div>
Thanks in advance! Please avoid JQuery type answers - I'm a noob!

you need to make variable cardSlot as global or put it outside the function
var cardSlot = 1; // ==> make it global
document.getElementById("small_number_card").onclick = function() {
genSmallNumber();
}
document.getElementById("large_number_card").onclick = function() {
genLargeNumber();
}
//FUNCTIONS//
function checkResetCardSlot() {
if (cardSlot > 6) {
cardSlot = 1;
// comment or remove below if you want to keep previous value
document.querySelectorAll('#selection_box .box').forEach(function(box) {
box.textContent = "";
})
}
}
//Generate random small number from array
function genSmallNumber() {
var smallArray = Array(1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8, 9, 9, 10, 10);
var smallNumber = smallArray[Math.floor(Math.random() * smallArray.length)];
checkResetCardSlot();
document.getElementById("box" + cardSlot).innerHTML = smallNumber;
cardSlot++; // update the number here
}
//Generate random large number from array
function genLargeNumber() {
var largeArray = Array(25, 50, 75, 100);
var largeNumber = largeArray[Math.floor(Math.random() * largeArray.length)];
checkResetCardSlot();
document.getElementById("box" + cardSlot).innerHTML = largeNumber;
cardSlot++; // and here
}
``` * {
font-family: monospace, 'Courier New';
}
html {
height: 100%;
background: radial-gradient(circle, white, grey);
}
::placeholder {
color: black;
opacity: 0.5;
text-transform: uppercase;
font-size: 20px;
line-height: 27px;
text-align: left;
}
#container {
width: 600px;
height: 1000px;
background: blue;
margin: 15px auto;
position: relative;
border-radius: 10px;
text-align: center;
padding: 1px;
}
#target_box {
width: 500px;
height: 200px;
background: #17bef6;
border-radius: 10px;
margin: 15px 45px;
position: relative;
border: 5px solid grey;
}
#target_number_box {
width: 200px;
height: 80px;
font-size: 80px;
line-height: 80px;
margin: 14px 150px;
background: black;
border: 5px solid grey;
color: yellow;
}
#target {
margin: 0;
padding: 0;
float: left;
width: 200px;
}
#start_button {
background: red;
width: 50px;
height: 50px;
position: absolute;
top: 0;
right: 0;
margin: 29px 45px;
border-radius: 50px;
border: 5px solid grey;
cursor: pointer;
text-align: center;
font-size: 15px;
line-height: 50px;
color: white;
}
#start_button:active {
top: 5px;
border-bottom: none;
}
#selection_box {
position: absolute;
background: grey;
height: 60px;
width: auto;
border: 5px solid grey;
left: 50px;
bottom: 14px;
color: white;
text-align: center;
line-height: 60px;
font-size: 30px;
}
.box {
float: left;
width: 60px;
height: 60px;
background: blue;
margin-right: 6px;
}
#box6 {
margin-right: 0;
}
#whiteboard {
background: white;
width: 550px;
height: 140px;
border-radius: 10px;
border: 5px solid grey;
position: absolute;
left: 20px;
top: 240px;
}
#working_area {
width: 530px;
height: 120px;
padding: 10px;
margin: 0;
outline: none;
border: none;
border-radius: 10px;
font-size: 20px;
color: black;
background-image: linear-gradient(to right, #e8eded 1px, transparent 1px), linear-gradient(to bottom, #e8eded 1px, transparent 1px);
background-size: 30px 30px;
line-height: 27px;
resize: none;
}
#card_selection_box {
background: #17bef6;
height: 120px;
width: 550px;
position: absolute;
top: 405px;
left: 20px;
border-radius: 10px;
border: 5px solid grey;
}
#small_number_box {
float: left;
width: 275px;
height: 120px;
}
#large_number_box {
float: right;
width: 275px;
height: 120px;
}
.number_card {
width: 60px;
height: 60px;
background: blue;
border: 5px solid grey;
font-size: 30px;
color: white;
line-height: 60px;
cursor: pointer;
}
.number_card:active {
bottom: 5px;
border-bottom: none;
}
#small_number_card {
position: absolute;
left: 102.5px;
bottom: 10px;
}
#large_number_card {
position: absolute;
right: 102.5px;
bottom: 10px;
}
#counter_box {
background: #17bef6;
height: 120px;
width: 550px;
position: absolute;
top: 405px;
left: 20px;
border-radius: 10px;
border: 5px solid grey;
margin: 0;
padding: 0;
line-height: 120px;
font-size: 100px;
color: white;
display: none;
}
```
<div id="container">
<div id="target_box">
<div id="target_number_box">
<span id="target">100</span>
<div id="start_button">Start</div>
<div id="selection_box">
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>
<div class="box" id="box5"></div>
<div class="box" id="box6"></div>
</div>
</div>
</div>
<div id="whiteboard">
<textarea id="working_area" placeholder="Use this area as a working space..."></textarea>
</div>
<div id="card_selection_box">
<div id="small_number_box">
Small number<br/>(1-10)
<div class="number_card" id="small_number_card">
S
</div>
</div>
<div id="large_number_box">
Large number<br/>(25, 50, 75, 100)
<div class="number_card" id="large_number_card">
L
</div>
</div>
</div>
<div id="counter_box">
<span id="counter_value">30</span>
</div>
</div>

Profile card going outside of the browser window

I want to achieve the mini profile view like in twitter. When we hover a user's name, his mini profile view is coming. But my problem it is going outside of the browser window. I need to adjust it according to the viewport. It should go outside of the window, it should adjust automatically.
it is coming this way
I need it this way
here is the code
<div class="popover__wrapper">
<a>Cyril</a>
<div class="push popover__content">
<div class="contact-card-user">
<div class="left-side">
<img src="../assets/img/profiles/male-user.jpg" alt="">
</div>
<div class="right-side">
<div class="details-wrapper">
<h3>Full Name </h3>
<div class="privilege">Administrator</div>
<div class="designation">Designer</div>
<div class="description">+973 1234 5678</div>
<div class="description">info#company.com</div>
</div>
</div>
</div>
</div>
<style>
.popover__wrapper {
position: relative;
margin-top: 0;
display: block;
cursor: pointer;
}
.popover__content {
opacity: 0;
visibility: hidden;
position: absolute;
left: 40px;
bottom: -90px;
transform: translate(0, 30px);
background-color: transparent;
padding: 0;
width: auto;
}
.popover__content:before {
position: absolute;
z-index: -1;
content: '';
left: -20px;
bottom: 100px;
border-style: solid;
border-width: 10px 10px 10px 10px;
border-color: transparent transparent transparent #a5053d;
transition-duration: 0.3s;
transition-property: transform;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
.contact-card-user {
background: #fff;
display: flex;
width: max-content;
box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.05);
}
.contact-card-user .left-side {
margin-right: 20px;
width: 100%;
max-width: 200px;
}
.contact-card-user .left-side img {
width: 100%;
height: auto;
}
.contact-card-user .right-side {
padding-left: 3px;
padding-top: 5px;
padding-bottom: 10px;
padding-right: 25px;
width: 100%;
max-width: 260px;
}
.contact-card-user .details-wrapper {
text-align: left;
}
.contact-card-user .details-wrapper h3 {
color: #333;
font-size: 16px;
white-space: pre-wrap;
overflow: hidden;
margin-bottom: 1px;
line-height: normal;
}
.contact-card-user .details-wrapper .privilege {
display: inline-block;
color: #a5053c;
font-weight: 400;
font-size: 14px;
letter-spacing: 0.7px;
margin-bottom: 13px;
margin-top: 6px;
border-bottom: 1px solid #00a000;
}
.contact-card-user .details-wrapper .designation {
color: #333;
margin-bottom: 5px;
}
.contact-card-user .details-wrapper .description {
color: #9a9a9a;
font-size: 12px;
line-height: 17px;
}
.contact-card-user .details-wrapper .description {
color: #9a9a9a;
font-size: 12px;
line-height: 17px;
}
</style>
I think may be javascript can solve. Any help?
Thank you

How can I put this make this box go below the text like in the image

I am trying to make this above layout. But unfortunately, I am not being able to put it as the above layout.
I am getting the 2nd image as my result.
Codes:
.text_box_holder{
position: relative;
}
.text_box_holder h1{
text-align: right;
padding-right: 50%;
color: #fff;
background: inherit;
-webkit-background-clip: text;
}
.learn_more_in_box{
color: #fde428;
text-align: right;
padding-left: 31% !important;
-webkit-background-clip: text;
}
.yellow_box{
position: absolute;
border: 7px solid #fde428;
width: 40%;
height: 300px;
}
<div class="text_box_holder">
<div class="yellow_box"></div>
<h1>Consumer<br>Products<br>Consulting</h1>
LEARN MORE
</div>

Please try following code . I didn't add any back ground images . I have tried only to add 2 text with the box .
HTML
<div class="text_box_holder">
<div class="yellow_box"> </div>
<div class="text1">
<h1>Consumer<br>Products<br>Consulting</h1>
<div class="text2">LEARN MORE</div>
</div>
</div>
CSS
.text1 {
margin-top: 30px;
position:absolute;
text-align: left;
color: #bc7e09;
}
.yellow_box{
margin-left: 60px;
position: absolute;
border: 5px solid #fde428;
width: 40%;
height: 300px;
}
If you want add back ground image for whole space , you can integrate with HTML .I hope it will help you .
Demo : https://jsfiddle.net/Ltxktaad/21/

You need to provide additional wrapper divs around the the text which needs to be absolutely positioned. Here is the working example.
<div class="text_box_holder">
<div class="yellow_box"></div>
<div class="main-text-wrapper">
<h1>Consumer<br>Products<br>Consulting</h1></div><div class="link-text-wrapper">
LEARN MORE </div>
</div>
.text_box_holder{
position: relative;
}
.text_box_holder h1{
text-align: right;
padding-right: 50%;
color: green;
background: inherit;
-webkit-background-clip: text;
text-align: left;
position: absolute;
top: -22px;
margin-top: 18px;
margin-bottom: 18px;
}
.learn_more_in_box{
color: #fde428;
text-align: right;
-webkit-background-clip: text;
text-align: left;
position: absolute;
top: 4px;
}
.yellow_box{
position: absolute;
border: 7px solid #fde428;
width: 40%;
height: 300px;
margin-left: 45px;
z-index:2;
}
.main-text-wrapper {
background-color: white;
width: 40%;
height: 110px;
position:absolute;
top: 65px;
z-index: 9999;
}
.link-text-wrapper {
position:absolute;
background-color: #fff;
top: 195px;
width:40%;
height: 30px;
z-index: 9999;
}

How to make my slider height automatically match the bottom of the screen?

So i want my slider's height to automatically end at the bottom of the screen, and after that there would be other content.
This website has this:
http://skywarriorthemes.com/arcane/landing/
the video's height will automatically fit to the bottom of the screen, in any resolution, and i want that too with my slider.
HTML:
<div id="sliderhome" class="container-fluid">
<div id="layerslider" class="ls-wp-container ls-container ls-fullwidth" style="height:810px; margin: 0px auto; width:100%;">
<div class="ls-slide" data-ls="slidedelay:8000;transition2d:75,79;">
<img src="./images/slider1.png" class="ls-bg" alt="Slide background" />
<h1 class="ls-l" style=" color: #f7f7f7; text-transform: uppercase; font-weight: bold; font-family: Roboto, 'Open Sans', Arial; padding: 15px; border: 0px; font-size: 50px;white-space: nowrap; width: auto; height: auto; margin-left: 0px; margin-top: 0px;top: 76px; left: 52px; display:block; " data-ls="offsetxin:0;offsetyin:-300px;durationin:2000;delayin:600;offsetxout:-50;durationout:1000;"> Welcome to the<br><span style="color: #ff8800;">Hiraeth network!</span></h1>
<h1 class="ls-l" data-ls="offsetxin:0;offsetyin:-300px;durationin:2000;delayin:500;offsetxout:-50;durationout:1000;" style="position: absolute; top: 224px; left: 52px; text-transform: uppercase; font-weight: bold; font-family: Roboto, 'Open Sans', Arial; padding: 15px; border: 0px; font-size: 18px; color: rgb(218, 213, 206); white-space: nowrap; width: auto; height: auto; opacity: 1; -webkit-transform: rotate(0deg) scale(1, 1); margin-left: 0px; margin-top: -209.1291058540763px; display: block; visibility: visible; background-position: initial initial; background-repeat: initial initial;"> For gamers by gamers </h1>
</div>
<div class="ls-slide" data-ls="slidedelay:9500;transition2d:5;timeshift:-3000;">
<img src="./images/slider2.png" class="ls-bg" alt="Slide background">
<p class="ls-l" data-ls="offsetxin:0;offsetyin:-300px;durationin:2000;delayin:200;offsetxout:-50;durationout:1000;" style="top: 52px; left: 31px; color: rgba(255, 90, 90, 0.901961); text-transform: uppercase; font-weight: bold; font-family: Roboto, 'Open Sans', Arial; padding: 15px; border: 0px; font-size: 30px; background-color: rgb(21, 22, 29); white-space: nowrap; width: auto; height: auto; margin-left: 0px; margin-top: 0px; display: block; "> BBPRESS FORUM AND RATING SYSTEM </p>
<p class="ls-l" data-ls="offsetxin:0;offsetyin:-300px;durationin:2000;delayin:0;offsetxout:-50;durationout:1000;" style="top: 136px; left: 32px; text-transform: uppercase; font-weight: bold; font-family: Roboto, 'Open Sans', Arial; padding: 15px; border: 0px; font-size: 18px; color: rgb(218, 213, 206); background-color: rgb(21, 22, 29); white-space: nowrap; width: auto; height: auto; margin-left: 0px; margin-top: 0px; display: block; "> MAKE KICK-ASS REVIEWS AND CREATE AN AWESOME COMMUNITY </p>
</div>
<div class="ls-slide" data-ls="slidedelay:9500;transition2d:5;timeshift:-3000;">
<img src="./images/slider3.png" class="ls-bg" alt="Slide background" style="padding: 0px; border-width: 0px; width: 1170px; height: 301px; margin-left: -585px; margin-top: -150.5px; visibility: visible; opacity: 1;">
<img class="ls-s-1" src="http://skywarriorthemes.com/oblivion/wp-content/uploads/2013/08/b_transparent.png" data-ls="offsetxin:0;offsetyin:-300px;durationin:2000;delayin:500;offsetxout:-50;durationout:1000;" style="position: absolute; top: 0px; left: 0px; opacity: 0.4; width: 1509px; height: 521px; padding: 0px; border-width: 0px; -webkit-transform: rotate(0deg) scale(1, 1); visibility: hidden; margin-left: 0px; margin-top: 0px;">
<h1 class="ls-s-1" data-ls="offsetxin:0;offsetyin:-300px;durationin:2000;delayin:200;offsetxout:-50;durationout:1000;" style="position: absolute; top: 80px; left: 50px; color: rgba(255, 90, 90, 0.901961); text-transform: uppercase; font-weight: bold; font-family: Roboto, 'Open Sans', Arial; padding: 15px; border: 0px; font-size: 28px; background-color: rgb(21, 22, 29); white-space: nowrap; width: auto; height: auto; opacity: 1; -webkit-transform: rotate(0deg) scale(1, 1); margin-left: 0px; margin-top: 0px; display: block; visibility: hidden; background-position: initial initial; background-repeat: initial initial;"> super easy to use page builder </h1>
<h1 class="ls-s-1" data-ls="offsetxin:0;offsetyin:-300px;durationin:2000;delayin:0;offsetxout:-50;durationout:1000;" style="position: absolute; top: 155px; left: 50px; text-transform: uppercase; font-weight: bold; font-family: Roboto, 'Open Sans', Arial; padding: 15px; border: 0px; font-size: 18px; color: rgb(218, 213, 206); background-color: rgb(21, 22, 29); white-space: nowrap; width: auto; height: auto; opacity: 1; -webkit-transform: rotate(0deg) scale(1, 1); margin-left: 0px; margin-top: 0px; display: block; visibility: hidden; background-position: initial initial; background-repeat: initial initial;"> create pages as simple as drag and drop </h1>
<img class="ls-s-1" data-ls="offsetxin:0;offsetyin:300px;durationin:2000;delayin:1200;offsetxout:-50;durationout:1000;" src="./images/305x305.jpg" style="position: absolute; top: 40px; left: 595px; width: 342px; height: 268px; padding: 0px; border-width: 0px; opacity: 1; -webkit-transform: rotate(0deg) scale(1, 1); margin-left: 0px; margin-top: 0px; display: block; visibility: hidden;">
<img class="ls-s-1" data-ls="offsetxin:0;offsetyin:0px;durationin:2000;delayin:4000;offsetxout:-50;durationout:1000;" src="./images/305x305.jpg" style="position: absolute; top: 40px; left: 596px; width: 342px; height: 268px; padding: 0px; border-width: 0px; -webkit-transform: rotate(0deg) scale(1, 1); opacity: 1; visibility: hidden; margin-left: 0px; margin-top: 0px;">
</div>
</div>
</div>
This code itself wont work because there is other js files, but i dont want to share it since its a paid plugin for websites, but as you can see in the beginning of the code you can set the height and width.

You can do this simply using CSS. Here's an example:
Sample HTML:
<div class="nav">
</div>
<div class="video-slider">
</div>
Sample CSS:
.nav{
background-color: rgba(255,0,0,0.8);
height:10vh;
}
.video-slider{
background-color: rgba(0,255,0,0.8);
height:90vh;
}
What makes this work is the use of vh (viewport height). In this example, the nav is taking up 10% of the viewport height and the video-slider is taking up 90% of the viewport height.
Here's a link to the example
https://jsfiddle.net/kz9txg47/

You can use height: 100% it will fit to whole container for the slider

Categories