We Keep Coding

Adjust code to allow using ACF repeater field for image comparison slider

I am trying to build a dynamic image comparison slider that works with ACF repeater field. I used the html, css and js from this blog post: https://dev.to/shantanu_jana/image-comparison-slider-using-html-css-and-javascript-3cff
And it works as I need it, besides that it is not working with ACF repeater (or in general having multiple comparison sliders on one page, which is what I need)
I suppose it's because of the IDs that are needed for the JS, but I don't have enough experience to adjust the code to have it working. Can someone help? Or is it not possible?
HTML:
<div class="container">
<img src="<?php echo get_field( 'slider_1' ); ?>">
<img id="my-img" src="<?php echo get_field( 'slider_2' ); ?>">
<input type="range" min="0" max="100" value="50" id="slider" oninput="slide()">
</div>
CSS:
*,
*:before,
*:after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
height: 100vh;
display: grid;
background: #d1ebec;
place-items: center;
}
.container{
height: 300px;
width: 400px;
position: relative;
overflow: hidden;
border: 5px solid #bfc0c1;
box-shadow:-3px 5px 15px #000;
}
img{
width: 100%;
height: 100%;
position: absolute;
-o-object-fit: cover;
object-fit: cover;
}
#my-img{
clip-path: polygon(0 0 , 50% 0, 50% 100%, 0 100%);
}
#slider{
position: relative;
-webkit-appearance: none;
width: calc( 100% + 40px);
height: 100%;
margin-left: -20px;
background-color: transparent;
outline: none;
}
#slider::-webkit-slider-thumb{
-webkit-appearance: none;
height: 45px;
width: 45px;
background: url("slider-icon.svg"),
rgba(255,255,255,0.3);
border: 4px solid white;
border-radius: 50%;
background-size: contain;
cursor: pointer;
}
JS:
function slide(){
let slideValue = document.getElementById("slider").value;
document.getElementById("my-img").style.clipPath = "polygon(0 0," + slideValue + "% 0," + slideValue + "% 100%, 0 100%)";
console.log("polygon(0 0," + slideValue + "% 0," + slideValue + "% 100%, 0 100%)");
}

so you can use classes and document.querySelectorAll()
you can select all elements you want to select dude
let sliders = document.querySelectorAll('.my-img').value;
sliders.forEach(item => {
item.style.clipPath =
"polygon(0 0," + slideValue + "% 0," + slideValue + "% 100%, 0 100%)";
})
and then change the id :id="my-img" to class :class="my-img"
then use your ACF repeater
(as you said ids must be unique and when you use repeater you make many elements with same id which is bad and you most not to do )

Ionic on change event not working properly

I am building a mobile app with ionic, I have two range slides in my app, my problem is that the change event does not fires until i stop sliding, how can i add an event listener to the range slide so that as i am sliding it, it will automatically run the function, the reason i want this is that since they are two range slide, i want as any of the slides is moving, i have a function that will automatically change the value of the other slide, and i dont want the other slide to move only when i stop sliding, i want it to move as as i move any of the slides
here is my code
test.page.html
<div class="wrap" role="group" aria-labelledby="multi-lbl">
<label class="sr-only" for="a">Value A:</label>
<input (change)="onChangeVal(1)" name="min" id="a" type="range" min="0" [max]="VidDuration" [(ngModel)]="range.min"/>
<label class="sr-only" for="b">Value B:</label>
<input (change)="onChangeVal(2)" name="max" id="b" type="range" min="0" [max]="VidDuration" [(ngModel)]="range.max"/>
</div>
test.page.scss
*{
font: inherit;
}
.wrap {
--a: -30;
--b: 20;
--min: -50;
--max: 50;
--dif: calc(var(--max) - var(--min));
display: grid;
grid-template: repeat(2, -webkit-max-content) 4em/ 1fr 1fr;
grid-template: repeat(2, max-content) 4em/ 1fr 1fr;
overflow: hidden;
position: absolute;
bottom: 1% !important;
width: 100%;
height: 52px !important;
background: black;
}
.wrap::before, .wrap::after {
grid-column: 1/ span 2;
grid-row: 3;
background: transparent;
content: "";
}
.wrap::before {
margin-left: calc(1em + (var(--a) - var(--min))/var(--dif)*18em);
width: calc((var(--b) - var(--a))/var(--dif)*18em);
}
.wrap::after {
margin-left: calc(1em + (var(--b) - var(--min))/var(--dif)*18em);
width: calc((var(--a) - var(--b))/var(--dif)*18em);
}
[id='multi-lbl'] {
grid-column: 1/span 2;
}
.wrap, input[type='range']{
z-index:100000 !important;
}
.sr-only {
position: absolute;
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
}
input[type='range'] {
grid-column: 1/ span 2;
grid-row: 3;
z-index: 1;
top: 0;
left: 0;
margin: 0;
background: none;
--col: transparent;
pointer-events: none;
border: 1px solid #f51646;
}
input[type='range']::-webkit-slider-runnable-track, input[type='range']::-webkit-slider-thumb, input[type='range'] {
-webkit-appearance: none;
}
input[type='range']::-webkit-slider-runnable-track {
width: 100%;
height: 105%;
background: none;
}
input[type='range']::-moz-range-track {
width: 100%;
height: 105%;
background: none;
}
input[type='range']::-webkit-slider-thumb {
border: none;
width: 2em;
height: 4em;
border-radius: 0;
background: linear-gradient(90deg, #fff 2px, transparent 0) calc(1em - 1px), radial-gradient(circle, var(--col) calc(1em - 1px), transparent 1em);
pointer-events: auto;
}
input[type='range']::-moz-range-thumb {
border: none;
width: 2em;
height: 4em;
border-radius: 0;
background: linear-gradient(90deg, #fff 2px, transparent 0) calc(1em - 1px), radial-gradient(circle, var(--col) calc(1em - 1px), transparent 1em);
pointer-events: auto;
}
input[type='range']:focus {
z-index: 2;
outline: dotted 1px currentcolor;
}
test.page.ts
onChangeVal(w) {
let vvid:any = document.getElementById("video");
vvid.pause()
clearTimeout(this.time_out)
if(w==1) this.range.max=(this.range.max <= this.VidDuration) ? this.range.min+this.max : this.VidDuration
else if((this.range.max-this.range.min)>this.max) this.range.min=this.range.max-this.max
else if(this.range.max <= this.range.min) this.range.max=this.range.min
console.log(this.range)
}
The mobile app is a video player the i want to trim so i want to be able to choose from with time to which time i want to trim the video

I would sugest to use the input or ionInput event:
<input (input)="onChangeVal(1)">
<input (ionInput)="onChangeVal(2)">
Because you use [(ngModel)] you could also use ngModelChange:
<input (ngModelChange)="onChangeVal(1)">

Split divs diagonally and responsively

I need to build the following screenshot, and I can't figure out how to do the angles responsively:
https://imgur.com/a/e9IJV
I tried using pseudo classes to add diagonal edges to a solid-color div.
But this design requires two images side-by-side so that won't work there. Also, the slants have to stay on the same angle through different sections with variable heights. I can't use clip-path because I need to support IE.
Here is my feeble attempt:
https://codepen.io/lsterling03/pen/zPEgaq
As you can see, I am having trouble! Is this design possible? Do you have any advice on how to approach this? Will it require javascript?
UPDATE
I have made a little progress. Here is an updated pen:
https://codepen.io/lsterling03/pen/GOOqmo
I can't get the slant right on the last section, which needs a variable height and width. I tried using javascript, but I don't have the right calculations:
$(".slant").css('width', $('.main').width() * 0.5 - 100);
$(".slant").css('border-top-width', $('.main').height());
I also haven't figured out how to do two images in a row yet.
Does anyone have suggestions to fix either of the above issues?

Here is something you can work with:
Bootply: https://www.bootply.com/4QuGRXY11d
.container{position:relative;width: 500px; overflow:hidden;}
.flex{display:flex;overflow:hidden;}
.cinq{overflow:hidden;width:50%;height:150px;background:blue;}
.cinq + .cinq{oveflow:hidden;right:-25%;width:75%;height:150px;position:absolute; transform: skewX(-20deg) translateX(-50px);background:red;}
.flex + .flex .cinq + .cinq{transform: skewX(20deg) translate(-50px)}
.cinq .img{height:100%;background-size:cover; background-image:url(https://s-media-cache-ak0.pinimg.com/564x/ca/9b/ca/ca9bca4db9afb09158b76641ea09ddb6.jpg); position: absolute;
width: 100%;
top: 0;
left: -50px;transform: skewX(20deg);}
.flex + .flex .cinq + .cinq .img{transform: skewX(-20deg);}
<div class="container">
<div class="flex">
<div class="cinq">1</div>
<div class="cinq">
<div class="img"></div>
</div>
</div>
<div class="flex">
<div class="cinq">3</div>
<div class="cinq"><div class="img"></div></div>
</div>
</div>

And, here is another example that you can start to investigate some more: CodePen
body {
background-color: #00bcd4;
}
div { box-sizing:border-box; }
.row {
overflow: hidden;
position: relative;
width: 100%;
}
.image {
background: url(https://s-media-cache-ak0.pinimg.com/564x/ca/9b/ca/ca9bca4db9afb09158b76641ea09ddb6.jpg) center center no-repeat #eee;
background-size: cover;
height: 400px;
width: 50%;
float: right;
}
.image2{
background: url(https://s-media-cache-ak0.pinimg.com/564x/ca/9b/ca/ca9bca4db9afb09158b76641ea09ddb6.jpg) center center no-repeat #eee;
background-size: cover;
height: 400px;
width: 64.5%;
float: left;
-webkit-clip-path: polygon(0 0, 100% 0, 78% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 78% 100%, 0% 100%);
}
.image3{
background: url(https://s-media-cache-ak0.pinimg.com/564x/ca/9b/ca/ca9bca4db9afb09158b76641ea09ddb6.jpg) top left no-repeat #eee;
background-size: cover;
height: 400px;
width: 50%;
float: left;
-webkit-clip-path: polygon(28% 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(28% 0, 100% 0, 100% 100%, 0% 100%);
position: absolute;
right: 0;
}
.text {
background-color: #eee;
padding: 30px;
position: relative;
width: 50%;
float: left;
height: 400px;
}
.text > div {
position: relative;
z-index: 1;
}
.text2 {
height: 400px;
width: 50%;
float: left;
background: #fff;
padding: 30px
}
.corner:after {
transition: all .3s ease;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
position: absolute;
display: block;
content: "";
top: 0;
}
.corner-right:after {
border-left: 150px solid #eee;
border-top: 400px solid transparent;
border-right: 270px solid transparent;
}
.corner-left:after {
border-right: 150px solid #eee;
border-top: 400px solid transparent;
border-left: 270px solid transparent;
right: 50%;
}

How to draw line on a webpage using html, css and javascript

I am currently working on a "tic tac toe like" game.
This is the link. I started upgrading some of its functionalities and I have a problem.
I used the image included below as the background image of the game and I positioned nine input fields, one on each edge/side of the image with css.
I no longer want to use a background image. Is there any way I can draw those lines with css, javascript and/or html?
Please I will be very happy if it can be done with pure html, css and javascript or with jquery

You can use 2 elements and their pseudo elements to draw the lines with absolute positioning in and transform: rotate()
div {
width: 25%;
border: 1px solid black;
margin: auto;
overflow: hidden;
}
span {
display: block;
padding-bottom: 100%;
}
div,span {
position: relative;
}
div::after,div::before,span::after,span::before {
content: '';
position: absolute;
background: black;
}
div::after {
top: 50%;
left: 0; right: 0;
height: 1px;
}
div::before {
width: 1px;
left: 50%;
top: 0; bottom: 0;
}
span::before,span::after {
height: 1px;
top: 50%;
left: -25%;
right: -25%;
background: red;
}
span::before {
transform: rotate(45deg);
}
span::after {
transform: rotate(-45deg);
}
<div><span></span></div>

you can also use gradients :
the idea
background:
linear-gradient(0deg,black,black) repeat-y center,
linear-gradient(0deg,black,black) repeat-x center,
linear-gradient(26deg, transparent calc(50% - 2px), black calc(50% - 1px) , black calc(50% + 2px), transparent calc(50% + 2px)),
linear-gradient(-26deg, transparent calc(50% - 2px), black calc(50% - 1px) , black calc(50% + 2px), transparent calc(50% + 2px)) yellow;
background-size: 3px 100%, 100% 3px, auto,auto;
here is a snippet with margin and size of inputs updated too, the snippet uses also a background-color and a shadow.
body {
color: black;
width: 26.8cm;
overflow: scroll;
background-color: white;
}
.welcome{
padding:20px;
text-align: center;
background: #ccc;
}
.transit{
transition: 5s;
}
#player{
color: green;
}
.gamelet { /*This style is for the boxes containing the hexadecimal color codes*/
width: 5.6cm;
display: inline-block;
vertical-align: top;
}
.gamelet2 {
margin-top: 4.3cm;
}
.fr { /*This style is for the red box only*/
margin-left: -0.3cm;
width:0.6cm;
}
.sr { /*This style is for the green box only*/
margin:0 9.6cm;
width:0.6cm;
}
.tr { /*This style is for the blue box only*/
margin-right:-0.3cm;
width:0.6cm;
}
div:nth-child(1),
div:nth-child(2),
div:nth-child(3){margin-top:-0.3cm;}
div:nth-child(7),
div:nth-child(8),
div:nth-child(9){margin-bottom:-0.3cm;}
.gamelet1 {
border-radius: 90px;
width: 0.6cm;
cursor: pointer;
}
.board {
background:
linear-gradient(0deg,black,black) repeat-y center,
linear-gradient(0deg,black,black) repeat-x center,
linear-gradient(26deg, transparent calc(50% - 2px), black calc(50% - 1px) , black calc(50% + 2px), transparent calc(50% + 2px)),
linear-gradient(-26deg, transparent calc(50% - 2px), black calc(50% - 1px) , black calc(50% + 2px), transparent calc(50% + 2px)) yellow;
background-size: 3px 100%, 100% 3px, auto,auto;
box-shadow: 0 0 0 0.6cm yellow;
border:solid;
margin: 2cm 3cm;
}
/*//styles from bootstrap*/
.alert-danger {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
text-align: center;
padding:20px;
display: none;
}
.alert-success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
text-align: center;
padding:20px;
display: none;
}
.alert-info {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
text-align: center;
padding:20px;
}
<script src="https://kofimokome.github.io/tic-tac-toe/TTT_files/TTTscript.js"></script>
<form name="game" class="board">
<div class="gamelet fr"><input onclick="C_11(cplayer); autoname(0);" name="C11" type="text" class="gamelet1" /></div>
<div class="gamelet sr"><input onclick="C_12(cplayer); autoname(1);" name="C12" type="text" class="gamelet1" /></div>
<div class="gamelet tr"><input onclick="C_13(cplayer); autoname(2);" name="C13" type="text" class="gamelet1" /></div>
<div class="gamelet fr"><input onclick="C_21(cplayer); autoname(3);" name="C21" type="text" class="gamelet1 gamelet2" /></div>
<div class="gamelet sr"><input onclick="C_22(cplayer); autoname(4);" name="C22" type="text" class="gamelet1 gamelet2" /></div>
<div class="gamelet tr"><input onclick="C_23(cplayer); autoname(5);" name="C23" type="text" class="gamelet1 gamelet2" /></div>
<div class="gamelet fr"><input onclick="C_31(cplayer); autoname(6);" name="C31" type="text" class="gamelet1 gamelet2" /></div>
<div class="gamelet sr"><input onclick="C_32(cplayer); autoname(7);" name="C32" type="text" class="gamelet1 gamelet2" /></div>
<div class="gamelet tr"><input onclick="C_33(cplayer); autoname(8);" name="C33" type="text" class="gamelet1 gamelet2" /></div>
</form>
a codepen to fork & play with
NOTE:
IDs can only be used once per document, use class instead if multiple use (code snippet for #gamelet turned into .gamelet )

Auto scroll on right jquery

I would to set auto scroll with some timing for this slider. How can I do?
I tryied anything, but cant recognize my mistake.
I just need that when I open the page it will scroll in automatic to the right with timing loop (to infinity).
var slider = {
// Not sure if keeping element collections like this
// together is useful or not.
el: {
slider: $("#slider"),
allSlides: $(".slide"),
sliderNav: $(".slider-nav"),
allNavButtons: $(".slider-nav > a")
},
timing: 800,
slideWidth: 320, // could measure this
// In this simple example, might just move the
// binding here to the init function
init: function() {
this.bindUIEvents();
},
bindUIEvents: function() {
// You can either manually scroll...
this.el.slider.on("scroll", function(event) {
slider.moveSlidePosition(event);
});
// ... or click a thing
this.el.sliderNav.on("click", "a", function(event) {
slider.handleNavClick(event, this);
});
// What would be cool is if it had touch
// events where you could swipe but it
// also kinda snapped into place.
},
moveSlidePosition: function(event) {
// Magic Numbers =(
this.el.allSlides.css({
"background-position": $(event.target).scrollLeft() / 6 - 100 + "px 0"
});
},
handleNavClick: function(event, el) {
event.preventDefault();
var position = $(el).attr("href").split("-").pop();
this.el.slider.animate({
scrollLeft: position * this.slideWidth
}, this.timing);
this.changeActiveNav(el);
},
changeActiveNav: function(el) {
this.el.allNavButtons.removeClass("active");
$(el).addClass("active");
}
};
slider.init();
// Originally added click links, so I ported over and re-wrote
#media screen and (max-width:650px) {
.slider-wrap {
width: 149% !important;
margin: 20px auto;
}
}
#import url(http://fonts.googleapis.com/css?family=Josefin+Slab:100);
.slider-wrap {
width: 100%;
margin: 20px auto;
}
.slider {
overflow-x: scroll;
}
.holder {
display:block; width: 600%;position:relative;
}
.slide {
float: left;
width: 300px;
height: 200px;
position: relative;
background-position: -100px 0;
margin-left:20px;
}
.temp {
position: absolute;
color: white;
font-size: 40px;
bottom: 15px;
left: 15px;
font-family: 'Josefin Slab', serif;
font-weight: 100;
}
#slide-0 {
background-image: url(http://farm8.staticflickr.com/7384/8730654121_05bca33388_z.jpg);background-position:50% 30% !important; background-repeat: no-repeat;background-size: 95%;
}
#slide-1 {
background-image: url(http://farm8.staticflickr.com/7384/8730654121_05bca33388_z.jpg);background-position:50% 30% !important; background-repeat: no-repeat;background-size: 95%;
}
#slide-2 {
background-image: url(http://farm8.staticflickr.com/7384/8730654121_05bca33388_z.jpg);background-position:50% 30% !important; background-repeat: no-repeat;background-size: 95%;
}
#slide-3 { background-image: url(http://farm8.staticflickr.com/7384/8730654121_05bca33388_z.jpg);background-position:50% 30% !important; background-repeat: no-repeat;background-size: 85%;}
.slide:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 60%;
background: linear-gradient(transparent, black);
}
.slider-nav {
text-align: center;
margin: 10px 0 0 0;
}
.slider-nav a {
width: 10px;
height: 10px;
display: inline-block;
background: #ddd;
overflow: hidden;
text-indent: -9999px;
border-radius: 50%;
}
.slider-nav a.active {
background: #999;
}
<h1 align="middle">Title</h1>
<div class="slider-wrap">
<div class="slider" id="slider">
<div class="holder">
<div class="slide" id="slide-0"><span class="temp">Itsfsr</span></div>
<div class="slide" id="slide-1"><span class="temp">Edsfasgy</span></div>
<div class="slide" id="slide-2"><span class="temp">Fesfa II</span></div>
<div class="slide" id="slide-3"><span class="temp">Solfsagua</span></div>
</div>
</div>
<nav class="slider-nav">
Slide 0
Slide 1
Slide 2
Slide 3
</nav>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>