Okay so basically I have a chat app I made and it appends a paragraph to the chat class which is inside a div which the class chat is a section but when I make enough messages it would put the messages outside the section as in like the background color would only show for a certain amount of messages then just be normal so like the height of it is broken for some reason and I can't figure out how to fix that.
$('.chat').append('<p id="' + Math.random() + '"><strong style=color:' +
data.color + '> ' + data.user + '</strong> <span style=color:"black">' +
data.message + '</span></p>');
* {
box-sizing: border-box;
transition: all .3s ease;
}
html {
background: #eee;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
main {
width: calc(100% - 20px);
max-width: 500px;
margin: 0 auto;
font-family: 'Mukta Malar', Arial;
/*font-family: Helvetica, Arial, Sans, sans-serif;*/
}
h1 {
margin: 0;
padding: 10px 0;
font-size: 32px;
}
.user-count {
font-size: 32px;
}
.chat {
content: '';
width: 100%;
height: calc(100vh - 165px);
background: #ffffff;
opacity: 90%;
padding: 5px 10px;
/*this is for the msgs */
}
.adminTools {
content: '';
width: 100%;
height: calc(100vh - 165px);
background: white;
opacity: 90%;
padding: 0px 20px;
}
.chat p {
margin: 0 0 5px 0;
}
input[type=color],
button {
/*input alonwas here too*/
width: 100%;
font: inherit;
background: #fff;
border: none;
margin-top: 10px;
padding: 5px 10px;
}
button:hover {
cursor: pointer;
background: #ddd;
}
#media all and (min-width: 500px) {
.chat {
height: 300px;
/* height: calc(100vh - 140px);*/
}
input {
width: calc(100% - 160px);
}
button {
float: right;
width: 150px;
}
}
.scroller {
height: 500px;
overflow-y: scroll;
/* scroll-snap-type: y mandatory; */
}
.scroller section {
scroll-snap-align: start;
}
div {
overflow: auto;
}
#colorPicker {
width: 100%;
font: inherit;
border: none;
margin-top: 10px;
padding: 5px 10px;
}
.adminTitle {
font-size: 25px;
}
.noscroll {
overflow: hidden !Important
}
input[type=color] {
width: 70px !important;
height: 70px !important;
border-radius: 100%;
overflow: hidden;
}
input[type=color]::-webkit-color-swatch {
border: solid;
border-radius: 100%;
padding: 50%;
border-color: white;
}
.userDiv {
position: fixed;
}
html {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
}
html,
body {
margin: 0;
height: 100%;
overflow: hidden;
}
* {
box-sizing: inherit;
&:before,
&:after {
box-sizing: inherit;
}
}
/*remove this if it breaks*/
body {
height: 100vh;
display: grid;
-webkit-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
}
* {
box-sizing: border-box;
}
.inp {
position: relative;
margin: auto;
width: 100%;
max-width: 280px;
border-radius: 3px;
overflow: hidden;
}
.inp .label {
position: absolute;
top: 20px;
left: 12px;
font-size: 16px;
color: rgba(0, 0, 0, 0.5);
font-weight: 500;
transform-origin: 0 0;
transform: translate3d(0, 0, 0);
transition: all 0.2s ease;
pointer-events: none;
}
.inp .focus-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.05);
z-index: -1;
transform: scaleX(0);
transform-origin: left;
}
.inp input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
border: 0;
padding: 16px 12px 0 12px;
height: 56px;
font-size: 16px;
font-weight: 400;
background: rgba(0, 0, 0, 0.02);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
color: #000;
transition: all 0.15s ease;
}
.inp input:hover {
background: rgba(0, 0, 0, 0.04);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}
.inp input:not(:-moz-placeholder-shown)+.label {
color: rgba(0, 0, 0, 0.5);
transform: translate3d(0, -12px, 0) scale(0.75);
}
.inp input:not(:-ms-input-placeholder)+.label {
color: rgba(0, 0, 0, 0.5);
transform: translate3d(0, -12px, 0) scale(0.75);
}
.inp input:not(:placeholder-shown)+.label {
color: rgba(0, 0, 0, 0.5);
transform: translate3d(0, -12px, 0) scale(0.75);
}
.inp input:focus {
background: rgba(0, 0, 0, 0.05);
outline: none;
box-shadow: inset 0 -2px 0 #0077FF;
}
.inp input:focus+.label {
color: #0077FF;
transform: translate3d(0, -12px, 0) scale(0.75);
}
.inp input:focus+.label+.focus-bg {
transform: scaleX(1);
transition: all 0.1s ease;
}
.btn {
border: none;
border-radius: 5px;
padding: 12px 24px;
font-size: 16px;
cursor: pointer;
color: #fff;
background-color: #4c6e87;
box-shadow: 0 2px 8px -2px rgba(60, 83, 199, 0.5);
outline: none;
-webkit-tap-highlight-color: transparent;
transform: translateY(0);
}
.btn.ripple {
background-position: center;
transition: background 0.8s;
}
.btn.ripple:hover {
background: #3f5a6e radial-gradient(circle, transparent 1%, #3f5a6e 1%) 50%/16000%;
}
.btn.ripple:active {
background-color: #3f5a6e;
background-size: 100%;
transition: background 0s, transform 0.2s;
transform: translateY(1px);
}
<head>
<title>Msged</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<main>
<header>
<center>
<h1 class="user-count">Online: 0</h1>
</center>
</header>
<!-- <article class="scroller"> -->
<div id="maindiv1">
<!-- style="height:400px;"> -->
<section class="chat"></section>
<!-- </article> -->
</div>
<form>
<label for="inp" class="inp">
<input type="text" placeholder="Message #main" />
<!-- <input type="text" style="border-radius: 25px; border: 1px inline black;" placeholder="Say something" /> -->
</label>
<!-- <input type="file" id="myFile" name="filename"> -->
<button class="btn ripple">Send</button>
</form>
</main>
<main>
<header>
<form>
<h1 id="colorPicker">
</h1>
<h1 id="userChecker">
</h1>
<!-- <button id="colorBtn">Change Colour</button> -->
</form>
</header>
</main>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://unpkg.com/cookie_js#1.2.2/cookie.min.js"></script>
<script src="https://unpkg.com/socket.io-client#2/dist/socket.io.slim.js"></script>
</body>
Adding overflow: auto; to .chat in the css-file lets the section scroll and keep its background.
Related
I'm doing a simple dice game with HTML, CSS, and JS.
So whenever I reload the page the dice will change OR press the shuffle button the dice will change i.e; it refreshes the whole page but I want to refresh only one div("context div") Because I added animated background So whenever the page reloads the background also starting from the beginning so I don't want to reload the whole page, So please can anyone help me
This is my code
var randomNumber1 = Math.floor(Math.random() * 6) + 1;
var randomDiceImage = "dice" + randomNumber1 + ".png";
var randomImageSource = "https://raw.githubusercontent.com/JallaJaswanth/Dice-Game/main/images/" + randomDiceImage;
var image1 = document.querySelectorAll("img")[0];
image1.setAttribute("src", randomImageSource);
var randomNumber2 = Math.floor(Math.random() * 6) + 1;
var randomImageSource2 = "https://raw.githubusercontent.com/JallaJaswanth/Dice-Game/main/images/dice" + randomNumber2 + ".png";
document.querySelectorAll("img")[1].setAttribute("src", randomImageSource2);
if (randomNumber1 > randomNumber2) {
document.querySelector("h1").innerHTML = "Player 1 Wins!";
} else if (randomNumber2 > randomNumber1) {
document.querySelector("h1").innerHTML = "Player 2 Wins!";
} else {
document.querySelector("h1").innerHTML = "Draw!";
}
.container {
width: 70%;
margin: auto;
text-align: center;
}
.dice {
text-align: center;
display: inline-block;
}
body {
background-color: #393E46;
}
h1 {
margin: 30px;
font-family: 'Lobster', cursive;
text-shadow: 5px 0 #232931;
font-size: 8rem;
color: #4ECCA3;
}
p {
font-size: 2rem;
color: #4ECCA3;
font-family: 'Indie Flower', cursive;
}
img {
width: 80%;
}
footer {
margin-top: 5%;
color: #EEEEEE;
text-align: center;
font-family: 'Indie Flower', cursive;
}
.button {
color: #fff;
margin-top: 5%;
padding: 15px 35px;
background-color: #38D2D2;
background-image: radial-gradient(93% 87% at 87% 89%, rgba(0, 0, 0, 0.23) 0%, transparent 86.18%), radial-gradient(66% 66% at 26% 20%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 69.79%, rgba(255, 255, 255, 0) 100%);
box-shadow: inset -3px -3px 9px rgba(255, 255, 255, 0.25), inset 0px 3px 9px rgba(255, 255, 255, 0.3), inset 0px 1px 1px rgba(255, 255, 255, 0.6), inset 0px -8px 36px rgba(0, 0, 0, 0.3), inset 0px 1px 5px rgba(255, 255, 255, 0.6), 2px 19px 31px rgba(0, 0, 0, 0.2);
border-radius: 14px;
font-weight: bold;
font-size: 16px;
border: 0;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
cursor: pointer;
}
#import url('https://fonts.googleapis.com/css?family=Exo:400,700');
* {
margin: 0px;
padding: 0px;
}
body {
font-family: 'Exo', sans-serif;
}
.context {
width: 100%;
position: absolute;
top: 5vh;
}
.context-2 {
font-size: larger;
font-weight: bolder;
width: 100%;
position: absolute;
top: 60vh;
}
.context h1 {
text-align: center;
color: #fff;
font-size: 50px;
}
.area {
background: #4e54c8;
background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);
width: 100%;
height: 100vh;
}
.circles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.circles li {
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.2);
animation: animate 25s linear infinite;
bottom: -150px;
}
.circles li:nth-child(1) {
left: 25%;
width: 80px;
height: 80px;
animation-delay: 0s;
}
.circles li:nth-child(2) {
left: 10%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 12s;
}
.circles li:nth-child(3) {
left: 70%;
width: 20px;
height: 20px;
animation-delay: 4s;
}
.circles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 18s;
}
.circles li:nth-child(5) {
left: 65%;
width: 20px;
height: 20px;
animation-delay: 0s;
}
.circles li:nth-child(6) {
left: 75%;
width: 110px;
height: 110px;
animation-delay: 3s;
}
.circles li:nth-child(7) {
left: 35%;
width: 150px;
height: 150px;
animation-delay: 7s;
}
.circles li:nth-child(8) {
left: 50%;
width: 25px;
height: 25px;
animation-delay: 15s;
animation-duration: 45s;
}
.circles li:nth-child(9) {
left: 20%;
width: 15px;
height: 15px;
animation-delay: 2s;
animation-duration: 35s;
}
.circles li:nth-child(10) {
left: 85%;
width: 150px;
height: 150px;
animation-delay: 0s;
animation-duration: 11s;
}
#keyframes animate {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
border-radius: 0;
}
100% {
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
border-radius: 50%;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Let's Play Dice</title>
</head>
<body>
<div class="area">
<ul class="circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div class="context">
<div class="container">
<h1>Refresh Me</h1>
<div class="dice">
<p>Player 1</p>
<img class="img1" src="images/dice6.png">
</div>
<div class="dice">
<p>Player 2</p>
<img class="img2" src="images/dice6.png">
</div>
</div>
<div class="container">
<main>
<button class="button" onClick="window.location.reload();"><span>Suffle</span></button>
</main>
</div>
</div>
</body>
</html>
so please suggest to me how to reload only specific div(Only dice should change) rather than the whole page
Thanks In Advance.😊
To reload a section of the page, you could use jquerys load In your case it could be like this:
function updateDiv()
{
$( "#divId" ).load(window.location.href + " #divId" );
}
Note: divId is the id of the div you want to reload
Don't disregard the space within the load element selector: + " #here"
This function can be called within an interval, or attached to a click event
This is a movie review app. Once you get past the 3rd row on PC and I believe the 3rd or 4th movie listing on mobile, it cuts off the review as seen in the image below. Only the buttons are cut off in that image, but if I added another row, it would be 100% cut off/hidden.
I tried adding height: 100% width:100% to my html and body elements, but that adds a second vertical scrollbar when I show the movie listings?
How can i fix this?
This is my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/2a0c07254d.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="./css/main.css"></link>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;400;500;700&display=swap" rel="stylesheet">
<link rel="icon" href="./public/favicon.ico">
<title>Reviewer</title>
</head>
<body>
<div id="notification">
</div>
<header>
<h1>Reviewer</h1>
<h5>Create a movie review below or search for movie reviews by the movie title!</h5>
</header>
<div id="error-div"></div>
<form autocomplete="on" class="create-movie-form" action="submit">
<label for="title">Movie Title:</label>
<input type="text" name="title" alt="Movie title" id="title" placeholder="Movie Title" />
<label for="runtime">Movie Runtime (in minutes, numbers only):</label>
<input type="text" name="runtime" alt="Movie Runtime" id="runtime" placeholder="Runtime" />
<label for="rating">Movie Rating (Between 1 and 10, numbers only):</label>
<input type="text" name="rating" alt="Movie Rating" id="rating" placeholder="What's your rating for this movie?" />
<label for="review">Movie Review:</label>
<textarea name="review" alt="Movie Review" id="review" rows="4" cols="50" placeholder="Movie review"></textarea>
<button type="submit" id="create-btn">Create movie review</button>
</form>
<form autocomplete="on" id="get-movies-form" action="submit">
<label class='search-by-title-label' for="search-for-movie-input">Search by movie title:</label>
<div class="get-movies-div">
<input type='search' name="search-for-movie-input" alt="Search input" id='movie-title-to-search-input' placeholder="Search" />
<button id="get-movie-by-name-btn">Search</button>
</div>
</form>
<button id='display-all-movies-btn'>Display All Listings</button>
<div id='movie-list'></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="../node_modules/axios/dist/axios.min.js"></script>
<script src="./js/functions.js"></script>
<script src="./js/movies.js"></script>
<script src="./js/main.js"></script>
</body>
</html>
This is my CSS
html, body {
font-family: 'Montserrat', sans-serif;
scroll-behavior: smooth;
overflow-x: hidden;
background: #fff;
}
* {
box-sizing: border-box;
}
/* KEYFRAMES */
#keyframes notificationSlideDown {
0%, 100% { transform: translateY(-50px);}
10%, 90% { transform: translateY(0px);}
}
#-webkit-keyframes notificationSlideDown {
0%, 100% { -webkit-transform: translateY(-50px);}
10%, 90% { -webkit-transform: translateY(0px);}
}
#-moz-keyframes notificationSlideDown {
0%, 100% { -moz-transform: translateY(-50px);}
10%, 90% { -moz-transform: translateY(0px);}
}
#keyframes sectionSlideDown {
0% { transform: translateY(-15%);}
100%{ transform: translateY(0);}
}
#keyframes h1-SlideDown {
0% { transform: translateY(-20%);}
100%{ transform: translateY(0);}
}
#keyframes h5-SlideDown {
0% {opacity: 0;}
0% { transform: translateY(-100%)}
100%{ transform: translateY(0);}
100% {opacity: 1;}
}
#keyframes fadeIn {
0% { opacity: 0;}
100% {opacity: 1;}
}
/* Notification box */
#notification {
display: none;
font-size: 20px;
font-weight: bolder;
position: fixed;
z-index: 101;
top: 0;
left: 0;
right: 0;
background: rgb(255, 255, 255);
color: rgb(0, 119, 255);
text-align: center;
line-height: 2.5;
overflow: hidden;
-webkit-box-shadow: 0 0 5px #000;
-mox-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
#close {
margin: auto;
color: #000;
z-index: 102;
}
.notification-animation {
animation: notificationSlideDown 1.5s ease forwards;
}
/* Header Elements */
header {
text-align: center;
letter-spacing: 1.5px;
color: rgb(0, 119, 255);
font-weight: bold;
}
h1, h5 {
margin-top: 5%;
margin-bottom: 0;
}
h1 {
font-size: 40px;
animation: h1-SlideDown 1.2s ease;
}
h5 {
font-size: 12px;
padding: 0 3%;
animation: h5-SlideDown 1.3s ease;
}
/* DIVS */
.get-movies-div {
text-align: center;
display: flex;
flex-flow: row;
justify-content: space-around;
}
.delete-and-update-btn-div {
text-align: center;
width: 100%;
position: absolute;
bottom: 10px;
}
#error-div, #section-error-div {
color: rgb(243, 86, 86);
text-align: center;
}
#section-error-div {
position: relative;
top: 0;
}
/* FORMS */
.create-movie-form {
display: flex;
flex-direction: column;
border-radius: 15px;
margin: auto;
font-family: 'Montserrat', sans-serif;
background-color: #fff;
padding-bottom: 5%;
padding-top: 3%;
}
#get-movies-form {
margin-top: -5%;
}
/* LABELS */
label {
color: rgb(0, 119, 255);
display: block;
width: 100%;
margin-top: 6%;
margin-left: 15%;
font-size: 11px;
font-weight: bold;
letter-spacing: 1px;
}
.search-by-title-label {
margin-left: 15%;
}
/* INPUTS */
input, textarea {
font-family: 'Montserrat', sans-serif;
border-radius: 3px;
border: 1px rgb(173, 173, 173) solid;
margin: 0 auto auto auto;
padding: 2.5% 1.5%;
width: 70%;
}
input:focus, textarea:focus {
transition: .2s;
border-color: rgb(0, 119, 255);
outline: transparent;
}
#movie-title-to-search-input {
width: 44%;
}
/* BUTTONS */
button {
font-family: 'Montserrat', sans-serif;
outline: none;
padding: 2.2%;
border-radius: 5px;
font-weight: bolder;
font-size: 15px;
background: linear-gradient(90deg, rgb(0, 119, 255), rgb(0, 97, 243));
border: solid 1px transparent;
margin: 5% auto auto auto;
color: #fff;
letter-spacing: 1px;
}
button:hover {
cursor: pointer;
color: rgb(180, 180, 180);
transition: .2s;
transform: scale(.97);
background-color: rgb(0, 119, 255);
outline: rgb(0, 119, 255);
}
#create-btn {
width: 70%;
}
#get-movie-by-name-btn, #display-all-movies-btn {
font-weight: 700;
}
#get-movie-by-name-btn {
margin-top: 0;
margin-left: -14%;
width: 25%;
padding: 2.1% 1%;
}
#display-all-movies-btn {
margin-top: 5%;
margin-bottom: 7%;
width: 70%;
display: block;
}
.delete-btn, .update-btn {
margin: 0;
font-weight: 400;
padding: 1.5%;
width: 30%;
}
.delete-btn {
margin-right: 2%;
}
/* MOVIE LIST */
#movie-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-template-rows: 1fr;
grid-auto-flow: row;
column-gap: 1fr;
row-gap: 1fr;
margin-bottom: 5%;
overflow: hidden;
}
section {
border: 1px rgb(223, 223, 223) solid;
border-radius: 5px;
padding: 2%;
margin-top: 10%;
box-shadow: 0 10px 15px #d6d6d6;
outline: transparent;
background: #fff;
color: rgb(88, 88, 88);
position: relative;
animation:
sectionSlideDown .5s ease-out,
fadeIn .5s ease-in;
}
li {
list-style: none;
margin: 2% 0 5% -10%;
letter-spacing: .5px;
font-weight: 500;
color: rgb(0, 119, 255);
}
ul {
padding-bottom: 5%;
margin-bottom: 20%;
}
p {
display: inline;
overflow-wrap: break-word;
letter-spacing: .5px;
}
.rating,
.runtime,
.title,
.review {
color: rgb(65, 65, 65);
}
.id {
display: none;
}
#media only screen and (min-width: 768px) {
h5 {
font-size: 15px;
padding: 0 15%;
}
#error-div {
position: relative;
top: 40px;
}
label {
margin-top: 2%;
margin-left: 25%;
}
.search-by-title-label {
margin-left: 25%;
}
input, textarea {
width: 50%;
padding: 1.5%;
}
#movie-title-to-search-input {
width: 34%;
margin-right: 0;
}
#create-btn, #display-all-movies-btn {
width: 50%;
padding: 1.2%;
}
#get-movie-by-name-btn {
width: 15%;
padding: 1.3%;
margin: 0 25% 0 1%;
}
#movie-list {
grid-gap: 2.5%;
}
section {
margin-top: 0;
}
}
#media only screen and (min-width: 1024px) {
h5 {
font-size: 17px;
padding: 0 25%;
}
h1 {
margin: 1% 0 -3% 0;
font-size: 50px;
}
label {
margin-left: 32.5%;
}
.search-by-title-label {
margin-left: 32.5%;
}
input, textarea {
width: 35%;
padding: 1%;
}
#movie-title-to-search-input {
width: 26%;
margin-right: 0;
}
#create-btn, #display-all-movies-btn {
width: 35%;
padding: .9%;
margin-top: 1.5%;
}
#get-movie-by-name-btn {
width: 9%;
padding: .85%;
height: 10%;
margin: 0 32.4% 0 .25%;
}
}
#media only screen and (min-width: 1440px) {
#error-div {
top: 70px;
}
}
This is the HTML generated by my JavaScript for each movie review/section.
// Generate HTML for section elements holding movie data.
function generateHTML(res) {
const movie = res.data;
for (let i = 0; i<movie.length; i++) {
const sections = document.createElement('section');
sections.innerHTML = `
<div class='id'>${movie[i].id}</div>
<div id="section-error-div"></div>
<ul>
<li> Title: <p class='title'>${movie[i].title}</p> </li>
<li> Runtime: <p class='runtime'>${movie[i].runtime}</p> minutes</li>
<li> Rating: <p class='rating'>${movie[i].rating}</p>/10 </li>
<li> Review: <p class='review'>${movie[i].review}</p> </li>
</ul>
<div class="delete-and-update-btn-div">
<button class="delete-btn">Delete</button>
<button class="update-btn">Update</button>
</div>
`
movieListDiv.appendChild(sections);
}
}
Any help is appreciated!
Thank you!
I believe removing
overflow: hidden;
from
#movie-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-template-rows: 1fr;
grid-auto-flow: row;
column-gap: 1fr;
row-gap: 1fr;
margin-bottom: 5%;
overflow: hidden; <--- remove that
}
will fix that issue.
I am a Software Developer and working on creating a front End dashboard. I am supposed to create all this without using any plugins. Just pure JQuery and JavaScript and styling. I am developing a radial Gauge from scratch without plugins. I need to add the following to my gauge. Please help me with it.
Tick Marks showing Min Value and Max Value from 0 to 100.
body {
background: #fff;
}
#radial:before {
background: yellowgreen;
border-radius: 220px 220px 0 0;
/* box-shadow: 3px 1px 8px rgba(2, 1, 1, 0.15) inset; */
content: "";
height: 100px;
position: absolute;
width: 350px;
}
#radial {
border-radius: 400px 400px 0 0;
height: 100px;
margin: 50px auto 0;
overflow: hidden;
position: relative;
width: 200px;
}
#radial:after {
background: rgb(255, 255, 255);
border-radius: 140px 140px 0 0;
bottom: 0;
box-shadow: 3px 1px 8px rgba(0, 0, 0, 0.15);
/* color: rgba(255, 80, 0, 0.7); */
content: "";
font-family: Lato, Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 3.5em;
font-weight: 100;
height: 70px;
left: 30px;
line-height: 95px;
position: absolute;
text-align: center;
width: 140px;
}
#needle {
background: radial-gradient(black, red);
border-radius: 8px;
bottom: -4px;
/* box-shadow: 3px -1px 4px rgba(0, 0, 0, 0.4); */
display: block;
height: 8px;
position: absolute;
width: 100px;
transform-origin: 100% 4px;
transform: rotate(0deg);
transition:8s ;
z-index: 2;
/* border-top-left-radius: 5px;
border-top-right-radius: 5px; */
clip-path: polygon(100% 0%, 0% 50%, 100% 100% );
}
#radial:hover span {
transform: rotate(180deg);
}
/* h1,
p,
strong {
display: block;
font-family: Lato;
text-align: center;
}
h1 {
margin-bottom: 0.1em;
}
p {
margin-top: 0;
}
strong {
color: #be1e1e;
font-size: 2.5em;
} */
<html>
<head>
<tite></tite>
<link rel="stylesheet" href="GaugeCss_last.css">
<!-- <script type="text/javascript"></script> -->
</head>
<head>
</head>
<body>
<div id="radial" data-value="0">
<span id="needle" value="8"></span>
<span id="spacing"></span>
</div>
</body>
</html>
Maybe you can try to modify your current needle as a tick?
here is what im trying to do:
1-zoom in and rotate it in center(done)
2-open card(done)
3-View back of the card, and then go to the front of the opened card again.
Any tips on how to do it? im confused, ive tried with z-index and rotate transformations, but no luck at all.
Is it correct until now? what do you suggest and how can i achieve rotating to the back of the whole card, then to the front?
thank you in advance
function pers(){
document.getElementById("wrap").style.transform = "rotateX(0deg) rotate(0deg)";
document.getElementById("wrap").style.width = "250px";
document.getElementById("wrap").style.height = "500px";
}
function openCard() {
var button = document.getElementById('button');
if(button.innerHTML == 'Open Card') {
button.innerHTML = 'Close Card';
} else {
button.innerHTML = 'Open Card';
}
var cards = document.querySelectorAll('.card');
for(var i = 0; i < cards.length; i++) {
cards[i].classList.toggle('open');
}
}
body {
margin: 0;
background-color: grey;
/*background: radial-gradient(circle at center, rgba(50,50,50,1) 0%,rgba(14,14,14,1) 35%) */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
perspective: 1000px;
transform-style: preserve-3d;
}
img {
max-width: 100%;
}
*, *:after, *:before {
box-sizing: border-box;
}
h2 {
font-family: "Dancing Script", serif;
font-weight: normal;
font-size: 45px;
color: #009500;
text-align: center;
}
.wrap {
width: 125px;
height: 250px;
position: relative;
transform: rotateX(40deg) rotate(15deg);
transform-style: preserve-3d;
box-shadow: 15px 10px 5px rgba(0, 0, 0, 0.3);
transition: all 3s linear;
}
.card {
height: 100%;
width: 100%;
background-color: #fff;
border-radius: 2px;
position: relative;
border: 4px solid black;
text-align: center;
}
.card--front {
transform: rotateY(-20deg);
display: flex;
align-items: center;
justify-content: center;
transition: all 3.5s cubic-bezier(0.4, 0, 1, 1);
transform-origin: center left;
position: absolute;
top: 0;
left: 0;
z-index: 2;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.card--front.open {
transform: rotateY(-180deg);
box-shadow: 15px 10px 5px rgba(0, 0, 0, 0.3);
}
.card--front.back {
z-index: 0;
backface-visibility: visible;
-webkit-backface-visibility: visible;
}
.card--inner {
overflow: hidden;
padding: 15px;
}
.card--inner h2 {
font-size: 32px;
}
.card--inner img {
max-width: 60%;
margin-top: 1.5em;
}
.card--inner.open:before {
transform: translateX(-155%);
opacity: 0.1;
}
.card--inner:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
z-index: 1;
opacity: 1;
transition: all 1s ease-in-out;
}
button {
-webkit-appearance: none;
background: #E53935;
border: 5px solid #9f1815;
border-width: 0 0 5px;
padding: 10px 20px;
width: 150px;
text-align: center;
display: block;
transform: rotateX(30deg);
margin-top: 20px;
box-shadow: 0 4px 2px rgba(0, 0, 0, 0.3);
}
button:active {
border-bottom-width: 2px;
margin-top: 23px;
outline: none;
}
button:focus {
outline: none;
}
<div class="wrap" id="wrap">
<div class="card card--inner" style="background-color:white;">
<h2 style="display:inline;width:90%;height:20%;background-color:#8eb9ff;position:absolute;left:3%;top:4%;margin:0px 5px;"></h2>
<h2 style="display:inline;width:60%;height:10%;background-color:#8eb9ff;position:absolute;left:20%;top:28%;margin:0px 5px;"></h2>
<h2 style="display:inline;width:90%;height:37.5%;background-color:#8eb9ff;position:absolute;left:3%;top:41%;margin:0px 5px;"></h2>
<h2 style="display:inline;width:30%;height:10%;background-color:#8eb9ff;position:absolute;right:3%;top:84%;margin:0px 5px;"></h2>
</div>
<div id="cc" style="background-color:white;" class="card card--front back" onclick="openCard();">
<h2 style="display:inline;width:90%;height:46.5%;background-color:#8eb9ff;position:absolute;left:3%;top:51%;margin:0px 5px;z-index;1000;"></h2>
<h2 style="display:inline;width:90%;height:46.5%;background-color:#8eb9ff;position:absolute;left:3%;top:3%;margin:0px 5px;z-index;1000;"></h2>
</div>
<div class="card card--front" onclick="openCard();">
<h2 style="display:inline;width:90%;height:20%;background-color:#8eb9ff;position:absolute;left:3.5%;top:4%;margin:0px 5px;"></h2>
<h2 style="display:inline;width:60%;height:10%;background-color:#8eb9ff;position:absolute;left:20.5%;top:28%;margin:0px 5px;"></h2>
<h2 style="display:inline;width:80%;height:6%;background-color:#8eb9ff;position:absolute;left:9%;top:43%;margin:0px 5px;"></h2>
<h2 style="display:inline;width:90%;height:46.5%;background-color:#8eb9ff;position:absolute;left:4%;top:53%;margin:0px 5px;"></h2>
</div>
</div>
<button type="button" onclick="pers();setTimeout(openCard, 2000);" id="button">Open Card</button>
I am trying to create a list of notes on my website.
I currently have a problem where I have a gradient background color when you hover over the different note titles. This for some reason requires a height.
If I do not have this height attribute (the height attribute for .blur-container), the background won't switch colors when I hover. However, the note text is shown as expected:
Before clicking the title:
https://gyazo.com/4619429746b1de039987be48a7480917
After clicking the title:
https://gyazo.com/999277ba3939bfd875ca4562c935ac3c
If I DO have the height attribute, The background goes a little white as expected, however when I click on the title, the note text does not show.
When hovering over title:
https://gyazo.com/b70eddd96e45836296e20a21c329754a
What is the issue here and how can I fix it? I pasted my html and CSS below:
HTML:
<div class="task-notes-container">
<input type="text" value="" class="form-control task-notes" placeholder="Title" (keyup)="addNotesItem($event)" [(ngModel)]="newNotesTitle"/>
<i (click)="addNotesItem($event)" class="add-item-icon ion-plus-round"></i>
<div class="box-shadow-border"></div>
<ul class="notes-list">
<li *ngFor="let item of getNotDeleted()" [ngClass]="{checked: item.isChecked, active: item.isActive}"
(mouseenter)="item.isActive=true" (mouseleave)="item.isActive=false">
<div class="blur-container" [ngClass]="{'changeHeight': item.expand}"><div class="blur-box"></div></div>
<div class="note-title" (click)="expandItem(item);">
<i class="mark" [ngStyle]="{ 'background-color': item.color }"></i>
<label>
<span class="cut-with-dots"><b>{{ item.title }}</b></span>
</label>
<i class="remove-notes ion-ios-close-empty" (click)="item.deleted = true"></i>
</div>
<div [hidden]="!item.expand">
<p [hidden]="item.hide || item.text == ''" (click)="noteTextClick(item, focusable);" [innerHTML]="item.text"></p>
<div [hidden]="!item.hide && item.text != ''">
<textarea placeholder="haha" [(ngModel)]="item.text" (blur)="onTextBlur(item);" (focus)="onTextFocus(item);" placeholder="Default Input" class="form-control" id="textarea01" #focusable></textarea>
</div>
</div>
</li>
</ul>
</div>
CSS:
#import '../../../theme/sass/conf/conf';
input.task-notes {
margin-bottom: 8px;
}
ul.notes-list {
margin: 0;
padding: 0;
.placeholder, .ui-sortable-placeholder {
}
li {
margin: 0 0 -1px 0;
padding: 12px;
list-style: none;
position: relative;
border: 1px solid $input-border;
cursor: grab;
div.note-title {
height: 42px;
}
i.remove-notes {
position: absolute;
cursor: pointer;
top: 0px;
right: 12px;
font-size: 32px;
transition: color 0.2s;
color: rgba($input-border, 0.5);
visibility: hidden;
line-height: 42px;
&:hover {
color: $input-border;
}
}
&:hover {
i.remove-notes {
visibility: visible;
}
}
&.checked {
.notes-text {
color: $content-text;
}
&:before {
background: $input-border !important;
}
}
i.mark {
display: block;
position: absolute;
top: -1px;
left: -1px;
height: 42px;
min-width: 4px;
background: $input-border;
cursor: pointer;
transition: min-width 0.3s ease-out;
}
&.active {
i.mark {
min-width: 40px;
}
label.notes-checkbox > span {
&:before {
color: white;
content: '\f10c';
margin-right: 20px;
transition: margin-right 0.1s ease-out;
transition-delay: 0.2s;
float: none;
}
}
label.notes-checkbox > input:checked + span:before {
content: '\f00c';
}
}
}
}
label.notes-checkbox {
width: 100%;
padding-right: 25px;
min-height: 16px;
cursor: pointer;
> span {
white-space: nowrap;
height: 16px;
&:before {
border: none;
color: $help-text;
transition: all 0.15s ease-out;
}
}
}
.add-item-icon {
display: none;
}
.ng2, .blur {
.task-notes-container {
.notes-panel.panel {
color: white;
opacity: 0.9;
}
input.task-notes {
color: white;
width: calc(100% - 25px);
border-radius: 0;
border: none;
background: transparent;
&:focus {
outline: none;
background-color: transparent;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
}
}
.add-item-icon {
display: block;
float: right;
margin-top: -45px;
margin-right: 5px;
font-size: 25px;
cursor: pointer;
}
ul.notes-list {
li {
margin: 0;
border: none;
font-weight: $font-light;
.blur-container {
height: 40px;
position: absolute;
width: calc(100% + 40px);;
top: 0;
left: -25px;
overflow-y: hidden;
}
.changeHeight {
height: auto;
}
&:hover {
.blur-container {
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
}
.blur-box {
cursor: pointer;
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
-webkit-filter: blur(3px);
}
}
i.remove-notes {
color: white;
opacity: 0.4;
&:hover {
color: white;
opacity: 0.95;
}
}
i.mark {
min-width: 40px;
display: none;
}
label.notes-checkbox > span {
&:before {
position: absolute;
color: $content-text;
content: '\f10c';
float: none;
margin-right: 6px;
transition: none;
}
}
&.checked {
label.notes-checkbox > span {
&:before {
content: '\f00c';
}
}
}
}
}
.box-shadow-border {
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.12);
width: calc(100% + 44px);
margin-left: -22px;
}
}
}