There is a input with type number where the user can write a number. If the number is greater than 4 it will change the color of the input border to red.
I want to show the tooltip in the same situation, not on hover. Is it a way to do that?
<div className="tooltip">
<input
className="partial-quantity-input"
type="number"
min="0"
max="4"
value={quantity}
onChange={changeValue}
/>
<span className="tooltiptext">Exceeds original ordered quantity.</span>
</div>
css:
.partial-quantity-input {
background: rgb(255, 255, 255);
border-radius: 0px;
border: 1px solid rgb(255, 255, 255);
height: 40px;
width: 40px;
outline: none;
&:focus {
border: 1px solid rgb(201, 200, 200);
}
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type='number'] {
-moz-appearance: textfield;
}
input:invalid {
outline: none;
border: 1px solid red;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
bottom: 100%;
left: 50%;
margin-left: -60px;
width: 120px;
color: rgb(0, 0, 0);
text-align: center;
padding: 5px 0;
background: rgb(255, 255, 255);
border-radius: 3px;
border: 1px solid rgb(220, 220, 220);
height: 38px;
width: 252px;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
as it is in the code, it shows the tooltip on hover (.tooltip:hover).
I tried .tooltip:invalid or .tooltip(input:invalid) but did not work.
Any ideas?
Using no combinator (better said: the Descendant Combinator) like this .element1 .element2 will make CSS look for any element that fits the .element2-selector that is a descendant of .element1. This means, .element2 can either be a direct or indirect child of .element1.
For your case you should use a sibling combinator, ~ (General Sibling Combinator) or + (Adjacent Sibling Combinator) to select .tooltiptext for when input can be selected using the :invalid-selector.
.tooltip input:invalid ~ .tooltiptext {
/* Your CSS-rule to make `.tooltiptext` visible */
}
Another solution
Just for this question I created a CSS tool-class .tooltipped. Simply format your <input> like the following to incorporate the tooltip (the classes in the brackets are options one of which needs to be chosen):
<div class="tooltipped (top | bottom | left | right)">
<input />
<div class="(on-invalid | always)">
<div>
<div>
(Place your content here)
</div>
</div>
</div>
</div>
The content you place in (Place your content here) can be a simple message up to more HTML-code. When simply inserting a message, you might want to set white-space: pre to retain its formatting, as it would otherwise try to keep the tooltip as narrow as possible.
Since the tooltip is placed using position: absolute, you should make sure yourself that the tooltip to be shown has enough space to be read when being displayed.
Changing the side on which the tooltip should be shown is as easy as changing the directional class of .tooltipped. This can even be done easily with JavaScript.
For example, you could change the directional-class when the phone might be too small to display the tooltip in its initial direction.
Obviously, you can make the input-element be of any type. If you want to invalidate it yourself (e.g. when :invalid wouldn't trigger), you can give it the class .invalid with JS for the same effect regarding this tooltip's features.
Here is an example showing basically all the available features:
/* For this example */
html, body {
margin: 0;
width: 100%;
height: 100%;
}
body {
display: grid;
grid-template-areas:
". ."
". .";
align-items: center;
justify-items: center;
}
input:invalid {
border-color: red;
outline-color: red;
background: pink;
}
/* Tool-class: Tooltip */
.tooltipped * {margin: 0}
.tooltipped {
--tt-bg: #3f3f3f;
display: flex;
align-items: center;
}
.tooltipped > div {
position: relative;
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
}
.tooltipped > div > div {
position: absolute;
display: flex;
align-items: center;
}
.tooltipped > div > div::before {
content: "";
border: 4px solid transparent;
}
.tooltipped > div > div > div {
padding: 0.1rem 0.4rem;
border-radius: 2px;
color: white;
background: var(--tt-bg);
}
/* Directional-classes */
.tooltipped.right > div > div {transform: translateX(50%)}
.tooltipped.right > div > div::before {border-right-color: var(--tt-bg)}
.tooltipped.left {flex-flow: row-reverse}
.tooltipped.left > div {justify-content: flex-end}
.tooltipped.left > div > div {flex-flow: row-reverse}
.tooltipped.left > div > div::before {border-left-color: var(--tt-bg)}
.tooltipped.top {flex-flow: column-reverse}
.tooltipped.top > div > div {
flex-flow: column-reverse;
transform: translateY(-50%);
}
.tooltipped.top > div > div::before {border-top-color: var(--tt-bg)}
.tooltipped.bottom {flex-flow: column}
.tooltipped.bottom > div > div {
flex-flow: column;
transform: translateY(50%);
}
.tooltipped.bottom > div > div::before {border-bottom-color: var(--tt-bg)}
/* "Listener"-classes */
.tooltipped input:invalid + .on-invalid,
.tooltipped input.invalid + .on-invalid {visibility: visible}
.tooltipped > .always {visibility: visible}
<div class="tooltipped top">
<input type="number" min="0" max="4"/>
<div class="on-invalid">
<div>
<div>
<p>I am a tooltip!</p>
</div>
</div>
</div>
</div>
<div class="tooltipped right">
<input type="number" min="0" max="4"/>
<div class="always">
<div>
<div>
<p>I am a tooltip!</p>
</div>
</div>
</div>
</div>
<div class="tooltipped bottom">
<input type="number" min="0" max="4"/>
<div class="on-invalid">
<div>
<div>
<p>I am a tooltip!</p>
</div>
</div>
</div>
</div>
<div class="tooltipped left">
<input type="number" min="0" max="4"/>
<div class="always">
<div>
<div>
<p>I am a tooltip!</p>
</div>
</div>
</div>
</div>
You can achieve the tooltip part using JavaScript:
For example:
let input = document.getElementById("quantity-input");
let tooltip = document.getElementById("invalid_entry");
input.addEventListener("keyup", function(e){
if(e.currentTarget.value.length > 4){
tooltip.innerHTML = "Exceeded length of 4";
tooltip.style.display = "block";
input.style.border = "3px solid red";
}
else if(e.currentTarget.value.length <= 4) {
tooltip.innerHTML = "";
tooltip.style.display = "none";
input.style.borderColor = "1px solid black";
}
})
.partial-quantity-input {
background: rgb(255, 255, 255);
border-radius: 0px;
border: 1px solid rgb(255, 255, 255);
height: 40px;
width: 40px;
outline: none;
&:focus {
border: 1px solid rgb(201, 200, 200);
}
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type='number'] {
-moz-appearance: textfield;
}
input:invalid {
outline: none;
border: 1px solid red;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
bottom: 100%;
left: 50%;
margin-left: -60px;
width: 120px;
color: rgb(0, 0, 0);
text-align: center;
padding: 5px 0;
background: rgb(255, 255, 255);
border-radius: 3px;
border: 1px solid rgb(220, 220, 220);
height: 38px;
width: 252px;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
#invalid_entry {
display: none;
background: orange;
padding: 6px;
color: #fff;
position: absolute;
left: 20px;
top: 28px;
}
<div className="tooltip">
<span id="invalid_entry"></span>
<input
className="partial-quantity-input"
id="quantity-input"
type="number"
min="0"
max="4"
/>
<!-- <span className="tooltiptext">Exceeds original ordered quantity.</span> -->
</div>
Fiddle Code
Related
I am a JS beginner and I have the following problem: I want that as soon as someone clicks on the URL icon inside the accordion the respective link is copied to the clipboard. Unfortunately (always) only the first link is copied to the clipboard, even if one clicks on the other two URL icons only the first link is copied. Although in the clipboard should be link 2 (from the value field) when i click on URL icon 2 (and the same for number 3 of course). I hope I have described the problem clearly enough.
Where is the error and what do I need to change on the JS code to make it work? Thanks a lot for the help in advance!
```
<!DOCTYPE html>
<html>
<head>
<title>My example Website</title>
<style>
body {
font-size: 21px;
font-family: Tahoma, Geneva, sans-serif;
max-width: 550px;
margin: 0 auto;
background-color: black;
}
input {
display: none;
}
label {
display: block;
padding: 8px 22px;
margin: 0 0 1px 0;
cursor: pointer;
background: #181818;
border: 1px solid white;
border-radius: 5px;
color: #FFF;
position: relative;
}
label:hover {
background: white;
border: 1px solid white;
color:black;
}
label::after {
content: '+';
font-size: 22px;
font-weight: bold;
position: absolute;
right: 10px;
top: 2px;
}
input:checked + label::after {
content: '-';
right: 14px;
top: 3px;
}
.content {
background: #DBEECD;
background: -webkit-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: -moz-linear-gradient(bottom right, #DBEECD, #EBD1CD);
background: linear-gradient(to top left, #DBEECD, #EBD1CD);
padding: 10px 25px 10px 25px;
border: 1px solid #A7A7A7;
margin: 0 0 1px 0;
border-radius: 1px;
}
input + label + .content {
display: none;
}
input:checked + label + .content {
display: block;
}
.whitepaper {
cursor: pointer;
text-align: center;
background-color: white;
border: 2px solid black;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
.blackframe {
text-align: center;
background-color: black;
cursor: pointer;
font-family: Tahoma, Geneva, sans-serif;
font-size:12px;
font-weight:bold;
margin: 12px 0 12px 0;
color: white;
width: 30px;
}
.whitepaper:hover {
cursor: pointer;
text-align: center;
background-color: black;
border: 2px solid white;
border-radius: 3px;
float: left;
margin: 5px 5px 5px 0;
height: 40px;
width: 30px;
}
/* Tooltip container */
.tooltip {
position: relative;
display: inline-block;
}
/* Tooltip text */
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<input type="checkbox" id="title1" name="contentbox" />
<label for="title1">Content 1</label>
<div class="content">
<div class="tooltip"><div class="whitepaper" onclick="myFunction()"><div class="blackframe"><span class="tooltiptext">Copy link 1 to clipboard</span>URL</div></div><input type="text" value="https://mywebsite.com/#title1" id="myInput"></div>
</div>
<input type="checkbox" id="title2" name="contentbox" />
<label for="title2">Content 2</label>
<div class="content">
<div class="tooltip"><div class="whitepaper" onclick="myFunction()"><div class="blackframe"><span class="tooltiptext">Copy link 2 to clipboard</span>URL</div></div><input type="text" value="https://mywebsite.com/#title2" id="myInput"></div>
</div>
<input type="checkbox" id="title3" name="contentbox" />
<label for="title3">Content 3</label>
<div class="content">
<div class="tooltip"><div class="whitepaper" onclick="myFunction()"><div class="blackframe"><span class="tooltiptext">Copy link 3 to clipboard</span>URL</div></div><input type="text" value="https://mywebsite.com/#title3" id="myInput"></div>
</div>
<script>
function myFunction() {
/* Get the text field */
var copyText = document.getElementById("myInput");
/* Select the text field */
copyText.select();
copyText.setSelectionRange(0, 99999); /* For mobile devices */
/* Copy the text inside the text field */
navigator.clipboard.writeText(copyText.value);
/* Alert the copied text */
alert("Copied: " + copyText.value);
}
</script>
</body>
</html>
```
Replace function myFunction like this:
function myFunction(event) {
var target = event.target;
var copyText = target.nextElementSibling;
navigator.clipboard.writeText(copyText.value);
alert("Copied: " + copyText.value);
}
then update all onclick attributes like this
onclick="myFunction(event)"
I found a few issues with your code
You didn't change the id number on the inputs so they all would alert to the same URL which made it difficult to tell which is being clicked on.
You are doing a query selection on an id that appears multiple times. This means it is not being fired on the clicked element.
My approach includes taking advantage of the clicked element by passing it in your click handler.
<div class="tooltip">
<div class="whitepaper" onclick="myFunction(event)">
<div class="blackframe"><span class="tooltiptext">Copy link 3 to clipboard</span>URL</div>
</div><input type="text" value="https://mywebsite.com/#title3" id="myInput">
</div>
This lets me pass that event to the function call which will give us access to the current target node.
function myFunction(event) {
/* Get the text field */
var copyText = event.target.parentNode.nextSibling.nextSibling.value
/* Copy the text inside the text field */
navigator.clipboard.writeText(copyText);
/* Alert the copied text */
alert("Copied: " + copyText);
}
In the above case, I had to do some weird traversing because your input is outside the scope of the clicked element. I removed the code related to mobile stuff because that wasn't relevant to this issue (feel free to put that back in).
here's the codepen with my example.
I have a text input nested in a parent div. When you type in the text input, a "delete text" button appears. When the "delete text" button appears, it causes its parent div "headerSearch" to decrease in height from 71px to 70px in Safari only.
When the "delete text" button is hidden again, the parent div "headerSearch" has it's height go back from 70px to 71px.
Why does displaying the "delete text" button cause the parent div "headerSearch" to change its height in Safari, and how do I prevent it?
Try the code snippet below using Safari where I reproduced the problem.
function deleteSearchBarContents() {
document.getElementById('searchBox').value = "";
document.getElementById("searchBox").focus();
document.getElementById("deleteSearchBarContentsButton").style.display = "none";
}
document.getElementById("deleteSearchBarContentsButton").addEventListener("click", deleteSearchBarContents);
function showDeleteSearchBarContentsButton() {
// If value is not empty
if (document.getElementById("searchBox").value.trim() == "") {
// Hide the element
document.getElementById("deleteSearchBarContentsButton").style.display = "none";
} else {
// Otherwise show it
document.getElementById("deleteSearchBarContentsButton").style.display = "inline-block";
}
}
document.getElementById("searchBox").addEventListener("keyup", showDeleteSearchBarContentsButton);
.wrapperSearch {
max-width: 100%;
overflow: hidden;
min-height: 1111px;
margin: 0 auto;
position: relative;
}
.headerSearch {
background: #3f3f3f;
position: relative;
display: inline-block;
width: 100%;
}
.entireSearchContainer {
margin-left: 29.034px;
}
.entireSearchContainer .searchBar {
display: inline-block;
width: 400px;
margin-top: 22.82px;
height: 46.978px;
background-color: #fff;
}
.entireSearchContainer .searchBar .searchBarInner {
display: inline-flex;
display: -webkit-inline-flex;
width: 100%;
height: 47px;
}
.entireSearchContainer .searchBar .searchBox {
flex: 1;
border: none;
background-color: transparent;
padding: 17.944px;
font-size: 16px;
outline: 0;
box-shadow: none;
-webkit-appearance: none;
}
.deleteSearchBarContentsButton {
display: none;
border: none;
background-color: transparent;
height: 46.978px;
border-radius: 2.618px;
margin-top: 0;
justify-content: center;
outline: 0!important;
cursor: pointer;
display: inline;
color: #252525!important;
display: none;
padding-right: 0;
width: 17.944px;
margin-left: 11.09px;
color: #888;
margin-right: 0;
overflow: hidden;
}
.entireSearchContainer .searchBar .searchButton {
border: none;
background-color: transparent;
height: 46.978px;
border-radius: 2.618px;
margin-top: 0;
width: 46.978px;
padding-right: 17.944px;
justify-content: center;
outline: 0!important;
cursor: pointer;
display: inline-block;
overflow: hidden;
}
.searchButton img {
width: 16px;
height: 16px;
vertical-align: middle!important;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
.deleteSearchBarContentsButton {
display: none;
padding-right: 0!important;
width: 17.944px!important;
margin-left: 11.09px!important;
}
.deleteSearchBarContentsButton img {
width: 11px!important;
height: 11px!important;
vertical-align: middle!important;
}
<div class="wrapperSearch">
<div class="headerSearch">
<div class="entireSearchContainer" id="entireSearchContainer">
<form id="searchForm" name="test" action="https://example.com/" method="GET">
<div class="searchBar" id="searchBar">
<div class="searchBarInner">
<input class="searchBox" id="searchBox">
<button class="deleteSearchBarContentsButton" id="deleteSearchBarContentsButton" type="button"><img src="https://th.bing.com/th/id/R.f8232e70a6e015e91560068ebde56fb4?rik=LZu9qZIqj6SnLw&riu=http%3a%2f%2fcdn.onlinewebfonts.com%2fsvg%2fimg_376399.png&ehk=mpYEtMisrcWebqodks%2fXno%2fbN9QmLfHuo7tMTVFKGnE%3d&risl=&pid=ImgRaw&r=0"></button>
<button class="searchButton" type="submit" value="Search"><img src="https://th.bing.com/th/id/OIP.-9A-FOvJIk9-zy2b0vofXAHaHX?pid=ImgDet&rs=1"></button>
</div>
</div>
</form>
</div>
</div>
</div>
.entireSearchContainer .searchBar {
display: block;
}
I'm embarrassed this is the solution. Safari didn't like it when the "searchBar" was display: inline-block; even though other browsers it was fine.
As it says in the title. I know Django well, but am still getting the hang of using JS for this type of thing. I am iterating over the cards with {% for project in projects %}, and everything is showing up as it should. And, when I click the button on the first card, it flips the card perfectly. However, when I click the button of any other card, they also flip the first card as well, instead of flipping the next card itself. I think it has something to do with the id of the divs or labels, and have tried a few things but I haven't quite figured it out.
Here is the necessary HTML:
<div class="wrapper">
{% for project in projects %}
<div class="card">
<input type="checkbox" id="card1" class="more" aria-hidden="true">
<div class="content">
<div class="front"
style="background-image: url({{ project.image }})">
<div class="inner">
<h2>{{ project.title}}</h2>
<label for="card1" class="button" aria-hidden="true">
Details
</label>
</div>
</div>
<div class="back">
<div class="inner">
<div class="info">
</div>
<div class="description">
<p>{{ project.description }}</p>
</div>
<div class="location">Warsaw, Poland</div>
<div class="price">38€ / day</div>
<label for="card1" class="button return" aria-hidden="true">
<i class="fas fa-arrow-left"></i>
</label>
</div>
</div>
</div>
</div>
{% endfor %}
The CSS pertaining to the cards:
<style>
.wrapper {
display: flex;
flex-flow: row wrap;
justify-content: center;
}
.card {
width: 420px;
height: 340px;
margin: 1em;
perspective: 1500px;
}
.card .content {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.8s cubic-bezier(0.75, 0, 0.85, 1);
}
.more:checked ~ .content {
transform: rotateY(180deg);
}
.front,
.back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
backface-visibility: hidden;
transform-style: preserve-3d;
border-radius: 6px;
}
.front .inner,
.back .inner {
height: 100%;
display: grid;
padding: 1.5em;
transform: translateZ(90px) scale(0.75);
}
.front {
background-color: #fff;
background-size: cover;
background-position: center center;
}
.front:after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
border-radius: 6px;
backface-visibility: hidden;
background-image: url("{{ project.image }}");
}
.front .inner {
grid-template-rows: 5fr 1fr 1fr 2fr 1fr;
justify-items: center;
}
.front h2 {
grid-row: 2;
margin-bottom: 0.3em;
text-transform: uppercase;
letter-spacing: 3px;
color: #fff;
font-weight: 500;
text-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
}
.front .rating i {
margin: 0 1px;
}
.back {
transform: rotateY(180deg);
background-color: #fff;
border: 2px solid #f0f0f0;
}
.back .inner {
grid-template-rows: 1fr 2fr 1fr 2fr 14fr 1fr 1fr;
grid-template-columns: repeat(3, auto);
grid-column-gap: 0.8em;
justify-items: center;
}
.back .info {
position: relative;
display: flex;
align-items: center;
color: #355cc9;
grid-row: 3;
}
.back .info:not(:first-of-type):before {
content: "";
position: absolute;
left: -0.9em;
height: 18px;
width: 1px;
background-color: #ccc;
}
.back .info span {
font-size: 2em;
font-weight: 700;
}
.back .info i {
font-size: 1.2em;
}
.back .info i:before {
background: linear-gradient(40deg, #355cc9, #438af3);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
.back .info .icon {
margin-left: 0.3em;
}
.back .info .icon span {
display: block;
margin-top: -0.25em;
font-size: 0.8em;
font-weight: 600;
white-space: nowrap;
}
.back .description {
grid-row: 5;
grid-column: 1/-1;
font-size: 0.86em;
border-radius: 5px;
font-weight: 600;
line-height: 1.4em;
overflow: auto;
color: #355cc9;
padding-right: 10px;
}
.back .location,
.back .price {
font-weight: 600;
color: #355cc9;
grid-row: 1;
font-size: 0.86em;
}
.back .location {
grid-column: 1/3;
justify-self: left;
}
.back .price {
grid-column: 3/-1;
justify-self: right;
}
.back .button {
grid-column: 1/-1;
justify-self: center;
}
.button {
grid-row: -1;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
cursor: pointer;
display: block;
padding: 0 1.5em;
height: 3em;
line-height: 2.9em;
min-width: 3em;
background-color: transparent;
border: solid 2px #fff;
color: #fff;
border-radius: 4px;
text-align: center;
left: 50%;
backface-visibility: hidden;
transition: 0.3s ease-in-out;
text-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}
.button:hover {
background-color: #fff;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
text-shadow: none;
color: #355cc9;
}
.button.return {
line-height: 3em;
color: #355cc9;
border-color: #355cc9;
text-shadow: none;
}
.button.return:hover {
background-color: #355cc9;
color: #fff;
box-shadow: none;
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #859ddf;
}
::-webkit-scrollbar-thumb:hover {
background: #355cc9;
}
</style>
And the javascript (I had a different jquery script at one point but this is what I've got now:
(function () {
var tab = document.querySelector('.card');
document.getElementById('card1').addEventListener('click', function () {
tab.classList.add('back');
}, false);
document.getElementById('card1').addEventListener('click', function () {
tab.classList.remove('front');
}, false);
})();
</script>
I'm not sure if anything else would be helpful, but if anybody has a good idea of what may be going on it would be incredibly helpful. This is the only snag I've hit where I've had to ask a question for my last few projects. It's just annoying. Thanks.
The reason why all buttons only flip the first card is just because your id is hardcoded with "card1", the id's value on html should be unique. The "card1" id is only targetting the first element that use the same id
<input type="checkbox" id="card1" class="more" aria-hidden="true">
You should generate dynamic id for each iteration, so for example you could generate the ids value with "card1", "card2", "card3", etc.
Same with the js
document.getElementById('card1').addEventListener('click', function () {
tab.classList.add('back');
}, false);
document.getElementById('card1').addEventListener('click', function () {
tab.classList.remove('front');
}, false);
You should create dynamic event listener for each id
See how the html id works on HTML id
So, after Dhia Aziz Rizqi confirmed my suspicion that it was, in fact, the ID that was the issue; and there wasn't any other underlying issue,I immediately went to try and dynamically call the project ID with Django inside the JS function. It worked perfectly.
I hadn't used Django template tags inside of a JS function before, so I wasn't sure how it would go, but for anyone else who happens to come across this issue...
The javascript needed to change to this:
<script>
(function () {
var tab = document.querySelector('.card');
document.getElementById('{{ project.id }}').addEventListener('click', function () {
tab.classList.add('back');
}, false);
document.getElementById('{{ project.id }}').addEventListener('click', function () {
tab.classList.remove('front');
}, false);
})();
</script>
And the HTML to this:
<div class="wrapper">
{% for project in projects %}
<div class="card">
<label for="{{ project.id }}"></label><input type="checkbox" id="{{ project.id }}" class="more" aria-hidden="true">
<div class="content">
<div class="front"
style="background-image: url({{ project.image }})">
<div class="inner">
<h2>{{ project.title}}</h2>
<label for="{{ project.id }}" class="button" aria-hidden="true">
Details
</label>
</div>
</div>
<div class="back">
<div class="inner">
<div class="info">
</div>
<div class="description">
<p>{{ project.description }}</p>
</div>
<div class="location">Warsaw, Poland</div>
<div class="price">38€ / day</div>
<label for="{{ project.id }}" class="button return" aria-hidden="true">
<i class="fas fa-arrow-left"></i>
</label>
</div>
</div>
</div>
</div>
{% endfor %}
The solution was to simply add the project ID dynamically in place of a fixed ID.
It works wonderfully with Django.
I would like to add inline CSS to the left and right messages that are generated, for example the left text is red and the right text is blue. (I know it's best to style in the CSS, but I'm testing something else). So I will have this HTML:
<ul class="messages">
<li class="message left appeared">
<div class="text_wrapper">
<p class="text" style="color:red;">blabla</p>
</div>
</li>
<li class="message right appeared">
<div class="text_wrapper">
<p class="text" style="color:blue;">blabla</p>
</div>
</li>
</ul>
Please see the code as reference for the functionality. Many thanks for your help.
(function() {
var Message;
Message = function({
text: text1,
message_side: message_side1
}) {
this.text = text1;
this.message_side = message_side1;
this.draw = () => {
var $message;
$message = $($('.message_template').clone().html());
$message.addClass(this.message_side).find('.text').html(this.text);
$('.messages').append($message);
return setTimeout(function() {
return $message.addClass('appeared');
}, 0);
};
return this;
};
$(function() {
var getMessageText, message_side, sendMessage;
message_side = 'right';
getMessageText = function() {
var $message_input;
$message_input = $('.message_input');
return $message_input.val();
};
sendMessage = function(text) {
var $messages, message;
if (text.trim() === '') {
return;
}
$('.message_input').val('');
$messages = $('.messages');
message_side = message_side === 'left' ? 'right' : 'left';
message = new Message({text, message_side});
message.draw();
return $messages.animate({
scrollTop: $messages.prop('scrollHeight')
}, 300);
};
$('.send_message').click(function(e) {
return sendMessage(getMessageText());
});
$('.message_input').keyup(function(e) {
if (e.which === 13) { // enter key
return sendMessage(getMessageText());
}
});
});
}).call(this);
* {
box-sizing: border-box;
}
.chat_window {
position: absolute;
width: calc(100% - 20px);
max-width: 600px;
height: 440px;
background-color: #fff;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
border: 1px solid #ddd;
overflow: hidden;
}
.messages {
position: relative;
list-style: none;
padding: 20px 10px 0 10px;
margin: 0;
height: 347px;
overflow: scroll;
}
.messages .message {
clear: both;
overflow: hidden;
margin-bottom: 20px;
transition: all 0.5s linear;
opacity: 0;
}
.messages .message.left .text_wrapper {
background-color: #ddd;
margin-left: 20px;
}
.messages .message.left .text_wrapper::after, .messages .message.left .text_wrapper::before {
right: 100%;
border-right-color: #ddd;
}
.messages .message.left .text,
.messages .message.right .text {
color: #000;
margin: 0;
}
.messages .message.right .text_wrapper {
background-color: #ddd;
margin-right: 20px;
float: right;
}
.messages .message.right .text_wrapper::after, .messages .message.right .text_wrapper::before {
left: 100%;
border-left-color: #ddd;
}
.messages .message.appeared {
opacity: 1;
}
.messages .message .text_wrapper {
display: inline-block;
padding: 20px;
width: calc(100% - 85px);
min-width: 100px;
position: relative;
}
.messages .message .text_wrapper::after, .messages .message .text_wrapper:before {
top: 18px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.messages .message .text_wrapper::after {
border-width: 13px;
margin-top: 0px;
}
.messages .message .text_wrapper::before {
border-width: 15px;
margin-top: -2px;
}
.messages .message .text_wrapper .text {
font-size: 18px;
font-weight: 300;
}
.bottom_wrapper {
position: relative;
width: 100%;
background-color: #fff;
padding: 20px 20px;
position: absolute;
bottom: 0;
}
.bottom_wrapper .message_input_wrapper {
display: inline-block;
height: 50px;
border: 1px solid #bcbdc0;
width: calc(100% - 160px);
position: relative;
padding: 0 20px;
}
.bottom_wrapper .message_input_wrapper .message_input {
border: none;
height: 100%;
box-sizing: border-box;
width: calc(100% - 40px);
position: absolute;
outline-width: 0;
color: gray;
}
.bottom_wrapper .send_message {
width: 140px;
height: 50px;
display: inline-block;
background-color: #ddd;
border: 2px solid #ddd;
color: #000;
cursor: pointer;
transition: all 0.2s linear;
text-align: center;
float: right;
}
.bottom_wrapper .send_message:hover {
color: #000;
background-color: #fff;
}
.bottom_wrapper .send_message .text {
font-size: 18px;
font-weight: 300;
display: inline-block;
line-height: 48px;
}
.message_template {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="chat_window">
<ul class="messages"></ul>
<div class="bottom_wrapper clearfix">
<div class="message_input_wrapper">
<input class="message_input" placeholder="Type here..." />
</div>
<div class="send_message">
<div class="icon"></div>
<div class="text">
Send
</div>
</div>
</div>
</div>
<div class="message_template">
<li class="message">
<div class="text_wrapper">
<p class="text"></p>
</div>
</li>
</div>
You can also add:
$(".left").css("color", "yellow");
$(".right").css("color", "blue");
$("li.message.left > div.text_wrapper > p").css('color', 'red');
$("li.message.right > div.text_wrapper > p").css('color', 'blue');
Using jQuery you can add inline style to an element
$(".left").attr("style","whatever");
$(".right").attr("style","whatever");
You can use the classList of every HTML component. Simply, select the DOM element with class left (or right) and use the add method to assign whatever class:
var elementLeft = $('.left')
elementLeft.classList.add('yourClass')
You can also use the methods remove to remove any class, or toggle to toggle some class..
elementLeft.classList.remove('yourClass')
elementLeft.classList.toggle('yourClass')
The Element.classList contains more examples. This solution works without jQuery or others javascript library, but use the standard API.
I have a pen, which is basically a todo app. The todo items are actually li elements which have text, button and a hr. Some of them are having hr with spaces inside them while some doesn't.
Image:
HTML:
const j = $;
j(() => {
let validify = txt => {
if (txt.length > 0) {
j('#ctn').append(`<li class='td'>${txt}<button class='td-btn'>Dismiss</button><hr/></li>`);
}
j('.td-btn').on('mouseenter', function() {
console.log('added');
j(this)
.parent()
.addClass('del');
console.log(j(this).parent().attr('class'))
}).on('mouseleave', function() {
console.log('removed')
j(this)
.parent()
.removeClass('del');
}).on('click', function() {
j(this).parent().css('display', 'none');
});
j('#addtd').val('');
}
validify('');
j('#btn').on('click', () => {
validify(j('#addtd').val());
});
});
#import url("https://fonts.googleapis.com/css?family=Lato");
* {
box-sizing: border-box;
font-family: Lato;
}
body {
margin: 0;
padding: 3vh 7vw;
background: #004D40;
}
#in-ctn {
position: fixed;
width: 86vw;
height: 16vh;
background: #388E3C;
box-shadow: 0 6px 9px #272727;
z-index: 2;
}
#btn {
position: absolute;
border-radius: 100%;
outline: none;
border: none;
right: 7vh;
top: 3vh;
width: 10vh;
height: 10vh;
font: 500 8vh arial;
display: inline-block;
transition: 0.25s all;
background: #CDDC39;
}
#btn:hover {
box-shadow: 0 2px 1px rgba(0, 0, 0, 0.33);
transform: scale(1.1);
}
#btn:active {
transform: translateY(4px);
}
#addtd {
position: absolute;
outline: none;
border: none;
background: rgba(255, 255, 255, 0.33);
width: 50vw;
height: 6vh;
top: 5vh;
left: 5vw;
font: 500 14pt Lato;
padding: 0 10px;
}
#addtd::placeholder {
color: #FFF;
}
#ctn {
position: absolute;
top: 27vh;
width: 86vw;
background: #388E3C;
box-shadow: 0 6px 9px #272727;
padding: 3vh 5vw;
z-index: 1;
}
li.td {
font: 500 20pt Lato;
list-style: none;
color: #FFF;
}
button.td-btn {
float: right;
outline: none;
border: none;
background: #E53935;
height: 20px;
position: relative;
top: 25px;
color: #FFF;
}
hr {
border: 7px solid #9E9D24;
padding: 0;
}
.del {
color: #CDDC39 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='main'>
<div id='in-ctn'>
<button id='btn'>+</button>
<input type='text' id='addtd' placeholder='Enter a new Todo' />
</div>
<div id='ctn'>
<li class='td'>
Code a Todo App
<button class='td-btn'>Dismiss</button>
<hr/>
</li>
<li class='td'>
Style the Elements
<button class='td-btn'>Dismiss</button>
<hr/>
</li>
<li class='td'>
Debug some problems
<button class='td-btn'>Dismiss</button>
<hr/>
</li>
<li class='td'>
Go for a walk
<button class='td-btn'>Dismiss</button>
<hr/>
</li>
</div>
</div>
Can anyone explain me why it is so?
This is happening due to CSS Sub pixel rendering.
When you zoom-in/out of the browser, the rescaled elements will have left over pixel values like 5.75px etc. The vendor decides how to deal with that.
In your case the easiest fix, at least in Chrome, is to cancel the border radius to 0px, instead set the height of the hr to double the border and give it a background color:
border: 0px solid #9E9D24;
padding: 0;
height: 14px;
background: #9E9D24;
Seems like this issue is browser related, since it works fine for most people. Possibly your browser has a default styling for hr elements. It is, however, nowadays bad practice to use a horizontal line for presentational terms. Source
You would be fine by using a border-bottom on your li element. If you want to position the border lower than the default position, you can use padding-bottom on the li element. Your HTML structure also looks a lot more clear with this.
For example, changing the styling of your CSS selector li.td to the following could do the trick:
li.td {
font: 500 20pt Lato;
list-style: none;
color: #CDDC39;
border-bottom: 10px solid #9E9D24;
padding-bottom: 10px;
margin-bottom: 10px;
}
In case you really need to use the hr element, you could attempt to remove all default margin since some browsers add a margin by default. For that, add the following styling to the element:
margin: 0
which would result into
hr {
border: 7px solid #9E9D24;
padding: 0;
margin: 0;
}
Did you edit your pen to fix the issue? When looking at your pen preview all <hr> tags are rendered without an empty space inside.
The only suggestion I have, is that in HTML <hr> doesn't need to be explicitly closed, unless you are using XHTML, then you need to properly close the tag <hr />. Since you are just writing HTML, I would go with the <hr>.