Rewind and Fast Forward audio function not working

Rewind and Fast Forward audio function not working - javascript

I wonder why my audio button for rewind and fast forward are not working. Instead of fast forward or vice versa the audio to 15 seconds, the song will start playing from the beginning. Here is my HTML code:
<div class="row clearfix">
#foreach($musics as $music)
<div class="col-lg-12 col-md-12">
<div class="card">
<a href="{{url('music/view/info/'.$music->id)}}">
<img class="card-img-left" src="{{$music->photo}}"/>
</a>
<div class="card-body">
<h4 class="card-title h5 h4-sm">{{$music->title}}</h4>
<p class="card-text">Artist: {{$music->artist}}</p>
<br><br>
<div style="text-align:right">
<audio id="audio">
<source src="{{asset('/storage/audios/After Like.mp3')}}">
</audio>
<button class="round-button" style="border-radius: 50px; width: 40px; height: 40px;" id="rewindBTN" onclick="rewind()"><i class="fa fa-fast-backward"></i></button>
<button class="round-button" style="border-radius: 50px; width: 40px; height: 40px;" id="playPauseBTN" onclick="playPause()"><i class="fa fa-play"></i></button>
<button class="round-button" style="border-radius: 50px; width: 40px; height: 40px;" id="fastforwardBTN" onclick="fastforward()"><i class="fa fa-fast-forward"></i></button>
<button class="round-button" style="border-radius: 50px; width: 40px; height: 40px;" onclick="stop()"><i class="fa fa-stop" ></i></button>
</div>
</div>
</div>
</div>
#endforeach
</div>
As for JavaScript
<script>
var audio = document.getElementById('audio');
var playPauseBTN = document.getElementById('playPauseBTN');
var rewindBTN = document.getElementById('rewindBTN');
var fastforwardBTN = document.getElementById('fastforwardBTN');
var count = 0;
function playPause(){
if(count == 0){
count = 1;
audio.play();
playPauseBTN.innerHTML = "<i class='fa fa-pause'></i>";
}else{
count = 0;
audio.pause();
playPauseBTN.innerHTML = "<i class='fa fa-play'></i>";
}
}
function rewind(){
audio.currentTime-=15;
}
function fastforward(){
audio.currentTime+=15;
}
function stop(){
playPause();
audio.pause();
audio.currentTime = 0;
playPauseBTN.innerHTML = "<i class='fa fa-play'></i>";
}
</script>
Seek solution to solve this issue

Related

Change iFrame size on button click

I'd like to implement an iFrame preview that changes size to mobile or tablet dimension when the corresponding buttons are clicked. I already got a solution that used to work but strangely enough does not work anymore when I'm implementing it on my WordPress site.
Since I'm quite new to programming I'm having trouble figuring out what's the problem here.
Thank you for your help!
<div class="resize-grid resize-margin-small-bottom">
<div class="resize-width-1-1">
<button class="resize-button2 resize-button-primary resize-margin-small-right"><i class="fas fa-desktop"></i></button>
<span class="resize-text-danger"></span>
<button class="resize-button resize-button-primary resize-margin-small-right"><i class="fa fa-tablet"></i></button>
<span class="resize-text-danger"></span>
<button class="resize-button1 resize-button-primary resize-margin-small-right"><i class="fa fa-mobile"></i></button>
<span class="resize-text-danger"></span>
</div>
</div>
<iframe width="1920" height="1080" src="https://example.com" frameborder="0" allowfullscreen></iframe>
<script>
$('.resize-button').on('click', function() {
$('iframe').animate({
width: 768,
height: 1024,
});
});
$('.resize-button1').on('click', function() {
$('iframe').animate({
width: 360,
height: 640});
});
$('.resize-button2').on('click', function() {
$('iframe').animate({
width: 1920,
height: 1080});
});
</script>

Adding the quotation just solve the issue.
$('.resize-button').on('click', function() {
$('iframe').animate({
width: "768px",
height: "1024px",
});
});
$('.resize-button1').on('click', function() {
$('iframe').animate({
width: "360px",
height: "640px"});
});
$('.resize-button2').on('click', function() {
$('iframe').animate({
width: "1920px",
height: "1080px"});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="resize-grid resize-margin-small-bottom">
<div class="resize-width-1-1">
<button class="resize-button2 resize-button-primary resize-margin-small-right"><i class="fas fa-desktop"></i></button>
<span class="resize-text-danger"></span>
<button class="resize-button resize-button-primary resize-margin-small-right"><i class="fa fa-tablet"></i></button>
<span class="resize-text-danger"></span>
<button class="resize-button1 resize-button-primary resize-margin-small-right"><i class="fa fa-mobile"></i></button>
<span class="resize-text-danger"></span>
</div>
</div>
<iframe width="1920" height="1080" src="https://example.com" frameborder="0" allowfullscreen></iframe>

How to make a function work for multiple div's with the same classes in javascript?

I've been trying to make a web-based tallying-application using javascript. I got it to work, but only for the first instance of a class (e.g. first tallying-element).
How do I make the function work for multiple the subsequent instances of the tallying-elements?
Also, I'm using Bootstrap v5.1.3 for the css, but did not add the lengthy code.
Your help is greatly appreciated!
let add = document.querySelector(".add");
let minus = document.querySelector(".minus");
let reset = document.querySelector(".reset");
let counter = document.querySelector(".counter");
add.addEventListener('click', addCounter);
minus.addEventListener('click', minusCounter);
reset.addEventListener('click', resetCounter);
function addCounter(item) {
counter_num = counter.innerHTML
counter.innerHTML = parseInt(counter_num) + 1
}
function minusCounter(){
counter_num = counter.innerHTML
if (counter_num == 0){
return false
}
counter.innerHTML = parseInt(counter_num) - 1
}
function resetCounter(){
if (counter.innerHTML == 0){
return false
}
if (confirm("Weet je zeker dat je de telling wilt resetten?") == true){
counter.innerHTML = 0;
resetCounter = "De telling is gereset!"
} else {}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=devide-width", initial-scale="1.0">
<link rel="stylesheet" href="bootstrap.min.css">
<title>Turf-app geadresseerd voorschrijven</title>
<style>
.counter{color:white; font-size: 25px; border-radius: 10%;max-width:50px;}
.tally_container{background-color:lightgrey; border-radius: 10px; padding:20px;}
.add{width: 38px; height: 38px;}
.minus{width: 38px; height: 38px;}
.title-text{color: white;}
.counter2{color:white; font-size: 25px; border-radius: 10%;max-width:50px;}
</style>
</head>
<body class="jumbotron bg-dark">
<h1 class="text-center mx-4 mt-4 mb-5 title-text">Turf-app geadresseerd voorschrijven</h1>
<div class="container" id="1">
<div class="tally_container mt-3 mb-3" name="tally-element">
<div class="vraag-container mb-3">
<h3>Patiënten zonder recept</h3>
</div>
<div class="counter-div text-center">
<div class="mx-2 text-center mb-2 counter bg-dark">0</div>
</div>
<div class="buttons">
<button class="btn btn-success mx-2 add">+</button>
<button class="btn btn-danger mx-2 minus">-</button> <br>
<button class="btn btn-primary mx-3 mt-4 reset">Reset</button>
</div>
</div>
</div>
<div class="container" id="2">
<div class="tally_container mt-3 mb-3" name="tally-element">
<div class="vraag-container mb-3">
<h3>No-shows</h3>
</div>
<div class="counter-div text-center">
<div class="mx-2 text-center mb-2 counter bg-dark">0</div>
</div>
<div class="buttons">
<button class="btn btn-success mx-2 add">+</button>
<button class="btn btn-danger mx-2 minus">-</button> <br>
<button class="btn btn-primary mx-3 mt-4 reset">Reset</button>
</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>

The querySelector() method only returns the first element that matches the specified selectors. To return all the matches, use the querySelectorAll() method instead.
let add = document.querySelectorAll(".add");
...
add.forEach(elem => elem.addEventListener('click', addCounter));

With some help, I managed to fix it. Every time a button is clicked, the closest '.counter' should be grabbed. See code.
let add = document.querySelectorAll(".add");
let minus = document.querySelectorAll(".minus");
let reset = document.querySelectorAll(".reset");
add.forEach(elem =>elem.addEventListener('click', addCounter));
minus.forEach(elem =>elem.addEventListener('click', minusCounter));
reset.forEach(elem=> elem.addEventListener('click', resetCounter));
function addCounter(elem) {
let counter = elem.target.closest(".container").querySelector(".counter")
counter_num = counter.innerHTML
counter.innerHTML = parseInt(counter_num) + 1
}
function minusCounter(elem){
let counter = elem.target.closest(".container").querySelector(".counter")
counter_num = counter.innerHTML
if (counter_num == 0){
return false
}
counter.innerHTML = parseInt(counter_num) - 1
}
function resetCounter(elem){
let counter = elem.target.closest(".container").querySelector(".counter")
if (counter.innerHTML == 0){
return false
}
if (confirm("Weet je zeker dat je de telling wilt resetten?") == true){
counter.innerHTML = 0;
resetCounter = "De telling is gereset!"
} else {}
}

Not able to display the image in the cropping area

Trying to display the image to the cropper. The image URL is there in the html src attribute but the image is not appearing.
When I click the edit button, I need to show the current image(The image which is above the edit button) in the cropper. So I can crop the part of the image i want. After cropping the image, if i click the update button, it should be updated. Please help me to complete.
window.onload = function() {
'use strict';
const noImage = 'https://via.placeholder.com/200x65';
var Cropper = window.Cropper;
var URL = window.URL || window.webkitURL;
var container = document.querySelector('.img-container');
var image = container.getElementsByTagName('img').item(0);
var cropBtn = document.querySelector('#crop-btn');
var rotate = document.querySelector('#rotate');
var resetImage = document.querySelector('#reset');
var zoomIn = document.querySelector('#zoomIn');
var zoomOut = document.querySelector('#zoomOut');
var deleteCofirmBtn = document.querySelector('#deleteCofirmBtn');
var profilePicture = document.querySelector('#profilePicture');
var deleteLinkContainer = document.querySelector('.deleteProfileImgWrap');
var modal = $('#modal');
var croppable = false;
var options = {
aspectRatio: 3 / 1,
viewMode: 1,
cropBoxResizable: false,
guides: false,
minContainerWidth: 300,
minContainerHeight: 200,
minCropBoxWidth: 200,
minCropBoxHeight: 65,
movable: true,
preview: '.img-preview',
ready: function() {
croppable = true;
},
};
var cropper = new Cropper(image, options);
var originalImageURL = image.src;
var uploadedImageType = 'image/jpeg';
var uploadedImageName = '';
var uploadedImageURL;
var inputImage = document.getElementById('editImage');
inputImage.addEventListener('click', function() {
const old_image = profilePicture;
image.src = old_image.src;
modal.modal({
backdrop: 'static'
});
cropper.destroy();
cropper = new Cropper(image, options);
console.log(`success`);
});
rotate.addEventListener('click', function() {
cropper.rotate(90);
});
reset.addEventListener('click', function() {
cropper.reset();
});
zoomOut.addEventListener('click', function() {
cropper.zoom(-0.1);
});
zoomIn.addEventListener('click', function() {
cropper.zoom(0.1);
});
deleteCofirmBtn.addEventListener('click', function() {
profilePicture.src = noImage;
$(".deleteProfileImgWrap").hide();
$('.file-upload-label').parent().fadeIn();
deleteLinkContainer.style.display = 'none';
});
cropBtn.addEventListener('click', function() {
let roundedCanvas;
let imgSrc = cropper.getCroppedCanvas({
width: 200,
height: 65
}).toDataURL();
deleteLinkContainer.style.display = 'block';
profilePicture.src = imgSrc;
});
}
#media(max-width: 767px) {
.profile-picture-wrap {
padding: 10px !important;
}
}
.profile-picture-wrap {
padding: 30px;
border: 1px solid #ccc;
border-radius: 4px;
}
.upload-button {
font-size: 1.2em;
}
.file-upload {
display: none !important;
}
.file-upload-label {
color: #007bfc;
font-weight: normal;
cursor: pointer;
}
#profilePicture {
cursor: pointer;
}
.file-upload-label:hover {
font-weight: bold;
}
.profile-pic {
cursor: pointer;
width: 200px;
height: 65px;
}
.profile-pic-wrap {
border: 1px solid #ccc;
padding: 30px 14px;
}
.my-profile-wrp p {
margin-bottom: 25px;
}
/* Cropper css */
.cropper-view-box,
.cropper-face {
border-radius: unset;
}
.profile-picture-wrap {
display: inline-block;
position: relative;
}
.profile-picture-wrap img {
border-radius: 0%;
}
.p-image {
position: unset;
}
.cropper-container {
margin-right: auto;
margin-left: auto;
}
.deleteProfileImgWrap {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.paperindex.com/bootstrap/css/font-awesome.min.css" rel="stylesheet">
<link href="https://cdn.paperindex.com/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.css" rel="stylesheet">
<script src="https://cdn.paperindex.com/js/jquery/jquery-3.1.0.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.min.js">
</script>
</head>
<body>
<div class="profile-picture-wrap">
<img id="profilePicture" src="https://cdn.paperindex.com/piimages/left-column/large-pool-of-suppliers.jpg" alt="Profile Picture">
<p id="editImage" class="text-center">Edit</p>
</div>
<p class="mrgn-top-4 deleteProfileImgWrap">Delete Photo
</p>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="mrgn-top-100"></div>
<!--topbar-header-wrap-->
</main>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal" type="button">×</button>
<h4 class="modal-title">Crop Your Photo</h4> <span></span>
</div>
<div class="modal-body">
<div class="img-container text-center">
<img id="image" src="" alt="Picture" style="width: 100%;max-height: 300px;">
<div class="mrgn-top-15">
<div class="btn-group">
<button id="zoomIn" type="button" class="btn btn-default"><i data-toggle="tooltip"
title="Zoom In" class="fa fa-search-plus" aria-hidden="true"></i></button>
<button id="zoomOut" type="button" class="btn btn-default"><i data-toggle="tooltip"
title="Zoom Out" class="fa fa-search-minus" aria-hidden="true"></i></button>
<button id="rotate" type="button" class="btn btn-default"><i data-toggle="tooltip"
title="Rotate" class="fa fa-repeat" aria-hidden="true"></i></button>
<button id="reset" type="button" class="btn btn-default"><i data-toggle="tooltip"
title="Reset" class="fa fa-refresh" aria-hidden="true"></i></button>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" id="crop-btn" class="btn btn-default" data-dismiss="modal">Add
Photo</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
<div class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal" type="button">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<!-- leftbox -->
<div class="box-2">
<div class="result"></div>
</div>
<!--rightbox-->
<div class="box-2 img-result hide">
<!-- result of crop -->
<img alt="" class="cropped" src="#"></div>
<!-- input file -->
<div class="box">
<div class="options hide">
<input class="img-w" type="hidden">
</div>
<!-- save btn -->
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" type="button">Cancel</button><button class="btn save hide" data-dismiss="modal">Update</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.paperindex.com/bootstrap/js/bootstrap.min.js">
</script>
<script src="https://cdn.paperindex.com/js/header/pi-header-functions.js">
</script>
</body>
</html>

function getRoundedCanvas(sourceCanvas) {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
/* var width = sourceCanvas.width;
var height = sourceCanvas.height; */
var width = 100;
var height = 100;
canvas.width = width;
canvas.height = height;
context.imageSmoothingEnabled = true;
context.drawImage(sourceCanvas, 0, 0, width, height);
context.globalCompositeOperation = 'destination-in';
context.beginPath();
context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);
context.fill();
return canvas;
}
window.addEventListener('DOMContentLoaded', function() {
var image = document.getElementById('image');
var button = document.getElementById('button');
var result = document.getElementById('result');
var croppable = false;
var cropper = new Cropper(image, {
aspectRatio: 1,
viewMode: 1,
minContainerWidth: 300,
minContainerHeight: 200,
minCropBoxWidth: 100,
minCropBoxHeight: 100,
ready: function() {
croppable = true;
},
});
button.onclick = function() {
var croppedCanvas;
var roundedCanvas;
var roundedImage;
if (!croppable) {
return;
}
// Crop
croppedCanvas = cropper.getCroppedCanvas();
// Round
roundedCanvas = getRoundedCanvas(croppedCanvas);
// Show
roundedImage = document.createElement('img');
roundedImage.src = roundedCanvas.toDataURL()
result.innerHTML = '';
result.appendChild(roundedImage);
};
});
img {
max-width: 100%;
}
.cropper-view-box,
.cropper-face {
border-radius: 50%;
}
.cropper-point.point-se {
height: 5px !important;
width: 5px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link href="https://fengyuanchen.github.io/cropperjs/css/cropper.css" rel="stylesheet" />
<script src="https://fengyuanchen.github.io/cropperjs/js/cropper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div id="result"></div>
Edit
</div>
</div>
</div>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div>
<img id="image" src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg" alt="Picture">
<!-- <img id="image" src="https://d1shuhu6tm6s0s.cloudfront.net/piimages/find-suppliers/Paper_Manufactures_PaperIndex_Map.png" alt="Picture">
</div> -->
</div>
<div class="modal-footer">
<button id="button" type="button" class="btn btn-success" data-dismiss="modal">Update</button>
</div>
</div>
</div>
</div>

Angular 2/4/6: how to update the scss dynamically

I am trying to transform video using scss dynamically in Angular 2/4/6 (similar to this article:https://hacks.mozilla.org/2011/01/zooming-and-rotating-for-video-in-html5-and-css3/)
I start 1st step is move video left /right / up / down
What I have done:
video.component.html
<div class="stage">
<video controls autoplay loop [style.left.px] = "v" [style.top.px] = "h">
<source src="http://www.archive.org/download/AnimatedMechanicalArtPiecesAtMit/P1120973_512kb.mp4" type="video/mp4">
</video>
</div>
<div class="row">
<div class="col-3 ">
<button type="button" class="btn btn-primary btn-tn " (click)="left()">
Left
</button>
</div>
<div class="col-3">
<button type="button" class="btn btn-primary btn-tn " (click)="right()">
Right
</button>
</div>
<div class="col-3">
<button type="button" class="btn btn-primary btn-tn " (click)="up()">
Up
</button>
</div>
<div class="col-3">
<button type="button" class="btn btn-primary btn-tn " (click)="down()">
Down
</button>
</div>
</div>
video.component.scss
.stage{
width:400px;
height:300px;
position:relative;
}
video{
-moz-transform:scale(1.5);
-webkit-transform:scale(1.5);
-o-transform:scale(1.5);
-ms-transform:scale(1.5);
transform:scale(1.5);
}
video.component.ts
#Component({
selector: 'app-video',
templateUrl: './video.component.html',
styleUrls: ['./video.component.scss']
})
export class VideoComponent implements OnInit {
v: number = 0;
h: number = 0;
constructor() {
}
ngOnInit() {
}
left(){
this.v -= 5;
}
right(){
this.v +=5;
}
up(){
this.h -=5;
}
down(){
this.h +=5;
}
}
Result: nothing happens. Seems like scss is not updated at all.
Any suggestion is appreciated.

Try ngStyle aproach
<video controls autoplay loop [ngStyle]="{'left.px': v, 'top.px': h}">
<source src="http://www.archive.org/download/AnimatedMechanicalArtPiecesAtMit/P1120973_512kb.mp4" type="video/mp4">
</video>

After playing with css for long, I found a working workaround:
video.component.html
<div class="stage">
<video controls autoplay loop muted [ngStyle]="{'top': top, 'left': left, 'transform': 'scale('+ scale +')'}">
<source src="http://www.archive.org/download/AnimatedMechanicalArtPiecesAtMit/P1120973_512kb.mp4" type="video/mp4">
</video>
</div>
<div class="row">
<div class="col-1 ">
<button type="button" class="btn btn-primary btn-tn " (click)="moveLeft()">
Left
</button>
</div>
<div class="col-1">
<button type="button" class="btn btn-primary btn-tn " (click)="moveRight()">
Right
</button>
</div>
<div class="col-1">
<button type="button" class="btn btn-primary btn-tn " (click)="moveUp()">
Up
</button>
</div>
<div class="col-1">
<button type="button" class="btn btn-primary btn-tn " (click)="moveDown()">
Down
</button>
</div>
<div class="col-1">
<button type="button" class="btn btn-primary btn-tn " (click)="zoomIn()">
Zoom In
</button>
</div>
<div class="col-1">
<button type="button" class="btn btn-primary btn-tn " (click)="zoomOut()">
Zoom Out
</button>
</div>
</div>
video.component.scss
.stage{
width:400px;
height:300px;
position:relative;
overflow:hidden;
background-color: coral
}
video{
position:absolute;
width:400px;
height:300px;
}
video.component.ts
l: number = 0;
t: number = 0;
left = '0px';
top = '0px';
scale: number = 1;
moveUp() {
this.t -= 5;
this.top = this.t + 'px';
}
moveDown() {
this.t += 5;
this.top = this.t + 'px';
}
moveLeft() {
this.l -= 5;
this.left = this.l + 'px';
}
moveRight() {
this.l += 5;
this.left = this.l + 'px';
}
zoomIn() {
this.scale += 0.2;
}
zoomOut() {
this.scale -= 0.2;
}
Although, it's working for me, this topic is still open for any better solution.
Happy coding !

JavaScript - removeClass from matching img title?

I am making new question thread, because I wasn't clear and I agree with that.
So, I have clickable item-cards, if you click on one the class name changes to selected and it also adds the item which you click on to the cart. Each cart item has X behind, if you click it, it will remove the item from the cart, but it doesn't remove the selected part. If I added there that it would remove that class, then it removed it from all items. Example, if I add 2 items in cart and I deleted one from the cart, then it removed the selected class from all, but how could I make it so it would only removes it from, which has same img title? Here are some examples:
Selected Item HTML
<li class="col 2 zoomIn animated" style="padding: 1%; font-weight: bold; font-size: 16px; animation-delay: 0s;">
<div class="card item-card waves-effect waves-light red lighten-1 white-text selected-item" style="margin: 0%; min-height: 295px; width: 245.438px; border-radius: 15px; height: 245px;" id="2761454276">
<div class="iteam" style="text-decoration: underline;text-align: left">Butterfly Knife | Crimson Web</div>
<div class="condition" style="text-align: left;text-size:13px">Field Tested</div>
<div class="center-align" style="padding:6%">
<img title="★ Butterfly Knife | Crimson Web (Field-Tested)" draggable="false" src="https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpovbSsLQJf0ebcZThQ6tCvq4iSqODxMajum25V4dB8xLjD9tjwjgK1_kZoYT30ctKVegM7NFyGrwK5yee90ZDt6ZmazHNluCQ8pSGKMl3kzfs/200fx200">
<div class="" 'floatvalue'="">Float: 0.11503319442272186
<div class="bitskinscomp" style="font-weight: normal;font-size:12px">BitSkins Price: $110.52 (You save: $-39.06)</div>
<div class="buyer-price center-align">$149.58</div>
</div>
</div>
</div>
Code, if you click on X
$("#itemcart span").click(function() {
$(this).parent().remove()
Code how X is being added
$("#itemcart div").each(function(){
if( $(this).children().length > 0){
} else{
$(this).append($("<span> X</span>"));
}
});
Clicking on item-card
$(".item-card").click(function() {
var itemnume = $(this).find("img").attr("title");
var replaced = itemnume.split(' ').join('_');
replaced = replaced.split('(').join('');
replaced = replaced.split(')').join('');
replaced = replaced.split('|').join('');
if ($(this).hasClass('selected-item')) {
$("#" + replaced).last().remove();
} else {
$("#itemcart").append($("<div id=" + replaced + ">" + itemnume + "</div>"));
$("#itemcart div").each(function(){
if( $(this).children().length > 0){
} else{
$(this).append($("<span> X</span>"));
}
});
$("#itemcart span").click(function() {
$(this).parent().remove()
$(".item-card").removeClass("red lighten-1 white-text selected-item");
calculateTotal();
});
}
$(this).toggleClass("red lighten-1 white-text selected-item");
calculateTotal();
});

Try this, save selected item in data and get it on click:
$(".item-card").click(function() {
var itemnume = $(this).find("img").attr("title");
var replaced = itemnume.split(' ').join('_');
replaced = replaced.split('(').join('');
replaced = replaced.split(')').join('');
replaced = replaced.split('|').join('');
if ($(this).hasClass('selected-item')) {
$("#" + replaced).last().remove();
} else {
var cart_item = $("<div id=" + replaced + ">" + itemnume + "</div>");
$("#itemcart").append(cart_item);
$("#itemcart div").each(function(){
if( $(this).children().length > 0){
} else{
$(this).append($("<span> X</span>"));
}
});
var self = $(this);
cart_item.on('click', 'span', function() {
$(this).parent().remove()
self.removeClass("red lighten-1 white-text selected-item");
calculateTotal();
});
}
$(this).toggleClass("red lighten-1 white-text selected-item");
calculateTotal();
});

Here's a running snippet with fake entries. You have to adapt indentifiers to your dynamic code.
Delegate event listening to the <ul> element. Listen to clicks on the <ul><li><div><span> element and remove the <li> 2 parents upward.
<html>
<body>
<ul class="item-store">
<li class="col 2 zoomIn animated" style="padding: 1%; font-weight: bold; font-size: 16px; animation-delay: 0s;">
<div class="card item-card waves-effect waves-light red lighten-1 white-text selected-item" style="margin: 0%; min-height: 295px; width: 245.438px; border-radius: 15px; height: 245px;" id="1000">
<div class="iteam" style="text-decoration: underline;text-align: left">
Butterfly Knife | Crimson Web
</div>
<div class="condition" style="text-align: left;text-size:13px">
Field Tested
</div>
<div class="center-align" style="padding:6%">
<img title="★ Butterfly Knife | Crimson Web (Field-Tested)" draggable="false" src="https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpovbSsLQJf0ebcZThQ6tCvq4iSqODxMajum25V4dB8xLjD9tjwjgK1_kZoYT30ctKVegM7NFyGrwK5yee90ZDt6ZmazHNluCQ8pSGKMl3kzfs/200fx200">
<div class="" 'floatvalue'="">
Float: 0.11503319442272186
<div class="bitskinscomp" style="font-weight: normal;font-size:12px">
BitSkins Price: $110.52 (You save: $-39.06)
</div>
<div class="buyer-price center-align">
$149.58
</div>
</div>
</div>
</div>
</li>
<li class="col 2 zoomIn animated" style="padding: 1%; font-weight: bold; font-size: 16px; animation-delay: 0s;">
<div class="card item-card waves-effect waves-light red lighten-1 white-text selected-item" style="margin: 0%; min-height: 295px; width: 245.438px; border-radius: 15px; height: 245px;" id="1001">
<div class="iteam" style="text-decoration: underline;text-align: left">
Butterfly Knife | Crimson Web
</div>
<div class="condition" style="text-align: left;text-size:13px">
Field Tested
</div>
<div class="center-align" style="padding:6%">
<img title="★ Butterfly Knife | Crimson Web (Field-Tested)" draggable="false" src="https://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpovbSsLQJf0ebcZThQ6tCvq4iSqODxMajum25V4dB8xLjD9tjwjgK1_kZoYT30ctKVegM7NFyGrwK5yee90ZDt6ZmazHNluCQ8pSGKMl3kzfs/200fx200">
<div class="" 'floatvalue'="">
Float: 0.11503319442272186
<div class="bitskinscomp" style="font-weight: normal;font-size:12px">
BitSkins Price: $110.52 (You save: $-39.06)
</div>
<div class="buyer-price center-align">
$149.58
</div>
</div>
</div>
</div>
</li>
</ul>
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script>
//Code, if you click on X
$(".item-store").on('click', '.item-card span', (function() {
$(this).parent().parent().remove();
}));
//Code how X is being added
//$(".item-cart div").each(function()
$(".item-card ").each(function()
{
if( $(this).children().length > 0){
$(this).append($("<span> x</span>"));
} else{
$(this).append($("<span> X</span>"));
}
});
</script>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

Rewind and Fast Forward audio function not working - javascript

Related

Change iFrame size on button click

How to make a function work for multiple div's with the same classes in javascript?

Not able to display the image in the cropping area

Angular 2/4/6: how to update the scss dynamically

JavaScript - removeClass from matching img title?

Categories

Resources