Develop Reference

how to transform my rectangle into a losange in react native with css?

Hello i'm stuck with this little problem my customer wants to do this in react native the orange border and i really suck in css how can i do it please ?

By skewing a containing parent and counter skewing its child elements you can create what you need with a few lines of CSS:
/* Solution */
.item { transform: skew(-15deg) } /* skew */
.item .content { transform: skew( 15deg) } /* reset */
/* Just eye-candy */
.wrapper { display: flex; gap: 0.5rem }
.item { border: 2px solid orange }
.item .content { padding: 0.5rem 1rem }
.item:hover { cursor: pointer; background-color: hsl(0,0%,96%); border-color: black }
<div class="wrapper">
<div class="item">
<div class="content">some content</div>
</div>
<div class="item">
<div class="content">some content</div>
</div>
<div class="item">
<div class="content">some content</div>
</div>
</div>

You can use the transform skew function in css. I would use it on an after pseudo element, so the content of the div will not be deformed. Like so:
.losange {
position: relative;
width: 100px;
padding: 10px;
}
.losange:after{
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
border: 2px solid orange;
transform: skew(-0.25rad);
pointer-events: none;
}
<div class="losange">test</div>
EDIT:
If you also want the background color to be skewed, you can do this by adding it to the after element pseudo element and setting the z-index to -1, which will put it behind the content of the losange.
.losange {
position: relative;
width: 100px;
padding: 10px;
}
.losange:after{
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
border: 2px solid orange;
transform: skew(-0.25rad);
pointer-events: none;
background-color: #eeeeee;
z-index: -1;
}
<div class="losange">test</div>

What would cause a JS carousel to not work on iOS & Safari?

I have a carousel that I built for a page based on this guide & it works fine on desktop non-iOS browsers, so not at all on Apple mobile devices (iPhone & iPad). I can't share the URL because of work stuff but the code is essentially the same. This is the first carousel/slideshow like this that I've built from scratch, soo if I'm missing something really obvious, I'm cool with that being pointed out.
I've pasted in a sanitized version of it here, I appreciate any insight in this, I'm just a bit spent at the moment between family holiday drama & working all the time, so a little community assist would do wonders for me atm.
Edit: I thought at first that this was only on mobile devices but I've fired up an old Android phone I had to check it out & it worked fine on it, so when I checked in console on Safari, I saw the following error:
TypeError: null is not an object (evaluating 'slider.lastElementChild')
// Carousel
function slider() {
let slides = document.querySelectorAll(".slide"),
slider = document.querySelector(".slider"),
last = slider.lastElementChild,
first = slider.firstElementChild,
btn = document.querySelectorAll(".btn");
slider.insertBefore(last, first);
btn.forEach(btn => {
btn.addEventListener("click", movement);
});
setInterval(function()
{
movement({target:{id:"next"}});
}, 3000);
function movement(e) {
slider = document.querySelector(".slider");
last = slider.lastElementChild;
first = slider.firstElementChild;
const activeSlide = document.querySelector(".active");
if (e.target.id === "next") {
slider.insertBefore(first, last.nextSibling);
activeSlide.classList.remove("active");
activeSlide.nextElementSibling.classList.add("active");
} else {
slider.insertBefore(last, first);
activeSlide.classList.remove("active");
activeSlide.previousElementSibling.classList.add("active");
}
}
}
slider();
/* JS Carousel https://www.exeideas.com/2022/09/pure-js-infinite-auto-play-slider.html */
.slider {
position: relative;
width: 100vw;
max-width: 100%;
height: 550px;
margin: auto;
overflow: hidden;
display: flex;
align-items: center;
}
.slide {
opacity: 0;
width: 100%;
height: auto;
position: absolute;
text-align: center;
-webkit-transition: 2s all;
transition: 2s all;
}
.slide.active {
opacity:1;
}
.slide.active~.slide {
transiiton: 250ms all;
}
.slider__wrapper {
position: relative;
}
.slider_arrow_box{
position: absolute;
bottom: 4%;
left: 45%;
padding: 3px;
}
.slider_arrow_wrapper {
display: inline-block;
margin: 0 15px;
background: blue;
padding: 7px;
border-radius: 50%;
border-style: solid;
border-width: 1.5px;
opacity: .6;
}
.slider_arrow_wrapper:hover {
opacity: 1;
}
[class*="icono-arrow2"] {
width: 0;
height: 0;
border-width: 6px;
border-style: solid;
border-bottom-color: transparent;
border-left-color: transparent;
margin: 10px;
}
[class*="icono-arrow2"]:before {
right: 0;
top: -3px;
position: absolute;
height: 4px;
box-shadow: inset 0 0 0 32px;
transform: rotate(-45deg);
width: 15px;
transform-origin: right top;
}
[class*="icono"] {
position: relative;
display: inline-block;
vertical-align: middle;
color: #fff;
box-sizing: border-box;
}
[class*="icono"]:before,
[class*="icono"]:after {
content: "";
box-sizing: border-box;
}
[class*="icono-arrow2"][class*="-left"] {
transform: rotate(-135deg);
}
[class*="icono-arrow2"][class*="-right"] {
transform: rotate(45deg);
}
<div class="slider__wrapper">
<div class="slider">
<div class="slide active">
<h1>Slide 1</h1>
</div>
<div class="slide">
<h1>Slide 2</h1>
</div>
<div class="slide">
<h1>Slide 3</h1>
</div>
<div class="slide">
<h1>Slide 4</h1>
</div>
</div>
<div class="slider_arrow_box">
<div class="slider_arrow_wrapper">
<i id="prev" class="btn icono-arrow2-left"></i>
</div>
<div class="slider_arrow_wrapper">
<i id="next" class="btn icono-arrow2-right"></i>
</div>
</div>
</div>

CSS pointer-events: none while allowing hover

I'm trying to create an element of top my page which can be hovered. When hovered I want to change the opacity of the element and allow click through.
The thing is when I add the pointer-events: none to allow the click through, my hover is never triggered, which seems logic after all. I though I would be able to deal with it with JavaScript, but event mouseover or mouseenter is not compatible with pointer-events: none.
Here is my example with only CSS: If I add the pointer-events: none; it doesn't work. The element is the red banner, I want to be able to click the buttons underneath while being able to lower the opacity of it.
body {margin:0; padding:0;}
.title {font-weight:bold;margin-right:10px;}
.container {margin: 0 auto;width:80%;position:relative;overflow:hidden;}
.content {height:300px;border: 1px solid #c8c8c8;}
nav {background-color:#efebe0;padding:20px;}
button {padding:10px;background-color:#9ebf00;border: 1px solid #86a200;border-radius:5px;margin: 0 5px 0 5px;}
button.right {float:right;}
.bandeau {
position: absolute;
background: red none repeat scroll 0% 0%;
width: 300px;
height: 40px;
z-index: 2;
font-size: 30px;
color: white;
font-weight: bold;
text-align: center;
right: -70px;
transform: rotate(45deg);
top: 60px;
display: block;
transition: 0.2s ease-in-out;
pointer-events:none;
}
.bandeau:hover {
opacity: 0.4;
}
<div class="container">
<nav>
<span class="title">Dummy Example</span>
<button>Home</button>
<button>Pricing</button>
<button class="right">Contact us</button>
<button class="right">Log in</button>
</nav>
<div class="content"></div>
<div class="bandeau">
<span>I will be back !</span>
</div>
</div>
The other example with JavaScript:
document.addEventListener('DOMContentLoaded', function() {
var bandeau = document.getElementById("bandeau");
bandeau.addEventListener('mouseenter', e => {
bandeau.style.opacity = '0.4';
bandeau.style.pointerEvents = 'none';
});
bandeau.addEventListener('mouseleave', e => {
bandeau.style.opacity = '1';
bandeau.style.pointerEvents = 'auto';
});
}, false);
body {margin:0; padding:0;}
.title {font-weight:bold;margin-right:10px;}
.container {margin: 0 auto;width:80%;position:relative;overflow:hidden;}
.content {height:300px;border: 1px solid #c8c8c8;}
nav {background-color:#efebe0;padding:20px;}
button {padding:10px;background-color:#9ebf00;border: 1px solid #86a200;border-radius:5px;margin: 0 5px 0 5px;}
button.right {float:right;}
#bandeau {
position: absolute;
background: red none repeat scroll 0% 0%;
width: 300px;
height: 40px;
z-index: 2;
font-size: 30px;
color: white;
font-weight: bold;
text-align: center;
right: -70px;
transform: rotate(45deg);
top: 60px;
display: block;
transition: 0.2s ease-in-out;
}
<div class="container">
<nav>
<span class="title">Dummy Example</span>
<button>Home</button>
<button>Pricing</button>
<button class="right">Contact us</button>
<button class="right">Log in</button>
</nav>
<div class="content"></div>
<div id="bandeau">
<span>I will be back !</span>
</div>
</div>
Is there a way to achieve this or is it impossible?

In your example you could do it easily on a hover on the whole nav element like
nav:hover + .content + .bandeau { opacity: 0.4; }
Or you can move the banner element to the because it's an absolute positioned element. Then a hover on the login button (with the .right class) will make it transparent:
body {margin:0; padding:0;}
.title {font-weight:bold;margin-right:10px;}
.container {margin: 0 auto;width:80%;position:relative;overflow:hidden;}
.content {height:300px;border: 1px solid #c8c8c8;}
nav {background-color:#efebe0;padding:20px;}
button {padding:10px;background-color:#9ebf00;border: 1px solid #86a200;border-radius:5px;margin: 0 5px 0 5px;}
button.right {float:right;}
.bandeau {
position: absolute;
background: red none repeat scroll 0% 0%;
width: 300px;
height: 40px;
z-index: 2;
font-size: 30px;
color: white;
font-weight: bold;
text-align: center;
right: -70px;
transform: rotate(45deg);
top: 60px;
display: block;
transition: 0.2s ease-in-out;
pointer-events:none;
}
.right:hover + .bandeau {
opacity: 0.4;
}
<div class="container">
<nav>
<span class="title">Dummy Example</span>
<button>Home</button>
<button>Pricing</button>
<button class="right">Contact us</button>
<button class="right">Log in</button>
<div class="bandeau">
<span>I will be back!</span>
</div>
</nav>
<div class="content"></div>
</div>
I know it's a bit different than a hover on the banner itself, but maybe this can give you some ideas :)

I found a solution based on a comment on the thread linked by #yanca.
I use document.elementFromPoint to chekc what cursor I should display (pointer or auto) based on the lement below the banner. Then I reuse document.elementFromPoint to transfer the click through
Here is the code :
document.addEventListener('DOMContentLoaded', function() {
var bandeau = document.getElementById("bandeau");
bandeau.addEventListener('mousemove', e => {
bandeau.style.display = "none";
var elemUnder = document.elementFromPoint(e.clientX, e.clientY);
bandeau.style.display = "block";
var stylesUnder = getComputedStyle(elemUnder);
bandeau.style.cursor = stylesUnder.cursor;
});
bandeau.addEventListener('click', e => {
bandeau.style.display = "none";
var elemUnder = document.elementFromPoint(e.clientX, e.clientY);
bandeau.style.display = "block";
elemUnder.click();
});
}, false);
body {margin:0; padding:0;}
.title {font-weight:bold;margin-right:10px;}
.container {margin: 0 auto;width:80%;position:relative;overflow:hidden;}
.content {height:300px;border: 1px solid #c8c8c8;}
nav {background-color:#efebe0;padding:20px;}
button {padding:10px;background-color:#9ebf00;border: 1px solid #86a200;border-radius:5px;margin: 0 5px 0 5px;cursor:pointer;}
button.right {float:right;}
#bandeau {
position: absolute;
background: red none repeat scroll 0% 0%;
width: 300px;
height: 40px;
z-index: 2;
font-size: 30px;
color: white;
font-weight: bold;
text-align: center;
right: -70px;
transform: rotate(45deg);
top: 60px;
display: block;
transition: 0.2s ease;
}
#bandeau:hover {
opacity:0.4;
transition: 0.2s ease;
}
<div class="container">
<div id="body">
<nav>
<span class="title">Dummy Example</span>
<button>Home</button>
<button>Pricing</button>
<button class="right" onclick="alert('click contact')">Contact us</button>
<button class="right" onclick="alert('click login')">Log in</button>
</nav>
<div class="content"></div>
<div>
<div id="bandeau">
<span>I will be back !</span>
</div>
</div>
Thanks for the help !!

How can I make this calendar close correctly?

I got this code off of codepen and I am trying to edit it. I am trying to make it so that when you actually click the X in the corner of the popup, the box actually closes, and that after hitting the add button after putting in text, the box closes. Can anyone help me accomplish this? I am having trouble getting it to work. Any help is appreciated. Thanks!
https://codepen.io/pokyparachute66/pen/QzXYjL
var date = document.getElementsByClassName("day");
for(i = 0; i < 50; i++){
var event = document.createElement("div");
event.id = "add";
event.innerHTML = "<p>Add Phone Number</p><input type='text'> <span
class='close'><i class='fa fa-times' aria-hidden='true'></i></span>";
date[i].appendChild(event);
var btn = document.createElement("button");
btn.innerHTML = "<i class='fa fa-plus' aria-hidden='true'></i>";
event.appendChild(btn);
btn.addEventListener("click", createEvent);
date[i].addEventListener("click", clickEvent);
event.getElementsByClassName("close")[0].addEventListener("click",
closeEvent);
}
function createEvent(){
var parent = this.parentElement;
var parentDay = parent.parentElement;
if(parent.getElementsByTagName("input")[0].value === "" ){
alert("type something");
}
else{
var createDiv = document.createElement("div");
createDiv.id = "eventDiv";
parent.appendChild(createDiv);
parentDay.classList.add("active");
var txt = parent.getElementsByTagName("input")[0].value;
createDiv.innerHTML = txt;
parent.getElementsByTagName("input")[0].value = "";
//parent.style.visibility = "visible";
}
}
function clickEvent(){
var a = this.getElementsByTagName("div")[0];
a.classList.toggle("active");
}
function closeEvent(){
document.getElementById("add").classList.remove("active");
}
button:focus, input:focus{outline: none;}
.calendar{
margin: calc(50vh - 100px) auto 0 auto;
width: 260px;
height: 200px;
text-align: center;
transform: scale(2.5);
}
.day{
position: relative;
margin: 2px;
width: 33px;
height: 33px;
font-size: 12px;
line-height: 30px;
border-radius: 100%;
float: left;
cursor: pointer;
transition: all .4s ease 0s;
}
.day:hover{
color: #fff;
background: #3f64fd;
}
.day-week{
margin: 0px;
width: 37px;
height: 20px;
color: #515067;
font-size: 9px;
line-height: 20px;
text-transform: uppercase;
float: left;
}
.blank{
margin: 0px ;
width: 37px;
height: 37px;
float: left;
}
#add{
padding: 15px;
position: absolute;
left: -90px;
bottom: 50px;
width: 200px;
min-height: 50px;
background: linear-gradient(to top left, #3f64fd, #14c0ff);
transition: all .2s ease 0s;
visibility: hidden;
opacity: 0;
box-shadow: 0 0 25px rgba(0,0,0,.6);
}
#add.active,
#add:hover{
bottom: 30px;
visibility: visible;
opacity: 1;
transition: all .4s ease 0s;
z-index: 999;
}
#add .close{
position: absolute;
top: 0px;
right: 5px;
color: white;
}
#add input[type="text"]{
width: 140px;
padding: 3px 5px;
color: #fff;
background: none;
border: none;
border-bottom: 1px solid white;
}
#add button{
height: 50px;
width: 50px;
color: #fff;
line-height: 23px;
text-align: center;
background: #3f64fd;
border: none;
left: 70%;
top:53%;
position: absolute;
border-radius: 100%;
cursor: pointer;
}
#eventDiv{
padding: 5px;
line-height: 12px;
text-align: left;
}
.day.active{
color: black;
border: 2px solid #3f64fd;
}
<div class="calendar">
<div class="day-week">s</div>
<div class="day-week">m</div>
<div class="day-week">t</div>
<div class="day-week">w</div>
<div class="day-week">t</div>
<div class="day-week">f</div>
<div class="day-week">s</div>
<div class="blank"></div>
<div class="blank"></div>
<div class="day">1</div>
<div class="day">2</div>
<div class="day">3</div>
<div class="day">4</div>
<div class="day">5</div>
<div class="day">6</div>
<div class="day">7</div>
<div class="day">8</div>
<div class="day">9</div>
<div class="day">10</div>
<div class="day">11</div>
<div class="day">12</div>
<div class="day">13</div>
<div class="day">14</div>
<div class="day">15</div>
<div class="day">16</div>
<div class="day">17</div>
<div class="day">18</div>
<div class="day">19</div>
<div class="day">20</div>
<div class="day">21</div>
<div class="day">22</div>
<div class="day">23</div>
<div class="day">24</div>
<div class="day">25</div>
<div class="day">26</div>
<div class="day">27</div>
<div class="day">28</div>
<div class="day">29</div>
<div class="day">30</div>
<div class="day">31</div>
</div>

Instead of doing that really complicated thing why you should do something like:
<input type="date">

I don't understand what are you trying to accomplish!
It's closing when you hit X or + BUT the code is really confusing...
It's creating a div element with id="add" around 50 times?!
for(i = 0; i < 50; i++){
var event = document.createElement("div");
event.id = "add"; // should make this event.className = 'add';
event.innerHTML = "<p>Add Phone Number</p><input type='text'> <span class='close'><i class='fa fa-times' aria-hidden='true'></i></span>";
date[i].appendChild(event);
DO NOT FORGET to change CSS (#add -> .add) and closing event (getElementById -> getElementsByClassName)

During the closeEvent function, you're removing the 'active' class, but the element doesn't have that class. So it's not closing the popup until you've moused away from the box itself.
I would remove the closeEvent function and the reference to it on line 18 of your JS, and would change the clickEvent() function to something like this:
function clickEvent(){
var a = this.getElementsByTagName("div")[0];
a.classList.toggle("active");
if (!a.classList.contains('active')) {
var parentOfA = a.parentNode;
parentOfA.removeChild(a);
}
}
That way you're removing the element from the document entirely, rather than just changing the class on it.

Toastr multiple divs

i have multiple divs that contain custom css toastr notification,
what i need help with is displaying random div each time page loads or using toastr by codeseven how to do it in same way, any help is appreciated either css or js, this is what i've been trying but no luck, and i have tried also to use math() for it but its either showing all divs at the same time or not even working... is there anyway it can select specific div and show only him while hiding other divs that are there?
#toastr {
font-size: 21px;
text-align: center;
transition: opacity 1s 1s;
position: fixed;
z-index: 999999;
pointer-events: none;
z-index: 1;
bottom: 12px;
left: 12px;
font-size: 17px;
animation: fadeins 5s linear forwards;
opacity: 0;
}
#toastr a {
color: white;
text-decoration: none;
}
#toastr>div {
position: relative;
pointer-events: auto;
overflow: hidden;
margin: 0 0 6px;
padding: 15px 15px 15px 15px;
width: 300px;
border-radius: 3px 3px 3px 3px;
background-position: 15px center;
background-repeat: no-repeat;
box-shadow: 0 0 12px #999999;
color: #FFFFFF;
opacity: 1;
}
.toastr-success {
background-color: #51A351;
}
#keyframes fadeins {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
#keyframes fadein {
from {
opacity: 0;
bottom: -5px;
}
to {
opacity: 1;
bottom: 12px;
}
}
#keyframes fadeout {
from {
opacity: 1;
bottom: 12px;
}
to {
opacity: 0;
bottom: 0;
}
}
<div class="views-row views-row-2 views-row-even random-popup">
<div class="views-field views-field-nothing">
<span class="field-content">
<div id="toastr" class="toastr">
<div class="toast toastr-success" aria-live="polite">
<div class="toast-message">message1.</div>
</div>
</div>
</span>
</div>
</div>
<div class="views-row views-row-3 views-row-even random-popup">
<div class="views-field views-field-nothing">
<span class="field-content">
<div id="toastr" class="toastr">
<div class="toast toastr-success" aria-live="polite">
<div class="toast-message">message2.</div>
</div>
</div>
</span>
</div>
</div>

Seen as you have a class called random-popup, you can set them to initially be display none, and then using another class maybe called active, set the display to block..
.random-popup {
display: none;
}
.random-popup.active {
display: block;
}
Then with a bit of simple Javascript to set one of them randomly visible by adding the active class..
var popups = document.querySelectorAll(".random-popup");
popups[Math.trunc(Math.random() * popups.length)].classList.add("active");
eg..
var popups = document.querySelectorAll(".random-popup");
popups[Math.trunc(Math.random() * popups.length)]
.classList.add("active");
#toastr {
font-size: 21px;
text-align: center;
transition: opacity 1s 1s;
position: fixed;
z-index: 999999;
pointer-events: none;
z-index: 1;
bottom: 12px;
left: 12px;
font-size: 17px;
animation: fadeins 5s linear forwards;
opacity: 0;
}
#toastr a {
color: white;
text-decoration: none;
}
#toastr>div {
position: relative;
pointer-events: auto;
overflow: hidden;
margin: 0 0 6px;
padding: 15px 15px 15px 15px;
width: 300px;
border-radius: 3px 3px 3px 3px;
background-position: 15px center;
background-repeat: no-repeat;
box-shadow: 0 0 12px #999999;
color: #FFFFFF;
opacity: 1;
}
.toastr-success {
background-color: #51A351;
}
#keyframes fadeins {
0%,
100% {
opacity: 0;
}
50% {
opacity: 1;
}
}
#keyframes fadein {
from {
opacity: 0;
bottom: -5px;
}
to {
opacity: 1;
bottom: 12px;
}
}
#keyframes fadeout {
from {
opacity: 1;
bottom: 12px;
}
to {
opacity: 0;
bottom: 0;
}
}
.random-popup {
display: none;
}
.random-popup.active {
display: block;
}
<div class="views-row views-row-2 views-row-even random-popup">
<div class="views-field views-field-nothing">
<span class="field-content">
<div id="toastr" class="toastr">
<div class="toast toastr-success" aria-live="polite">
<div class="toast-message">message1.</div>
</div>
</div>
</span>
</div>
</div>
<div class="views-row views-row-3 views-row-even random-popup">
<div class="views-field views-field-nothing">
<span class="field-content">
<div id="toastr" class="toastr">
<div class="toast toastr-success" aria-live="polite">
<div class="toast-message">message2.</div>
</div>
</div>
</span>
</div>
</div>