I'm trying to dynamically add a row on the press of a button. However, due to my status as new to JS, I cannot seem to figure it out. If you notice in the demo below, nothing happens when you press the green button.This is likely a simple fix, but I just do not have the knowledge to do it. If you'd prefer to use it in CodePen, here is the link as well: CodePen Demo
$(document).ready(function(){
$("#ButtonPro").click(function(){
$("#okay").append("<p class=RowPro></p> <p class=GreenStripe></p> <p class=InputPro contenteditable>Input</p>");
});
});
.Rectangle {
align-self: flex-start;
width: 1539px;
height: 1268px;
background: #f2f4f5;
}
.Rectangle2 {
align-self: flex-start;
width: 1000px;
height: 105px;
background: #ffffff;
position: absolute;
width: 1000px;
height: 105px;
left: 270px;
top: 280px;
}
.Rectangle3 {
position: absolute;
width: 95px;
height: 8px;
left: 294px;
top: 305px;
background: #1d67ac;
border-radius: 0px;
}
.Zander{
position: absolute;
width: 218px;
height: 39px;
left: 297px;
top: 331px;
align-self: flex-start;
font-family: Arial;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 24px;
}
.Rectangle4 {
position: absolute;
width: 499px;
height: 65px;
left: 270px;
top: 397px;
background: #ffffff;
border-radius: 0px;
}
.Pros {
position: absolute;
width: 34px;
height: 24px;
left: 294px;
top: 418px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 24px;
/* identical to box height, or 150% */
color: #41cc90;
}
.ButtonPro {
position: absolute;
width: 32px;
height: 32px;
left: 721px;
top: 430px;
background: #41cc90;
border-radius: 4px;
}
.Group {
align-self: flex-start;
width: 17px;
height: 17px;
position: absolute;
width: 17px;
height: 17px;
left: 728.5px;
top: 437px;
.Vector {
position: absolute;
width: 17px;
height: 17px;
left: 728.5px;
top: 422px;
background: #ffffff;
}
}
.Rectangle6 {
position: absolute;
width: 500px;
height: 65px;
left: 769px;
top: 397px;
background: #ffffff;
border-radius: 0px;
}
.Rectangle_1 {
position: absolute;
width: 3px;
height: 65px;
left: 766px;
top: 397px;
background: #f2f4f5;
}
.Cons {
position: absolute;
width: 38px;
height: 24px;
left: 794px;
top: 418px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 24px;
/* identical to box height, or 150% */
color: #ff725c;
}
.ButtonCon {
align-self: flex-start;
width: 32px;
height: 32px;
background: #ff725c;
border-radius: 4px;
position: absolute;
width: 32px;
height: 32px;
left: 1222px;
top: 430px;
background: #ff725c;
border-radius: 4px;
}
.Group2 {
align-self: flex-start;
width: 17px;
height: 17px;
position: absolute;
width: 17px;
height: 17px;
left: 1229px;
top: 437px;
.Vector2 {
position: absolute;
width: 17px;
height: 17px;
left: 1230px;
top: 422px;
background: #ffffff;
}
}
.RowPro {
position: absolute;
width: 496px;
height: 75px;
left: 270px;
top: 479px;
background: #ffffff;
border-radius: 0px;
}
.GreenStripe {
position: absolute;
width: 95px;
height: 8px;
left: 294px;
top: 495px;
background: #41cc90;
border-radius: 0px;
}
.InputPro {
position:absolute;
width: 48px;
height: 24px;
left: 294px;
top: 512px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 24px;
color: #2C343D;
}
.RowCon {
position: absolute;
width: 496px;
height: 75px;
left: 769px;
top: 479px;
background: #FFFFFF;
border-radius: 0px;
}
.RedStripe {
position: absolute;
width: 95px;
height: 8px;
left: 793px;
top: 495px;
background: #FF725C;
border-radius: 0px;
}
.InputCon {
position: absolute;
width: 48px;
height: 24px;
left: 793px;
top: 512px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 24px;
/* identical to box height, or 150% */
color: #2C343D;
}
<p class="Rectangle"></p>
<p class="Rectangle2"></p>
<p class="Zander" contenteditable> Pro Con:</p>
<p class="Rectangle3"></p>
<p class="Rectangle4"></p>
<p class="Pros" contenteditable>Pros</p>
<button id="ButtonPro" class="ButtonPro"></button>
<div class="Group">
<div class="Vector">
<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.125 6.375V0H6.875V6.375H0.5V10.625H6.875V17H11.125V10.625H17.5V6.375H11.125Z" fill="white" />
</svg>
</div>
</div>
<p class="Rectangle6"></p>
<p class="Rectangle_1"></p>
<p class="Cons" contenteditable>Cons</p>
<button class="ButtonCon"></button>
<div class="Group2">
<div class="Vector2">
<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.125 6.375V0H6.875V6.375H0.5V10.625H6.875V17H11.125V10.625H17.5V6.375H11.125Z" fill="white" />
</svg>
</div>
</div>
<p class="RowPro"></p>
<p class="GreenStripe"></p>
<p class="InputPro" id="okay" contenteditable>Input</p>
<p class="Rectangle_2"></p>
<p class="RowCon"></p>
<p class="RedStripe"></p>
<p class="InputCon">Input</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Your code works (I think as intended), the problem is that it is not easy to press the button, because you have a div element on top. You just need to set pointer-events to none in that element. I have added css code for the Group class. Incidentally, you may want to set the other button to the same class (meaning change Group2 to Group:
$(document).ready(function(){
$("#ButtonPro").click(function(){
$("#okay").append("<p class=RowPro></p> <p class=GreenStripe></p> <p class=InputPro contenteditable>Input</p>");
});
});
.Rectangle {
align-self: flex-start;
width: 1539px;
height: 1268px;
background: #f2f4f5;
}
.Rectangle2 {
align-self: flex-start;
width: 1000px;
height: 105px;
background: #ffffff;
position: absolute;
width: 1000px;
height: 105px;
left: 270px;
top: 280px;
}
.Group{
pointer-events: none;
}
.Rectangle3 {
position: absolute;
width: 95px;
height: 8px;
left: 294px;
top: 305px;
background: #1d67ac;
border-radius: 0px;
}
.Zander{
position: absolute;
width: 218px;
height: 39px;
left: 297px;
top: 331px;
align-self: flex-start;
font-family: Arial;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 24px;
}
.Rectangle4 {
position: absolute;
width: 499px;
height: 65px;
left: 270px;
top: 397px;
background: #ffffff;
border-radius: 0px;
}
.Pros {
position: absolute;
width: 34px;
height: 24px;
left: 294px;
top: 418px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 24px;
/* identical to box height, or 150% */
color: #41cc90;
}
.ButtonPro {
position: absolute;
width: 32px;
height: 32px;
left: 721px;
top: 430px;
background: #41cc90;
border-radius: 4px;
}
.Group {
align-self: flex-start;
width: 17px;
height: 17px;
position: absolute;
width: 17px;
height: 17px;
left: 728.5px;
top: 437px;
.Vector {
position: absolute;
width: 17px;
height: 17px;
left: 728.5px;
top: 422px;
background: #ffffff;
}
}
.Rectangle6 {
position: absolute;
width: 500px;
height: 65px;
left: 769px;
top: 397px;
background: #ffffff;
border-radius: 0px;
}
.Rectangle_1 {
position: absolute;
width: 3px;
height: 65px;
left: 766px;
top: 397px;
background: #f2f4f5;
}
.Cons {
position: absolute;
width: 38px;
height: 24px;
left: 794px;
top: 418px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 24px;
/* identical to box height, or 150% */
color: #ff725c;
}
.ButtonCon {
align-self: flex-start;
width: 32px;
height: 32px;
background: #ff725c;
border-radius: 4px;
position: absolute;
width: 32px;
height: 32px;
left: 1222px;
top: 430px;
background: #ff725c;
border-radius: 4px;
}
.Group2 {
align-self: flex-start;
width: 17px;
height: 17px;
position: absolute;
width: 17px;
height: 17px;
left: 1229px;
top: 437px;
.Vector2 {
position: absolute;
width: 17px;
height: 17px;
left: 1230px;
top: 422px;
background: #ffffff;
}
}
.RowPro {
position: absolute;
width: 496px;
height: 75px;
left: 270px;
top: 479px;
background: #ffffff;
border-radius: 0px;
}
.GreenStripe {
position: absolute;
width: 95px;
height: 8px;
left: 294px;
top: 495px;
background: #41cc90;
border-radius: 0px;
}
.InputPro {
position:absolute;
width: 48px;
height: 24px;
left: 294px;
top: 512px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 24px;
color: #2C343D;
}
.RowCon {
position: absolute;
width: 496px;
height: 75px;
left: 769px;
top: 479px;
background: #FFFFFF;
border-radius: 0px;
}
.RedStripe {
position: absolute;
width: 95px;
height: 8px;
left: 793px;
top: 495px;
background: #FF725C;
border-radius: 0px;
}
.InputCon {
position: absolute;
width: 48px;
height: 24px;
left: 793px;
top: 512px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 24px;
/* identical to box height, or 150% */
color: #2C343D;
}
<p class="Rectangle"></p>
<p class="Rectangle2"></p>
<p class="Zander" contenteditable> Pro Con:</p>
<p class="Rectangle3"></p>
<p class="Rectangle4"></p>
<p class="Pros" contenteditable>Pros</p>
<button id="ButtonPro" class="ButtonPro"></button>
<div class="Group">
<div class="Vector">
<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.125 6.375V0H6.875V6.375H0.5V10.625H6.875V17H11.125V10.625H17.5V6.375H11.125Z" fill="white" />
</svg>
</div>
</div>
<p class="Rectangle6"></p>
<p class="Rectangle_1"></p>
<p class="Cons" contenteditable>Cons</p>
<button class="ButtonCon"></button>
<div class="Group2">
<div class="Vector2">
<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.125 6.375V0H6.875V6.375H0.5V10.625H6.875V17H11.125V10.625H17.5V6.375H11.125Z" fill="white" />
</svg>
</div>
</div>
<p class="RowPro"></p>
<p class="GreenStripe"></p>
<p class="InputPro" id="okay" contenteditable>Input</p>
<p class="Rectangle_2"></p>
<p class="RowCon"></p>
<p class="RedStripe"></p>
<p class="InputCon">Input</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
EDIT after comment:
If you do not need absolute positioning, the jQuery code is kept simple. In that setting, each card is relatively positioned in an absolutely positioned div (#okay). Notice that now .GreenStripe and .InputPro are inside .RowPro. I have kept the approximate layout, but you would need to tweak top and left for .GreenStripe and InputPro:
$(document).ready(function(){
$("#ButtonPro").click(function(){
$("#okay").append("<div class='RowPro'><div class='GreenStripe'></div><div class='InputPro' contenteditable>Input</div></div>");
});
});
.Rectangle {
align-self: flex-start;
width: 1539px;
height: 1268px;
background: #f2f4f5;
}
.Rectangle2 {
align-self: flex-start;
width: 1000px;
height: 105px;
background: #ffffff;
position: absolute;
width: 1000px;
height: 105px;
left: 270px;
top: 280px;
}
.Group{
pointer-events: none;
}
.Rectangle3 {
position: absolute;
width: 95px;
height: 8px;
left: 294px;
top: 305px;
background: #1d67ac;
border-radius: 0px;
}
.Zander{
position: absolute;
width: 218px;
height: 39px;
left: 297px;
top: 331px;
align-self: flex-start;
font-family: Arial;
font-style: normal;
font-weight: bold;
font-size: 16px;
line-height: 24px;
}
.Rectangle4 {
position: absolute;
width: 499px;
height: 65px;
left: 270px;
top: 397px;
background: #ffffff;
border-radius: 0px;
}
.Pros {
position: absolute;
width: 34px;
height: 24px;
left: 294px;
top: 418px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 24px;
/* identical to box height, or 150% */
color: #41cc90;
}
.ButtonPro {
position: absolute;
width: 32px;
height: 32px;
left: 721px;
top: 430px;
background: #41cc90;
border-radius: 4px;
}
.Group {
align-self: flex-start;
width: 17px;
height: 17px;
position: absolute;
width: 17px;
height: 17px;
left: 728.5px;
top: 437px;
.Vector {
position: absolute;
width: 17px;
height: 17px;
left: 728.5px;
top: 422px;
background: #ffffff;
}
}
.Rectangle6 {
position: absolute;
width: 500px;
height: 65px;
left: 769px;
top: 397px;
background: #ffffff;
border-radius: 0px;
}
.Rectangle_1 {
position: absolute;
width: 3px;
height: 65px;
left: 766px;
top: 397px;
background: #f2f4f5;
}
.Cons {
position: absolute;
width: 38px;
height: 24px;
left: 794px;
top: 418px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 24px;
/* identical to box height, or 150% */
color: #ff725c;
}
.ButtonCon {
align-self: flex-start;
width: 32px;
height: 32px;
background: #ff725c;
border-radius: 4px;
position: absolute;
width: 32px;
height: 32px;
left: 1222px;
top: 430px;
background: #ff725c;
border-radius: 4px;
}
.Group2 {
align-self: flex-start;
width: 17px;
height: 17px;
position: absolute;
width: 17px;
height: 17px;
left: 1229px;
top: 437px;
.Vector2 {
position: absolute;
width: 17px;
height: 17px;
left: 1230px;
top: 422px;
background: #ffffff;
}
}
.RowPro {
width: 496px;
height: 75px;
margin-top: 16px;
background: #ffffff;
border-radius: 0px;
}
.GreenStripe {
position: relative;
width: 95px;
height: 8px;
top: 16px;
left: 16px;
background: #41cc90;
border-radius: 0px;
}
.InputPro {
width: 500px;
height: 24px;
position: relative;
left: 16px;
top: 33px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 24px;
color: #2C343D;
}
.RowCon {
position: absolute;
width: 496px;
height: 75px;
left: 769px;
top: 479px;
background: #FFFFFF;
border-radius: 0px;
}
.RedStripe {
position: absolute;
width: 95px;
height: 8px;
left: 793px;
top: 495px;
background: #FF725C;
border-radius: 0px;
}
.InputCon {
position: absolute;
width: 500px;
height: 24px;
left: 793px;
top: 512px;
font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 16px;
line-height: 24px;
/* identical to box height, or 150% */
color: #2C343D;
}
#okay{
position: absolute;
width: 496px;
height: 123px;
left: 270px;
top: 479px;
}
<p class="Rectangle"></p>
<p class="Rectangle2"></p>
<p class="Zander" contenteditable> Pro Con:</p>
<p class="Rectangle3"></p>
<p class="Rectangle4"></p>
<p class="Pros" contenteditable>Pros</p>
<button id="ButtonPro" class="ButtonPro"></button>
<div class="Group">
<div class="Vector">
<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.125 6.375V0H6.875V6.375H0.5V10.625H6.875V17H11.125V10.625H17.5V6.375H11.125Z" fill="white" />
</svg>
</div>
</div>
<p class="Rectangle6"></p>
<p class="Rectangle_1"></p>
<p class="Cons" contenteditable>Cons</p>
<button class="ButtonCon"></button>
<div class="Group2">
<div class="Vector2">
<svg width="18" height="17" viewBox="0 0 18 17" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.125 6.375V0H6.875V6.375H0.5V10.625H6.875V17H11.125V10.625H17.5V6.375H11.125Z" fill="white" />
</svg>
</div>
</div>
<div id="okay">
<div class="RowPro"><div class="GreenStripe"></div><div class="InputPro" contenteditable>Input</div></div>
</div>
<p class="Rectangle_2"></p>
<p class="RowCon"></p>
<p class="RedStripe"></p>
<p class="InputCon">Input</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Here's some guidance: try y = mx + b. That should give you a foundation to work off of.
Related
Problem:
The scrollbar is missing on my (social-media) website. It's because of the "position: fixed;" thing. Everything was fine before. I tried to set overflow to "overflow: auto;" where I set "position: fixed". But it only made things worse, and still... no scrollbar.
I tried to create two different divs (one for a menu, with pages etc. (class: "row") and other for user stuff (settings, inbox, profile etc.) (class: "row2"))).
HTML:
<body>
<!-- HEADER, LOGO, SLOGAN, HR -->
<header>
<h1>PTRN</h1>
<h2>something</h2>
<hr class="headerhr">
</header>
<!-- SIDE BAR 1 -->
<div class="container">
<div class="row">
#1
#2
#3
#4
#5
#6
#7
#8
#9
#10
<div class="searchbar">
<p class="searchplaceholder">Search</p>
</div>
</div>
</div>
<!-- SIDE BAR 2 -->
<div class="container2">
<img class="menu1" src="file:///C:/Users/calex/Downloads/download.%20(1).jpg">
<div class="row2">
Inbox
Notifications
Meetings
Inbox
<p class="shared">Shared</p>
Documents
Photos
<div class="row2_2">
Settings
Help & Contact
</div>
</div>
<!-- POST SAMPLE -->
<div class="container3">
<img src="https://tiffanieanne.com/wp-content/uploads/2020/08/Batter-Spencer-Best-Views-in-San-Francisco-SF-Instagram-Worthy-Photo-Spots-SF-Photography-tiffanieanne.com_-768x954.jpg" alt="San Francisco, CA, USA">
<div class="container4">
<p class="username_post">Chita Cosmin</p>
<p class="jobb">Founder & CEO of Pictoren Platforms, Inc. since 2020</p>
<img class="prpic" src="https://images.unsplash.com/photo-1540512663861-0dcbe11ab7a3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDE1fHx8ZW58MHx8fHw%3D&w=1000&q=80" alt="Profile Pic">
<div class="container5">
<b class="fakebutton">Info</b>
</div>
</div>
</div>
CSS:
#import url("https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css");
/* BODY */
body {
margin: 0;
padding: 0;
font-family: Helvetica, Sans-Serif;
background: #a9c4db;
}
/* BACKGROUND NOTE: #acb6b7 */
/* LOGO AND SLOGAN */
h1 {
font-size: 50px;
text-transform: uppercase;
font-weight: 900;
letter-spacing: 7px;
position: absolute;
top: 6%;
left: 50%;
transform: translate(-50%,-50%);
margin: 0;
background: url(https://data.whicdn.com/images/342108134/original.gif);
background-size: cover;
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
}
h2 {
font-size: 10px;
font-weight: 900;
letter-spacing: 2px;
position: absolute;
top: 70px;
left: 49.5%;
transform: translate(-50%,-50%);
margin: 0;
background: url(https://data.whicdn.com/images/342108134/original.gif);
background-size: cover;
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
}
/* HEAEDER SEPARATOR */
.headerhr {
border: none;
height: 3px;
width: 40.6cm;
background-color: #9700FF;
margin-top: 90px;
}
/* HEADER */
header {
display: flex;
flex-wrap: wrap;
height: 90px;
background-color: black;
justify-content: space-between;
align-items: center;
}
/* SIDE BAR 1 */
.container {
position: fixed;
top: 110px;
left: 40px;
background-color: white;
height: 800px;
width: 280px;
border-radius: 22px;
overflow: auto;
}
.row {
display: flex;
flex-direction: column;
font-size: 15px;
position: fixed;
left: 87px;
top: 190px;
overflow: auto;
}
.row a:link {
color: black;
background-color: transparent;
text-decoration: none;
}
.searchbar {
position: fixed;
background-color: #f9f9f9;
border-radius: 5px;
border-style: solid;
border-width: 2px;
border-color: #d9d9d9;
z-index: 4000;
top: 150px;
width: 180px;
height: 37px;
top: 135px;
overflow: auto;
}
.searchplaceholder {
position: fixed;
font-size: 13px;
color: #8a8a8a;
top: 135px;
left: 95px;
overflow: auto;
}
.container bi-house {
position: absolute;
left: 50%;
size: 250px;
}
/* SIDE BAR 2 */
.container2 {
position: fixed;
top: 110px;
right: 40px;
background-color: white;
height: 800px;
width: 280px;
border-radius: 22px;
overflow: auto;
}
.row2 {
display: flex;
flex-direction: column;
font-size: 18px;
position: fixed;
right: 180px;
overflow: auto;
}
.row2 a:link {
color: black;
background-color: transparent;
text-decoration: none;
}
.shared {
opacity: 40%;
color: black;
font-size: 14px;
}
.row2_2 {
display: flex;
flex-direction: column;
font-size: 18px;
position: fixed;
right: 160px;
bottom: 50px;
overflow: auto;
}
.menu1 {
position: fixed;
max-width: 100%;
max-height: 100%;
float: right;
border-radius: 22px;
margin-top: 0%;
z-index: 2000;
margin-left: 1%;
border-width: 1px;
border-color: white;
overflow: auto;
}
/* POST SAMPLE */
.container3 {
position: absolute;
top: 2px;
right: 147%;
background-color: white;
height: 700px;
width: 640px;
border-radius: 22px;
}
img {
max-width: 100%;
max-height: 100%;
float: right;
margin-top: 15.43%;
border-radius: 22px;
margin-right: 5.6%;
border-width: 1px;
border-style: solid;
border-color: #efeded;
}
.container4 {
position: absolute;
top: 24px;
right: 5%;
background-color: white;
height: 70px;
width: 570px;
border-radius: 22px;
border-width: 2px;
border-style: solid;
border-color: #efeded;
z-index: 999;
}
.username_post {
position: fixed;
font-size: 18px;
font-weight: 600;
right: 860px;
top: 137px;
overflow: auto;
}
.prpic {
position: fixed;
max-width: 10%;
max-height: 10%;
float: left;
top: -100px;
left: 500px;
border-radius: 100%;
clip-path: circle();
overflow: auto;
}
.jobb {
position: fixed;
color: #878787;
font-size: 13px;
top: 165px;
left: 561px;
overflow: auto;
}
.fakebutton{
position: fixed;
font-size: 17px;
transform: translate(-50%,-50%);
margin: 0;
background: url(https://data.whicdn.com/images/342108134/original.gif);
background-size: cover;
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
top: 174px;
right: 500px;
z-index: 1001;
overflow: auto;
}
.container5 {
position: absolute;
z-index: 1000;
background-color: white;
height: 30px;
width: 65px;
border-radius: 17px;
border-width: 2px;
border-style: solid;
border-color: #9700FF;
right: 12px;
top: 19px;
}
If you want 'overflow' to work, then try adding 'max-height' property to that element in your css code.
I am currently configuring(backend) my search-bar in my Django project to search the database. I've put an 'if or else' statement for when the user just clicks the search button without putting anything in the search-box. The 'if or else' statement seems not to be working properly because it ignores the 'if' part and goes straight to the else part. I've tried different ways to fix it but I seem to be failing. How do I rectify this.
function openNav() {
document.getElementById("mynavbar").style.display = "block";
}
function closeNav() {
document.getElementById("mynavbar").style.display = "none";
}
.navbar{
position: absolute;
height: 102px;
width: 1136px;
left: 69px;
top: 39px;
border-radius: 0px;
}
.nav-menu{
display: none;
}
.closebtn{
display: none;
}
.logo img{
position: absolute;
height: 57.599998474121094px;
width: 100px;
left: 12px;
top: 31px;
border-radius: 0px;
}
.HOME{
position: absolute;
height: 38.10988998413086px;
width: 97.52754211425781px;
left: 203.26788330078125px;
top: 48.19781494140625px;
border-radius: 0px;
font-family: Poppins;
font-size: 27px;
font-style: normal;
font-weight: 700;
line-height: 41px;
letter-spacing: 0em;
text-align: left;
/* background: #FFFFFF; */
}
.ARTIST{
position: absolute;
height: 38.10988998413086px;
width: 105.85134887695312px;
left: 328.64324951171875px;
top: 48.19781494140625px;
border-radius: nullpx;
font-family: Poppins;
font-size: 27px;
font-style: normal;
font-weight: 700;
line-height: 41px;
letter-spacing: 0em;
text-align: left;
/* background: #FFFFFF; */
}
.ABOUTUS{
position: absolute;
height: 38.10988998413086px;
width: 142.14324951171875px;
left: 475.8270263671875px;
top: 48.19781494140625px;
border-radius: nullpx;
font-family: Poppins;
font-size: 27px;
font-style: normal;
font-weight: 700;
line-height: 41px;
letter-spacing: 0em;
text-align: left;
/* background: #FFFFFF; */
}
.search-bar{
position: absolute;
height: 38.109893798828125px;
width: 177.427001953125px;
left: 655.270263671875px;
top: 50.4395751953125px;
border-radius: 45px;
background: #FFFFFF42;
border: 3px solid #FFFFFF;
}
#search-area{
position: absolute;
height: 38.109893798828125px;
width: 177.427001953125px;
left: -3px;
top: -4px;
border-radius: 45px;
background: #FFFFFF42;
border: 3px solid #FFFFFF;
font-family: 'Poppins';
font-size: 19px;
font-weight: 700;
}
.search-icon{
position: absolute;
height: 30px;
width: 24.251404px;
left: 136px;
top: 0px;
border-radius: 0px;
}
.bi-search{
position: absolute;
height: 30px;
width: 24.251404px;
left: 0px;
top: 0px;
border-radius: 0px;
}
.rec{
position: absolute;
height: 45.95604705810547px;
width: 119.96490478515625px;
left: 1013.1486206054688px;
top: 42.593414306640625px;
border-radius: 10px;
background: #7e81d1;
}
.SignIn{
position: absolute;
height: 38.109893798828125px;
width: 98.553955078125px;
left: 10px;
top: 0;
border-radius: 0px;
font-family: Poppins;
font-size: 27px;
font-style: normal;
font-weight: 700;
line-height: 41px;
letter-spacing: 0em;
text-align: left;
/* background: #FFFFFF; */
}
.rec2{
position: absolute;
height: 45.95604705810547px;
width: 119.96490478515625px;
left: 862.9404907226562px;
top: 42.593414306640625px;
border-radius: 10px;
background: #7E81D1;
}
.SignUP{
position: absolute;
height: 43.71428680419922px;
width: 106.8594970703125px;
left: 10px;
top: 0;
border-radius: 0px;
font-family: Poppins;
font-size: 27px;
font-style: normal;
font-weight: 700;
line-height: 41px;
letter-spacing: 0em;
text-align: left;
/* background: #FFFFFF; */
}
<div id="mynavbar" class="navbar">
×
<div class="logo">
<img src="{% static 'TheMachine Images/The Machine 2.png' %}" alt="">
</div>
<span class="HOME">HOME</span>
<span class="ARTIST">ARTIST</span>
<span class="ABOUTUS">ABOUT US</span>
<div class="search-bar">
<form action="{% url 'results' %}" method="post" name="searched">
{% csrf_token %}
<input type="text" id="search-area" placeholder="Search Artist">
<div class="search-icon">
<a href="results"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg></a>
</div>
</form>
</div>
<div class="rec">
<span class="SignIn">SignIN</span>
</div>
<div class="rec2">
<span class="SignUP">SignUp</span>
</div>
</div>
views.py
def results(request):
if request.method == "POST":
searched = request.POST['searched']
return render(request, 'Results.html', {'searched': searched})
else:
return render(request, 'Results.html', {})
url.py
path('results', views.results, name='results')
this is my results
function openNav() {
document.getElementById("mynavbar").style.display = "block";
}
function closeNav() {
document.getElementById("mynavbar").style.display = "none";
}
.navbar{
position: absolute;
height: 91px;
width: 1094px;
left: 141px;
top: 38px;
border-radius: 0px;
}
.closebtn{
display: none;
}
.nav-menu{
display: none;
}
.HOME{
position: absolute;
height: 34px;
width: 93.95413208007812px;
left: 195.8201904296875px;
top: 43px;
border-radius: 0px;
font-family: Poppins;
font-size: 27px;
font-style: normal;
font-weight: 700;
line-height: 41px;
letter-spacing: 0em;
text-align: left;
}
.ARTIST{
position: absolute;
height: 34px;
width: 101.97296142578125px;
left: 316.601806640625px;
top: 43px;
border-radius: nullpx;
font-family: Poppins;
font-size: 27px;
font-style: normal;
font-weight: 700;
line-height: 41px;
letter-spacing: 0em;
text-align: left;
}
.ABOUTUS{
position: absolute;
height: 34px;
width: 136.93508911132812px;
left: 458.3927917480469px;
top: 43px;
border-radius: 0px;
font-family: Poppins;
font-size: 27px;
font-style: normal;
font-weight: 700;
line-height: 41px;
letter-spacing: 0em;
text-align: left;
}
.search-bar{
position: absolute;
height: 34px;
width: 170.92608642578125px;
left: 631.2612915039062px;
top: 45px;
border-radius: 45px;
border: 3px solid #FFFFFF;
}
.search-icon{
position: absolute;
height: 19px;
width: 24px;
left: 137px;
top: 4px;
border-radius: 0px;
}
.bi-search{
position: absolute;
height: 19px;
width: 24px;
left: 0px;
top: 0px;
border-radius: 0px;
}
.logo img{
position: absolute;
height: 57.599998474121094px;
width: 100px;
left: 12px;
top: 31px;
border-radius: 0px;
}
.rec{
position: absolute;
height: 41px;
width: 115.56927490234375px;
left: 976.0270385742188px;
top: 38px;
border-radius: 10px;
background: #6484B4;
}
.SignIn{
position: absolute;
height: 34px;
width: 94.94293212890625px;
left: 12px;
top: 0px;
border-radius: 0px;
font-family: Poppins;
font-size: 27px;
font-style: normal;
font-weight: 700;
line-height: 41px;
letter-spacing: 0em;
text-align: left;
}
.rec2{
position: absolute;
height: 41px;
width: 115.56939697265625px;
left: 831.322509765625px;
top: 38px;
border-radius: 10px;
background: #7E81D1;
}
.SignUP{
position: absolute;
height: 39px;
width: 102.9442138671875px;
left: 7px;
top: 0px;
border-radius: 0px;
font-family: Poppins;
font-size: 27px;
font-style: normal;
font-weight: 700;
line-height: 41px;
letter-spacing: 0em;
text-align: left;
}
#search-area{
position: absolute;
left: 8px;
top: -2px;
background: #ffffff00;
border: #ffffff00;
border-radius: 45px;
font-family: 'Poppins';
font-size: 19px;
font-weight: 700;
}
<div id="mynavbar" class="navbar">
×
<div class="logo">
<img src="{% static 'TheMachine Images/The Machine 2.png' %}" alt="">
</div>
<span class="HOME">HOME</span>
<span class="ARTIST">ARTIST</span>
<span class="ABOUTUS">ABOUT US</span>
<div class="search-bar">
<input type="text" id="search-area" placeholder="Search">
<div class="search-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
</svg>
</div>
</div>
<div class="rec">
<span class="SignIn">SignIN</span>
</div>
<div class="rec2">
<span class="SignUP">SignUp</span>
</div>
</div>
<div class="results">
{% if searched %}
<h2>You have searched for {{searched}}</h2>
{% else %}
<h2>You forget to fill out the form</h2>
{% endif %}
</div>
With the search query you are trying to get data based on your input. so instead of post, use a get request here & give your input field a name to access that in your view.
Template:
<form>
<input type="text" id="search-area" placeholder="Search Artist" name="searched">
</form>
The default method of a form is GET, so you dont have to specify method="get"
View:
def results(request):
if request.method == "GET":
searched = request.GET.get('searched')
return render(request, 'Results.html', {'searched': searched})
else:
return render(request, 'Results.html', {})
I'm working on a project where you have to put the above numbers 1/9 in the right order.
For example: 1-6-3
When the numbers are placed in the correct order, a button will appear to continue to the next page. Can someone help me with that?
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
body {
background-color: #cccccc;
}
.content-size {
height: 300px;
width: 300px;
position: fixed;
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
background-color: #3e3e3e;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border: 2px solid #3e3e3e;
}
.picure-1-box {
height: 50px;
width: 50px;
position: fixed;
left: 20%;
top: 20%;
transform: translate(-50%, -50%);
background-color: #3a3a3a;
border-radius: 35px;
}
.picure-2-box {
height: 50px;
width: 50px;
position: fixed;
left: 50%;
top: 20%;
transform: translate(-50%, -50%);
background-color: #3a3a3a;
border-radius: 35px;
}
.picure-3-box {
height: 50px;
width: 50px;
position: fixed;
left: 80%;
top: 20%;
transform: translate(-50%, -50%);
background-color: #3a3a3a;
border-radius: 35px;
}
.picure-4-box {
height: 50px;
width: 50px;
position: fixed;
left: 20%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #3a3a3a;
border-radius: 35px;
}
.picure-5-box {
height: 50px;
width: 50px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #3a3a3a;
border-radius: 35px;
}
.picure-6-box {
height: 50px;
width: 50px;
position: fixed;
left: 80%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #3a3a3a;
border-radius: 35px;
}
.picure-7-box {
height: 50px;
width: 50px;
position: fixed;
left: 20%;
top: 80%;
transform: translate(-50%, -50%);
background-color: #3a3a3a;
border-radius: 35px;
}
.picure-8-box {
height: 50px;
width: 50px;
position: fixed;
left: 50%;
top: 80%;
transform: translate(-50%, -50%);
background-color: #3a3a3a;
border-radius: 35px;
}
.picure-9-box {
height: 50px;
width: 50px;
position: fixed;
left: 80%;
top: 80%;
transform: translate(-50%, -50%);
background-color: #3a3a3a;
border-radius: 35px;
}
#code-number-1 {
font-size: 15px;
font-family: arial;
text-align: center;
line-height: 50px;
color: #868686;
font-weight: bold;
cursor: grab;
}
#code-number-1:hover {
color: #fdfdfda3;
}
#code-number-2 {
font-size: 15px;
font-family: arial;
text-align: center;
line-height: 50px;
color: #868686;
font-weight: bold;
cursor: grab;
}
#code-number-2:hover {
color: #fdfdfda3;
}
#code-number-3 {
font-size: 15px;
font-family: arial;
text-align: center;
line-height: 50px;
color: #868686;
font-weight: bold;
cursor: grab;
}
#code-number-3:hover {
color: #fdfdfda3;
}
#code-number-4 {
font-size: 15px;
font-family: arial;
text-align: center;
line-height: 50px;
color: #868686;
font-weight: bold;
cursor: grab;
}
#code-number-4:hover {
color: #fdfdfda3;
}
#code-number-5 {
font-size: 15px;
font-family: arial;
text-align: center;
line-height: 50px;
color: #868686;
font-weight: bold;
cursor: grab;
border-radius: 35px;
}
#code-number-5:hover {
color: #fdfdfda3;
}
#code-number-6 {
font-size: 15px;
font-family: arial;
text-align: center;
line-height: 50px;
color: #868686;
font-weight: bold;
cursor: grab;
}
#code-number-6:hover {
color: #fdfdfda3;
}
#code-number-7 {
font-size: 15px;
font-family: arial;
text-align: center;
line-height: 50px;
color: #868686;
font-weight: bold;
cursor: grab;
border-radius: 35px;
}
#code-number-7:hover {
color: #fdfdfda3;
}
#code-number-8 {
font-size: 15px;
font-family: arial;
text-align: center;
line-height: 50px;
color: #868686;
font-weight: bold;
cursor: grab;
border-radius: 35px;
}
#code-number-8:hover {
color: #fdfdfda3;
}
#code-number-9 {
font-size: 15px;
font-family: arial;
text-align: center;
line-height: 50px;
color: #868686;
font-weight: bold;
cursor: grab;
}
#code-number-9:hover {
color: #fdfdfda3;
}
.numbers-3 {
height: 70px;
width: 300px;
position: fixed;
left: 50%;
top: 79%;
transform: translate(-50%, -50%);
background-color: #3a3939;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
border: 2px solid #3e3e3e;
}
a {
color: #ffffff61;
text-decoration: none;
font-weight: bold;
font-size: 13px;
font-family: arial;
cursor: pointer;
}
.reset {
height: 50px;
width: 150px;
position: fixed;
left: 50%;
top: 95%;
transform: translate(-50%, -50%);
background-color: #444444f2;
text-align: center;
line-height: 50px;
border-radius: 10px;
border: 1px solid #d6d6d6;
}
.reset:hover {
background-color: #353535f2;
}
#code-1 {
height: 50px;
width: 50px;
position: fixed;
left: 20%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #525252bf;
border-radius: 5px;
}
#code-2 {
height: 50px;
width: 50px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #525252bf;
border-radius: 5px;
}
#code-3 {
height: 50px;
width: 50px;
position: fixed;
left: 80%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #525252bf;
border-radius: 5px;
}
<div class="content-size">
<div class="picure-1-box">
<div draggable="true" id="code-number-1" ondragstart="drag(event)">
1
</div>
</div>
<div class="picure-2-box">
<div draggable="true" id="code-number-2" ondragstart="drag(event)">
2
</div>
</div>
<div class="picure-3-box">
<div draggable="true" id="code-number-3" ondragstart="drag(event)">
3
</div>
</div>
<div class="picure-4-box">
<div draggable="true" id="code-number-4" ondragstart="drag(event)">
4
</div>
</div>
<div class="picure-5-box">
<div draggable="true" id="code-number-5" ondragstart="drag(event)">
5
</div>
</div>
<div class="picure-6-box">
<div draggable="true" id="code-number-6" ondragstart="drag(event)">
6
</div>
</div>
<div class="picure-7-box">
<div draggable="true" id="code-number-7" ondragstart="drag(event)">
7
</div>
</div>
<div class="picure-8-box">
<div draggable="true" id="code-number-8" ondragstart="drag(event)">
8
</div>
</div>
<div class="picure-9-box">
<div draggable="true" id="code-number-9" ondragstart="drag(event)">
9
</div>
</div>
</div>
<div class="numbers-3">
<div id="code-1" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
<div id="code-2" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
<div id="code-3" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
</div>
<div class="reset">
Reset
</div>
I used an array and parseInt to edit the array. It's kind of sketchy, but it works. I set the code to 1-6-3. It doesn't create a button to continue; it just validates the code.
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
var input_code = [-1, -1, -1];
function drop(ev) {
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
input_code[parseInt(ev.target.id.split('-')[1], 10)-1] = parseInt(document.getElementById(data).innerText, 10);
if (input_code.toString() === [1, 6, 3].toString()) {
console.log("correct");
// append your button
}
ev.preventDefault();
}
body {
background-color: #cccccc;
}
.content-size {
height: 300px;
width: 300px;
position: fixed;
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
background-color: #3e3e3e;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border: 2px solid #3e3e3e;
}
.picure-1-box {
height: 50px;
width: 50px;
position: fixed;
left: 20%;
top: 20%;
transform: translate(-50%, -50%);
background-color: #3a3a3a;
border-radius: 35px;
}
.picure-2-box {
height: 50px;
width: 50px;
position: fixed;
left: 50%;
top: 20%;
transform: translate(-50%, -50%);
background-color: #3a3a3a;
border-radius: 35px;
}
.picure-3-box {
height: 50px;
width: 50px;
position: fixed;
left: 80%;
top: 20%;
transform: translate(-50%, -50%);
background-color: #3a3a3a;
border-radius: 35px;
}
.picure-4-box {
height: 50px;
width: 50px;
position: fixed;
left: 20%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #3a3a3a;
border-radius: 35px;
}
.picure-5-box {
height: 50px;
width: 50px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #3a3a3a;
border-radius: 35px;
}
.picure-6-box {
height: 50px;
width: 50px;
position: fixed;
left: 80%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #3a3a3a;
border-radius: 35px;
}
.picure-7-box {
height: 50px;
width: 50px;
position: fixed;
left: 20%;
top: 80%;
transform: translate(-50%, -50%);
background-color: #3a3a3a;
border-radius: 35px;
}
.picure-8-box {
height: 50px;
width: 50px;
position: fixed;
left: 50%;
top: 80%;
transform: translate(-50%, -50%);
background-color: #3a3a3a;
border-radius: 35px;
}
.picure-9-box {
height: 50px;
width: 50px;
position: fixed;
left: 80%;
top: 80%;
transform: translate(-50%, -50%);
background-color: #3a3a3a;
border-radius: 35px;
}
#code-number-1 {
font-size: 15px;
font-family: arial;
text-align: center;
line-height: 50px;
color: #868686;
font-weight: bold;
cursor: grab;
}
#code-number-1:hover {
color: #fdfdfda3;
}
#code-number-2 {
font-size: 15px;
font-family: arial;
text-align: center;
line-height: 50px;
color: #868686;
font-weight: bold;
cursor: grab;
}
#code-number-2:hover {
color: #fdfdfda3;
}
#code-number-3 {
font-size: 15px;
font-family: arial;
text-align: center;
line-height: 50px;
color: #868686;
font-weight: bold;
cursor: grab;
}
#code-number-3:hover {
color: #fdfdfda3;
}
#code-number-4 {
font-size: 15px;
font-family: arial;
text-align: center;
line-height: 50px;
color: #868686;
font-weight: bold;
cursor: grab;
}
#code-number-4:hover {
color: #fdfdfda3;
}
#code-number-5 {
font-size: 15px;
font-family: arial;
text-align: center;
line-height: 50px;
color: #868686;
font-weight: bold;
cursor: grab;
border-radius: 35px;
}
#code-number-5:hover {
color: #fdfdfda3;
}
#code-number-6 {
font-size: 15px;
font-family: arial;
text-align: center;
line-height: 50px;
color: #868686;
font-weight: bold;
cursor: grab;
}
#code-number-6:hover {
color: #fdfdfda3;
}
#code-number-7 {
font-size: 15px;
font-family: arial;
text-align: center;
line-height: 50px;
color: #868686;
font-weight: bold;
cursor: grab;
border-radius: 35px;
}
#code-number-7:hover {
color: #fdfdfda3;
}
#code-number-8 {
font-size: 15px;
font-family: arial;
text-align: center;
line-height: 50px;
color: #868686;
font-weight: bold;
cursor: grab;
border-radius: 35px;
}
#code-number-8:hover {
color: #fdfdfda3;
}
#code-number-9 {
font-size: 15px;
font-family: arial;
text-align: center;
line-height: 50px;
color: #868686;
font-weight: bold;
cursor: grab;
}
#code-number-9:hover {
color: #fdfdfda3;
}
.numbers-3 {
height: 70px;
width: 300px;
position: fixed;
left: 50%;
top: 79%;
transform: translate(-50%, -50%);
background-color: #3a3939;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
border: 2px solid #3e3e3e;
}
a {
color: #ffffff61;
text-decoration: none;
font-weight: bold;
font-size: 13px;
font-family: arial;
cursor: pointer;
}
.reset {
height: 50px;
width: 150px;
position: fixed;
left: 50%;
top: 95%;
transform: translate(-50%, -50%);
background-color: #444444f2;
text-align: center;
line-height: 50px;
border-radius: 10px;
border: 1px solid #d6d6d6;
}
.reset:hover {
background-color: #353535f2;
}
#code-1 {
height: 50px;
width: 50px;
position: fixed;
left: 20%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #525252bf;
border-radius: 5px;
}
#code-2 {
height: 50px;
width: 50px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #525252bf;
border-radius: 5px;
}
#code-3 {
height: 50px;
width: 50px;
position: fixed;
left: 80%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #525252bf;
border-radius: 5px;
}
<div class="content-size">
<div class="picure-1-box">
<div draggable="true" id="code-number-1" ondragstart="drag(event)">
1
</div>
</div>
<div class="picure-2-box">
<div draggable="true" id="code-number-2" ondragstart="drag(event)">
2
</div>
</div>
<div class="picure-3-box">
<div draggable="true" id="code-number-3" ondragstart="drag(event)">
3
</div>
</div>
<div class="picure-4-box">
<div draggable="true" id="code-number-4" ondragstart="drag(event)">
4
</div>
</div>
<div class="picure-5-box">
<div draggable="true" id="code-number-5" ondragstart="drag(event)">
5
</div>
</div>
<div class="picure-6-box">
<div draggable="true" id="code-number-6" ondragstart="drag(event)">
6
</div>
</div>
<div class="picure-7-box">
<div draggable="true" id="code-number-7" ondragstart="drag(event)">
7
</div>
</div>
<div class="picure-8-box">
<div draggable="true" id="code-number-8" ondragstart="drag(event)">
8
</div>
</div>
<div class="picure-9-box">
<div draggable="true" id="code-number-9" ondragstart="drag(event)">
9
</div>
</div>
</div>
<div class="numbers-3">
<div id="code-1" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
<div id="code-2" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
<div id="code-3" ondragover="allowDrop(event)" ondrop="drop(event)"></div>
</div>
<div class="reset">
Reset
</div>
So, app fetch HTML and CSS from API:
<div class="top"></div>
<div class="bottom"></div>
<div class="header">
<div class="operator">
<img src="{{selectedOperator.image}}">
</div>
<span class="title">{{headline}}</span>
</div>
<div class="bubble">
{{subhead}}
</div>
<div class="btn">
Подробнее
</div>
.templ {
display: flex;
flex-direction: column;
background: blue;
border-top-left-radius: 3rem;
border-bottom-right-radius: 3rem;
position: relative;
padding-bottom: 2rem;
.top {
display: block;
position: absolute;
top: -3rem;
right: 0;
width: 3rem;
height: 3rem;
background: blue;
&:before {
content: '';
display: block;
position: absolute;
bottom: 0;
right: 0;
border-radius: 50rem;
background: #fff;
height: 6rem;
width: 6rem;
}
}
.bottom {
display: block;
position: absolute;
bottom: -3rem;
left: 0;
width: 3rem;
height: 3rem;
background: blue;
&:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
border-radius: 50rem;
background: #fff;
height: 6rem;
width: 6rem;
}
}
.header {
display: flex;
flex-direction: row;
align-items: flex-end;
margin-top: -2rem;
padding-left: 1rem;
padding-right: 1rem;
margin-bottom: 2rem;
.title {
margin-left: 1rem;
display: block;
color: #fff;
font-size: 1.25rem;
font-weight: 600;
line-height: 1.2;
max-width: calc(100% - 1rem);
}
.operator {
display: block;
width: 50%;
border-radius: 50rem;
padding: 0.5rem;
position: relative;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5);
&:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 1;
background: linear-gradient(red, blue);
width: 100%;
height: 100%;
border-radius: 50rem;
}
img {
height: 100%;
width: 100%;
border-radius: 50rem;
position: relative;
z-index: 2;
}
}
} // .header
.bubble {
display: block;
background: #fff;
border-radius: 0.5rem;
margin-bottom: 0.5rem;
padding: 0.5rem 1rem;
line-height: 1.3;
width: calc(100% - 3rem);
margin-left: 2rem;
margin-right: 1rem;
position: relative;
&:before {
content: '';
height: 1rem;
width: 1.5rem;
display: block;
background: #fff;
position: absolute;
left: -0.5rem;
top: 50%;
transform: translateY(-50%) rotate(45deg);
border-radius: 0.25rem;
}
&:last-child {
margin-bottom: 0;
}
} // .bubble
.btn {
display: block;
width: calc(100% - 2rem);
margin-left: auto;
margin-right: auto;
background: orange;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.5);
color: black;
font-size: 1rem;
font-weight: 500;
position: absolute;
bottom: -1rem;
left: 0;
right: 0;
} // .btn
}
Then app stores data inside component:
export class AdvertisementComponent implements OnInit {
templateHtml = here goes html from api
templateCss = here goes css from api
headline: string = ''
constructor(
private sanitizer: DomSanitizer
) {}
transform(style) {
return this.sanitizer.bypassSecurityTrustHtml(style)
}
}
Then app should render it:
<div class="templ" [innerHtml]="transform(templateHtml)"></div>
So: Inside templateHtml there is data: {{headline}}, {{subhead}} and {{selectedOperator.image}}
The problem and questions:
I need to add CSS code from API to Angular View
I need to sanitize HTML, but save dynamic data tags working
So, solution is:
Store html as a string
Replace string with new data
Reload string
I have to make a slideshow of images based on my this jsfiddle. I need to have three more images just after this image which is already there in my jsfiddle. So I will have three more images and three dots at the bottom border of the image and if I click those dots, it should show other image and I want to keep BESPOKE INSURANCE SOLUTIONS text on top of my slideshow.
I tried integrating this w3schools example but my original jsfiddle is getting messed up and it is not working at all. Here is my updated jsfiddle and as you can see it is messed up. What is the best way to solve this?
Below is my code:
<div class="header">
<div class="header-background">
<img src="https://s4.postimg.org/yg8mjvsv1/image-home.png">
</div>
<div class="orange-bar">
<img class="orange-bar-image" src="https://s12.postimg.org/dmd7nd1dp/headline.png">
</div>
<div class="topnav">
<nav>
<ul>
<li class="home"><img src="https://s11.postimg.org/ywuxj79j7/logo.png" style="width:240px; height:53px;"></li>
</ul>
</nav>
</div>
<h1 class="text-inside-orange">BESPOKE INSURANCE SOLUTIONS</h1>
</div>
Here is my CSS:
.header {
position: relative;
height: 769px;
}
.header-background {
height: 769px;
width: 100%;
}
.orange-bar {
position: relative;
top: -430px;
left: -160px;
}
.topnav {
position: relative;
top: -890px;
background-color: rgba(0, 0, 0, 0.8);
height: 89px;
border-bottom: 3px solid #EF7440;
overflow: hidden;
}
.topnav ul>li {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
}
li.home {
position: relative;
right: 40px;
}
li.insurance {
margin-right: 80px;
margin-left: 80px;
left: 15px;
position: relative;
color: white;
font-family: AvantGarde;
letter-spacing: .30em;
}
li.login-signup {
font-style: italic;
font-size: 10px;
position: relative;
left: 20px;
top: 5px;
font-family: Adelle PE;
letter-spacing: .30em;
color: white;
}
li.get-covered {
border-color: #EF7440;
border-style: solid;
color: white;
top: 3px;
font-size: 12px;
position: relative;
left: 35px;
letter-spacing: .30em;
font-family: Adelle PE;
}
li.get-covered {
margin-top: 15px;
padding-bottom: 10px !important;
padding-top: 10px !important;
}
li.login-signup {
padding-top: 30px !important;
position: relative;
left: -35px;
}
li.insurance {
padding-top: 30px !important;
}
body {
border: 0;
margin: 0;
height: 100%;
min-height: 100%;
overflow-x: hidden;
}
.header h1 {
padding-left: 110px;
color: white;
text-align: center;
font-size: 25px;
left: -175px;
letter-spacing: .300em;
position: relative;
top: -613px;
font-family: "AvantGarde";
text-transform: uppercase;
}
This is my way. You should create a div contain BESPOKE INSURANCE SOLUTIONS, set position: absolute, align: top left. It's keep text no changes.