icon stays hidden until something is moved there - javascript

I am trying to let the icons (wich will be buttons in the future) stay hidden until the right word is placed in the tab the button is in too, so when it's all done you can only click the icon if you've set the right word in the right tab and some audio will play.. but I can't seem to figure out how to let the icon stay hidden until the word is placed, if I look it up, something needs to stay hidden until the button is clicked, but I don't want that..
This is how it looks
This is my code
$(document).ready(function() {
var rigtige = 0; //good_points
var forkerte = 0; //false_points
var answers;
var footer;
var timer = setInterval(function() {
getReady();
}, 203);
var number = [0, 1, 2, 3, 4, 5, 6, 7];
//define JSON arrays (jsonData_0_123.json)
function getReady() {
if (jsonData !== "noJson") {
clearInterval(timer);
answers = jsonData.answers;
footer = jsonData.footer;
makeWordList();
dragDrop();
}
}
//end
function makeWordList() {
shuffle(number);
var text_time;
for (var j = 0; j < answers.length; j++) {
var i = j + 1;
//<div class="tekst draggable" id="tekst1"> <p>kat</p> </div>
document.getElementById("word" + number[j]).innerHTML = '<div class="tekst draggable" id="tekst' + i + '"> <span>' + answers[j] + '</span></div>'
}
}
// //makeWordList
// function makeWordList() {
// shuffle(number);
// for (var i = 0; i < answers.length; i++) {
// //<div class="tekst draggable" id="tekst1"> <p>kat</p> </div>
// var j = i + 1;
// var str = '<div class="tekst draggable" id="tekst'+ j +'"> <p>'+ answers[i] +'</p> </div>';
// document.getElementById('word' + number[i]).innerHTML = str;
// }
// };
//
// //end
//shuffle
function shuffle(array) {
var currentIndex = array.length,
temporaryValue, randomIndex;
while (0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
//end
//make dragdroppable
function dragDrop() {
//Make the revert event for draggable
$.ui.draggable.prototype._mouseStop = function(event) {
//If we are using droppables, inform the manager about the drop
var dropped = false;
if ($.ui.ddmanager && !this.options.dropBehaviour)
dropped = $.ui.ddmanager.drop(this, event);
//if a drop comes from outside (a sortable)
if (this.dropped) {
dropped = this.dropped;
this.dropped = false;
}
if ((this.options.revert == "invalid" && !dropped) || (this.options.revert == "valid" && dropped) || this.options.revert === true || ($.isFunction(this.options.revert) && this.options.revert.call(this.element, dropped))) {
var self = this;
self._trigger("reverting", event);
$(this.helper).animate(this.originalPosition, parseInt(this.options.revertDuration, 10), function() {
event.reverted = true;
self._trigger("stop", event);
self._clear();
});
} else {
this._trigger("stop", event);
this._clear();
}
return false;
}
//end
//Make tekst draggable
$(".draggable").draggable({
opacity: 1,
containment: 'body',
revert: true,
scroll: false,
reverting: function() {
console.log('reverted');
//play('false');
forkerte++;
document.getElementById("forkerte").innerHTML = '<span id="forkerte">' + forkerte + '</span>';
},
});
//end
var id = 1;
var text = "";
var text2 = "";
while (id < 9) { // lengte van je array + 1
text = "antwoord" + id; //id= antwoord1 antwoord2 enz daarom antwoord + id zo dat het er 8 keer komt
text2 = "tekst" + id;
$("#" + text).droppable({ // dan wordt het dus allemaal droppable id antwoord 1 tm 8
tolerance: "pointer",
accept: "#" + text2, // Welke id er op moet vallen je maakt antwoord1a(tekst) bv droppable voor antwoord1(antwoord div)
drop: function(event, ui) {
// play('true');
$(ui.draggable).draggable({
revert: false
}); // Only draggable in div antwoord
$(ui.draggable).draggable('disable'); //disable draggable
ui.draggable.position({
of: $(this),
my: 'center left',
at: 'center center'
});
$(this).droppable('disable');
rigtige++; //+1 bij de punten van goed
document.getElementById("rigtige").innerHTML = '<span id="rigtige">' + rigtige + '</span>'; //update de html
//checckScore();
}
});
id++; //BELANKRIJK zonder id++ endles loop
}
}
//end
//spinning reset button
$(".spin").mouseenter(function() {
$(".fa-refresh").addClass("fa-spin");
});
$(".spin").mouseleave(function() {
$(".fa-refresh").removeClass("fa-spin");
});
// end
});
body,
html {
margin-left: 10%;
margin-right: 10%;
padding: 0px;
height: 100%;
font-family: georgia, "Comic Sans MS";
background-color: #f0f0f0;
}
.container {
height: 90%;
border-collapse: collapse;
display: table;
}
.igen {
font-size: 25px;
font-weight: bold;
}
.points {
float: right;
}
.container {
height: 90%;
border-collapse: collapse;
display: table;
}
header {
height: 5%;
border-bottom: thick solid grey;
}
.img {
width: 25%;
height: 30%;
background-color: #f0f0f0;
float: left;
}
.center {
margin-left: 25%;
margin-right: 25%;
}
.antwoord {
float: left;
width: 95%;
height: 25px;
background-color: white;
border-style: solid;
border-color: #000000;
border-width: 4px;
}
.move2 {
margin-top: 12.5%
}
.move4 {
margin-top: 19%
}
.move5 {
margin-top: 33.5%
}
.move6 {
margin-top: 20.8%
}
.move7 {
margin-top: 37.5%
}
.border {
margin-top: 45%;
border-top: thick solid grey;
background-color: red;
}
.word,
.word .tekst,
.word p {
display: inline;
margin-left: 7%;
font-weight: bold;
}
.my-row {
clear: both;
}
.answers .word,
.answers .word2 {
float: left;
padding: 3px;
margin-left: 7%;
font-weight: bold;
}
.fa {
margin-left: 5px;
margin-top: 2px;
}
.word,
.word2 {
padding-top: 5%;
margin: 5%;
}
footer {
border-top: thick solid grey;
height: 5%;
display: table-row;
vertical-align: bottom;
}
.sprint {
float: right;
}
.copyright {
position: relative;
bottom: 20px;
left: 65px;
font-size: 10px;
}
a {
text-decoration: none;
color: black;
}
a:hover {
text-decoration: none;
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Words</title>
<link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
</head>
<body>
<header>
<span class="fa fa-refresh spin" style="font-size:25px;"></span><span class="igen spin"> igen</span>
<span class="points"><i class="fa fa-thumbs-o-up" style="font-size:24px"></i>Rigtige: <span id="rigtige">0</span> <i class="fa fa-thumbs-o-down" style="font-size:24px"></i>Forkerte:
<span id="forkerte">0</span>
</span>
</header>
<div class="container">
<div class="img" id="img1">
<div class="plaatje" id="plaatje1">
<img class="center" src="img/cat.jpg" alt="cat" width="50%;">
</div>
<div class="move1">
<div class="antwoord droppable" id="antwoord1"><i class="fa fa-play" style="font-size:20px"></i>
</div>
</div>
</div>
<div class="img" id="img2">
<div class="plaatje" id="plaatje1">
<img class="center" src="img/beak.jpg" alt="beak" width="50%;">
</div>
<div class="move2">
<div class="antwoord" id="antwoord2"><i class="fa fa-play" style="font-size:20px"></i>
</div>
</div>
</div>
<div class="img" id="img3">
<div class="plaatje" id="plaatje3">
<img class="center" src="img/spoon.jpg" alt="spoon" width="50%;">
</div>
<div class="move3">
<div class="antwoord" id="antwoord3"><i class="fa fa-play" style="font-size:20px"></i>
</div>
</div>
</div>
<div class="img" id="img4">
<div class="plaatje" id="plaatje4">
<img class="center" src="img/milk.jpg" alt="milk" width="50%;">
</div>
<div class="move4">
<div class="antwoord" id="antwoord4"><i class="fa fa-play" style="font-size:20px"></i>
</div>
</div>
</div>
<div class="img" id="img5">
<div class="plaatje" id="plaatje5">
<img class="center" src="img/egg.jpg" alt="egg" width="50%;">
</div>
<div class="move5">
<div class="antwoord" id="antwoord5"><i class="fa fa-play" style="font-size:20px"></i>
</div>
</div>
</div>
<div class="img" id="img6">
<div class="plaatje" id="plaatje6">
<img class="center" src="img/thee.jpg" alt="tea" width="50%;">
</div>
<div class="move6">
<div class="antwoord" id="antwoord6"><i class="fa fa-play" style="font-size:20px"></i>
</div>
</div>
</div>
<div class="img" id="img7">
<div class="plaatje" id="plaatje7">
<img class="center" src="img/meel.jpg" alt="flour" width="50%;">
</div>
<div class="move7">
<div class="antwoord" id="antwoord7"><i class="fa fa-play" style="font-size:20px"></i>
</div>
</div>
</div>
<div class="img" id="img8">
<div class="plaatje" id="plaatje8">
<img class="center" src="img/passport.jpg" alt="passport" width="50%;">
</div>
<div class="move8">
<div class="antwoord" id="antwoord8"><i class="fa fa-play" style="font-size:20px"></i>
</div>
</div>
</div>
<div class="answers">
<div class="my-row border">
<div class="word" id="word0"></div>
<div class="word" id="word1"></div>
<div class="word" id="word2"></div>
<div class="word" id="word3"></div>
</div>
<div class="my-row">
<div class="word2" id="word4"></div>
<div class="word2" id="word5"></div>
<div class="word2" id="word6"></div>
<div class="word2" id="word7"></div>
</div>
</div>
<footer>
<img class="dansk" id="dansk" src="img/dansk2.jpg" alt="dansk" />
<img class="sprint" id="sprint" src="img/sprint2.png" alt="sprint" />
<center><span class="copyright"> ©2013 laerdansk / FC-Sprint² Leerbedrijf bronnen </span>
</center>
</footer>
<script type="text/javascript">
var jsonData = "noJson";
var hr = new XMLHttpRequest();
hr.open("GET", "json_files/jsonData_0_123.json", true);
hr.setRequestHeader("Content-type", "application/json", true);
hr.onreadystatechange = function() {
if (hr.readyState == 4 && hr.status == 200) {
jsonData = JSON.parse(hr.responseText).main_object;
}
}
hr.send(null);
</script>
<script src="javascript.js"></script>
</body>
</html>
this is my fiddle i hope it's okay since it's the second time making a fiddle
if it's not right, please, tips are always welcome! https://jsfiddle.net/82332Lk8/

you would be able to do this with the accept option within droppable.
But first, you need to declare the image's visibility as "hidden" in your css file:
.eggImage {
visibility: hidden;
}
once you make the matching word draggable with a class like '.wordEgg' then you could use 'accept' in your droppable function to specify which class the droppable element accepts, then use css() to change the visibility of the image:
$( ".eggImage" ).droppable({
accept: ".wordEgg",
drop: function() {
$(".eggImage").css("visibility","visible")
});
working fiddle demo: http://jsfiddle.net/drrrreams/7q74ophg/

Related

How can I delete specific <li> item from the list?

I want to make a to do list with HTML, CSS and JS but I can not add delete function. I wanna hold these tasks in localStorage at the same time. When I click second item's delete button, always first item gets deleted. What can I do?
Basically, I want to seperate li's with [data-text=tasklist[i] and delete the li item that has attribute or when clicked.
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/style.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
crossorigin="anonymous"
/>
<link rel="shortcut icon" href="#">
<title>To Do List</title>
</head>
<body>
<!-- Toast start Task -->
<div class="position-fixed bottom-0 right-0 p-3"
style="z-index: 5; right: 0; top: 0;">
<div id="liveToast" class="toast hide" role="alert" aria-live="assertive"
aria-atomic="true" data-delay="6000">
<div class="toast-header">
<strong class="mr-auto">Kodluyoruz </strong>
<span id="toast-img"></span>
<button type="button" class="ml-2 mb-1 close" data-dismiss="toast"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="toast-body font-weight-bold">
</div>
</div>
</div>
<!-- Toast End For task -->
<!-- Container Start -->
<div class="container col-sm-8 mt-5">
<div class="row text-center d-block">
<!-- Header Start -->
<div class="header my-3 rounded ">
<img
src="https://cdn.sanity.io/images/9kdepi1d/production/65c832d202a503b15d99e628f4313782f3ef50db-300x62.png"
class="mb-1"
alt=""
/>
<h2>To Do List</h2>
<div id="searchBar" class="input-group">
<input class="input-group rounded-left d-inline" type="text"
name="task" id="task" placeholder="Bugün ne yapacaksın?" />
<div class="input-group-append">
<button class="btn btn-primary" onclick="newElement()" id="liveToastBtn">Ekle</button>
</div>
</div>
</div>
<!-- Header End -->
<!-- Task List Start -->
<ul class="list-group" id="list">
</ul>
<!-- Task List End -->
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script src="js/app.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"
></script>
</div>
</div>
<!-- Container End -->
</body>
</html>
JS:
var TASK = document.querySelector('#task');
let ulEl = document.querySelector('#list');
const toastEl = document.querySelector('#liveToast');
const toastBody = document.querySelector('.toast-body');
const toastImg = document.querySelector('#toast-img');
let collapseBtn = `<button id="clsBtn" onclick="deleteTask()" type="button" class="close"
data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>`
let taskList = !localStorage.getItem('tasks') ? [] : (localStorage.getItem('tasks').split(','));
console.log(taskList)
console.log(taskList.length)
// get the list of tasks in local storage
if(taskList.length>0){
for (let i=0; i < taskList.length; i++) {
if(checkForText(taskList[i])){
TASK.value = taskList[i];
const liDOM = document.createElement('li');
liDOM.innerHTML = `${TASK.value} ${collapseBtn}`;
liDOM.classList.add('list-group-item','d-flex',
'justify-content-between', 'align-items-center');
liDOM.setAttribute('data-text',TASK.value);
ulEl.append(liDOM);
TASK.value = '';
}
}
}
// check for <text> is in the list?
function checkForText(text) {
let found = false;
if(taskList.includes(text.toLowerCase())) {
found = true;
}
return found;
}
// add new Task
function newElement (){
console.log(TASK.value);
console.log("running");
const liDOM = document.createElement('li');
if (TASK.value.length > 0){
if(checkForText(TASK.value)){
//toast
toastBody.innerHTML = `<p class= "text-danger">
Eklemek istediğiniz görev listede mevcut!!</p>`
toastImg.innerHTML = `<img id="toastImg" style="width: 5px;"
src="img/exclamation-solid.svg" class="rounded mr-2" alt="">`
//Showing and Hiding Toast automatically -JQuery
$(document).ready(function(){
$('#liveToast').toast('show');
});
TASK.value= '';
}else{
liDOM.innerHTML = `${TASK.value} ${collapseBtn}`;
liDOM.classList.add('list-group-item','d-flex',
'justify-content-between', 'align-items-center');
liDOM.setAttribute('data-text',TASK.value);
ulEl.append(liDOM);
taskList.push(TASK.value.trim());
localStorage.setItem('tasks',(taskList));
//************************************ */
// toast
toastBody.innerHTML = `<p class= "text-success">Görev listeye eklendi.</p>`;
toastImg.innerHTML = `<img id="toastImg" style="width: 15px;"
src="img/check-solid.svg" class="rounded mr-2" alt="">`
//Showing and Hiding Toast automatically -JQuery
$(document).ready(function(){
$('#liveToast').toast('show');
});
TASK.value= '';
}
}else if (TASK.value.length <1 ){
// toast
toastBody.innerHTML = `<p class= "text-danger">Listeye boş ekleme yapamazsınız!!</p>`
toastImg.innerHTML = `<img id="toastImg" style="width: 5px;"
src="img/exclamation-solid.svg" class="rounded mr-2" alt="">`
//Showing and Hiding Toast automatically -JQuery
$(document).ready(function(){
$('#liveToast').toast('show');
});
// toastEl.classList.replace('hide', 'show');
// await sleep (7000);
// toastEl.classList.replace( 'show', 'hide');
}
}
// delete Task
//if(localStorage.getItem('tasks').length > 0 || taskList.length > 0 ){
function deleteTask(){
let liEl = document.querySelectorAll('.list-group-item');
let i = 0;
for(; i < taskList.length; i++){
if(liEl("data-text") === taskList[i]){
// taskList.splice(taskList.indexOf(taskList[i]), 1);
// liEl.querySelector(`[data-text="${taskList[i]}"]`).removeChild();
console.log( "attr"+liEl.getAttribute("data-text"));
localStorage.setItem('tasks', taskList);
// console.log(taskList);
// console.log(localStorage.getItem('tasks'))
}
}
}
CSS:
* {
box-sizing: border-box;
}
ul {
margin: 0;
padding: 0;
}
ul li {
cursor: pointer;
position: relative;
padding: 12px 8px 12px 40px;
background: #eee;
font-size: 18px;
transition: 0.2s;
list-style-type: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
ul li:nth-child(odd) {
background: #f9f9f9;
}
ul li:hover {
background: #ddd;
}
ul li.checked {
background: #276678;
color: #fff;
text-decoration: line-through;
}
ul li.checked::before {
content: "";
position: absolute;
border-color: #fff;
border-style: solid;
border-width: 0 2px 2px 0;
top: 10px;
left: 16px;
transform: rotate(45deg);
height: 15px;
width: 7px;
}
.close {
position: absolute;
right: 0;
top: 0;
padding: 12px 16px 12px 16px;
}
.close:hover {
background-color: #f78501;
color: white;
}
.header {
background-color: #f78501;
padding: 30px 40px;
color: white;
text-align: center;
}
img {
background-color: white;
}
.header:after {
content: "";
display: table;
clear: both;
}
input {
margin: 0;
border: none;
border-radius: 0;
width: 75%;
padding: 10px;
float: left;
font-size: 16px;
}
.button {
padding: 10px;
width: 25%;
background: #d9d9d9;
color: #555;
float: left;
text-align: center;
font-size: 16px;
cursor: pointer;
transition: 0.3s;
border-radius: 0;
}
.button:hover {
background-color: #bbb;
}
#task {
width: 94%;
}
I found the solution if anyone need.
Firstly, i create a node list with css attribute selector. (line 98 app.js)
Then i added event listener with for loop (line 100 app.js)
Only bad side of this solution, page have to reload with 'location.reload' function when add a new task. Here all codes:
var TASK = document.querySelector('#task');
let ulEl = document.querySelector('#list');
const toastEl = document.querySelector('#liveToast');
const toastBody = document.querySelector('.toast-body');
const toastImg = document.querySelector('#toast-img');
let collapseBtn = `<button data-delete="cls" class= "Btn rounded small border-secondary" type="button" class="close"
data-dismiss="alert" aria-label="Close">
<span class=" font-weight-bold" aria-hidden="true">×</span>
</button>`
let taskList = !localStorage.getItem('tasks') ? [] : (localStorage.getItem('tasks').split(','));
console.log(taskList)
console.log(taskList.length)
//get the list of tasks in local storage
if(taskList.length>0){
for (let i=0; i < taskList.length; i++) {
if(checkForText(taskList[i])){
TASK.value = taskList[i];
const liDOM = document.createElement('li');
liDOM.innerHTML = `<p>${TASK.value}</p> ${collapseBtn}`;
liDOM.classList.add('list-group-item','d-flex',
'justify-content-between', 'align-items-center');
liDOM.setAttribute('data-text',TASK.value);
ulEl.append(liDOM);
TASK.value = '';
}
}
}
//check for 'text' is in the list?
function checkForText(text) {
let found = false;
if(taskList.includes(text.toLowerCase())) {
found = true;
}
return found;
}
//Add new Task
async function newElement (){
console.log(TASK.value);
console.log("running");
const liDOM = document.createElement('li');
if (TASK.value.length > 0){ //if value length is greater than zero
if(checkForText(TASK.value)){ //if value is already in the list
//toast
toastBody.innerHTML = `<p class= "text-danger">
Eklemek istediğiniz görev listede mevcut!!</p>`
toastImg.innerHTML = `<img id="toastImg" style="width: 5px;"
src="img/exclamation-solid.svg" class="rounded mr-2" alt="">`
//Showing and Hiding Toast automatically -JQuery
$(document).ready(function(){
$('#liveToast').toast('show');
});
TASK.value= '';
}else{ //if value is not in the list, add it to the list
liDOM.innerHTML = `<p>${TASK.value}</p> ${collapseBtn}`;
liDOM.classList.add('list-group-item','d-flex',
'justify-content-between', 'align-items-center');
liDOM.setAttribute('data-text',TASK.value);
ulEl.append(liDOM);
taskList.push(TASK.value.trim());
localStorage.setItem('tasks',(taskList));
//************************************ */
//toast
toastBody.innerHTML = `<p class= "text-success">Görev listeye eklendi.</p>`;
toastImg.innerHTML = `<img id="toastImg" style="width: 15px;"
src="img/check-solid.svg" class="rounded mr-2" alt="">`
//Showing and Hiding Toast automatically -JQuery
$(document).ready(function(){
$('#liveToast').toast('show');
});
TASK.value= '';
//working like sleep function
await new Promise(done => setTimeout(() => done(), 3000));
//reload page for close button - addEventListener(deleteTask)
location.reload();
}
}else if (TASK.value.length <1 ){ // if value length is smaller than one
// toast
toastBody.innerHTML = `<p class= "text-danger">Listeye boş ekleme yapamazsınız!!</p>`
toastImg.innerHTML = `<img id="toastImg" style="width: 5px;"
src="img/exclamation-solid.svg" class="rounded mr-2" alt="">`
//Showing and Hiding Toast automatically -JQuery
$(document).ready(function(){
$('#liveToast').toast('show');
});
// toastEl.classList.replace('hide', 'show');
// await sleep (4000);
// toastEl.classList.replace( 'show', 'hide');
}
}
//Delete Task
if(taskList.length > 0 ){
let clsBtn = document.querySelectorAll(`[data-delete="cls"]`)
let i = 0;
for(; i < clsBtn.length; i++){
clsBtn[i].addEventListener('click', deleteTask)
}
function deleteTask(){
let txt = this.parentElement.querySelector('p')
taskList.splice(taskList.indexOf(txt.innerText),1);
this.parentElement.remove();
localStorage.setItem('tasks',taskList);
}
}

Show multiple file thumbnail on custom dropzone

I created custom dropzone in order to upload my files as the following example
function readFile(input) {
debugger;
if (input.files && input.files[0]) {
var reader = new FileReader();
for (let i = 0; i < input.files.length; i++) {
reader.onload = function(e) {
var htmlPreview =
'<img width="100" src="' +
e.target.result +
'" />' +
"<p>" +
input.files[i].name +
"</p>";
var wrapperZone = $(input).parent();
var previewZone = $(input)
.parent()
.parent()
.find(".preview-zone");
var boxZone = $(input)
.parent()
.parent()
.find(".preview-zone")
.find(".box")
.find(".box-body");
wrapperZone.removeClass("dragover");
previewZone.removeClass("hidden");
// boxZone.empty();
boxZone.append(htmlPreview);
};
}
reader.readAsDataURL(input.files[0]);
}
}
function reset(e) {
e.wrap("<form>")
.closest("form")
.get(0)
.reset();
e.unwrap();
}
$(".dropzone").change(function() {
readFile(this);
});
$(".dropzone-wrapper").on("dragover", function(e) {
e.preventDefault();
e.stopPropagation();
$(this).addClass("dragover");
});
$(".dropzone-wrapper").on("dragleave", function(e) {
e.preventDefault();
e.stopPropagation();
$(this).removeClass("dragover");
});
$(".remove-preview").on("click", function() {
var boxZone = $(this)
.parents(".preview-zone")
.find(".box-body");
var previewZone = $(this).parents(".preview-zone");
var dropzone = $(this)
.parents(".form-group")
.find(".dropzone");
boxZone.empty();
previewZone.addClass("hidden");
reset(dropzone);
});
.container {
padding: 50px 100px;
}
.box {
position: relative;
background: #ffffff;
width: 100%;
}
.box-header {
color: #444;
display: block;
padding: 10px;
position: relative;
margin-bottom: 10px;
}
.box-tools {
position: absolute;
right: 10px;
top: 5px;
}
.dropzone-wrapper {
border: 2px dashed #91b0b3;
color: #92b0b3;
position: relative;
height: 150px;
}
.dropzone-desc {
position: absolute;
margin: 0 auto;
left: 0;
right: 0;
text-align: center;
width: 40%;
top: 60px;
font-size: 16px;
}
.dropzone,
.dropzone:focus {
outline: none !important;
width: 100%;
cursor: pointer;
}
.input-file {
position: absolute;
width: 100%;
height: 150px;
opacity: 0;
}
.dropzone-wrapper:hover,
.dropzone-wrapper.dragover {
background: #ecf0f5;
}
.preview-zone {
text-align: center;
}
.preview-zone .box {
box-shadow: none;
border-radius: 0;
margin-bottom: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row" id="10secs">
<div class="col-lg-12">
<div class="card">
<div class="card-header">
<h4 class="card-title">10sec</h4>
</div>
<div class="card-body">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<div class="preview-zone hidden">
<div class="box box-solid">
<div class="box-header with-border">
<div><b>Preview</b></div>
<div class="box-tools pull-right">
<button type="button" class="btn btn-danger btn-xs remove-preview">
<i class="fa fa-times"></i> Reset
</button>
</div>
</div>
<div class="box-body"></div>
</div>
</div>
<div class="dropzone-wrapper">
<div class="dropzone-desc">
<i class="glyphicon glyphicon-download-alt"></i>
<div>Choose an image file or drag it here.</div>
</div>
<input type="file" class="dropzone input-file" multiple asp-for="#Model.Files10" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
As you can see it is a multiple-input file, so you can upload multiple files in the same dropzone.
as you can see in the readFile javascript function, I create the thumbnail, the problem is when selecting more than one file, it only shows one thumbnail, how can I display each of them each next to the other as:
Regards

display id of shape in an input type when dropping to drag area and edit shapes in drag area on selecting them

i am experimenting with JavaScript to complete some drag and drop tasks like displaying ids whenever a shape is dropped into a drag area. I cant figure out how to display the ids of the shapes in the table input type of number each time a shape is dropped in the drag space.
here is the JavaScript code
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var id = ev.dataTransfer.getData("text");
if (id == "drag1" && ev.target.id == "drag-area") {
var nodeCopy = document.getElementById(id).cloneNode(true);
nodeCopy.id = incrementId();
function incrementId() {
if (!this.latestId) this.latestId = 1;
else this.latestId++;
return this.latestId;
}
ev.target.appendChild(nodeCopy);
var id = document.getElementById(latestId).id;
//display id on shape
document.getElementById(latestId).innerHTML = id;
var value = document.getElementById(latestId).id;
document.getElementById(latestId).value = value;
console.log(value);
}
if (id == "drag3" && ev.target.id == "drag-area") {
var nodeCopy = document.getElementById(id).cloneNode(true);
nodeCopy.id = incrementId();
function incrementId() {
if (!this.latestId) this.latestId = 1;
else this.latestId++;
return this.latestId;
}
ev.target.appendChild(nodeCopy);
var id = document.getElementById(latestId).id;
//display id on shape
document.getElementById(latestId).innerHTML = id;
var value = document.getElementById(latestId).id;
document.getElementById(latestId).value = value;
console.log(value);
}
}
function remove(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
var del = confirm(
"You are about to DELETE this insert. Do you wish to continue?"
);
if (del) {
var el = document.getElementById(data);
el.parentNode.removeChild(el);
console.log("item deleted");
}
}
function decreasewidth() {
var id = document.getElementById(latestId).id;
var myImg = document.getElementById(id);
var currWidth = myImg.clientWidth;
if (currWidth == 50) {
myImg.style.width = currWidth - 0 + "px";
} else {
myImg.style.width = currWidth - 15 + "px";
}
}
function increaseheight() {
var id = document.getElementById(latestId).id;
var myImg = document.getElementById(id);
var currHeight = myImg.clientHeight;
if (currHeight == 500) {
myImg.style.height = currHeight + 0 + "px";
} else {
myImg.style.height = currHeight + 15 + "px";
}
}
function decreaseheight() {
var id = document.getElementById(latestId).id;
var myImg = document.getElementById(id);
var currHeight = myImg.clientHeight;
if (currHeight == 50) {
myImg.style.height = currHeight - 0 + "px";
} else {
myImg.style.height = currHeight - 15 + "px";
}
}
here is the code for the html where the table input is
<div class="table-edit">
Table:<input
class="table-id"
ondrop="drop(event)"
type="number"
value=""
/>
</div>
there is the full html code
div class="mains">
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content container">
<div class="row">
<div class="col-md-12">
<div class="box box-solid">
<div class="box-header bg-teal">
<h3 class="box-title">Tables</h3>
</div>
<form action="" method="POST">
<div class="box-body">
<div class="row">
<div class="col-md-12">
<table id="example1" class="table table-striped">
<div class="table-area">
<div class="row container table-section">
<div
class="roster-box draggable-shapes col-lg-4 col-md-4 col-sm-12"
ondrop="remove(event)"
ondragover="allowDrop(event)"
>
<h1
class="text-center"
style="text-decoration: underline"
>
tables
</h1>
<div class="table-area-section">
<li>
<div
class="circle"
id="drag1"
draggable="true"
ondragstart="drag(event)"
alt="circle"
></div>
</li>
<li>
<div
class="rectangle"
id="drag3"
draggable="true"
ondragstart="drag(event)"
></div>
</li>
</div>
</div>
<div
class="drag-and-drop col-lg-8 col-md-8 col-sm-12"
>
<div
id="drag-area"
class="roster-box text-center drag-section"
ondrop="drop(event)"
ondragover="allowDrop(event)"
onselect="selectImage()"
></div>
<div class="edit-section">
<li>
<div class="table-edit">
Table:<input
class="table-id"
ondrop="drop(event)"
type="number"
value=""
/>
</div>
</li>
<li>
Width:
<div
class="btn-group"
role="group"
aria-label="Third group"
>
<button
type="button"
class="btn btn-secondary"
onclick="increasewidth()"
>
+
</button>
</div>
<div
class="btn-group"
role="group"
aria-label="Third group"
>
<button
type="button"
class="btn btn-secondary"
onclick="decreasewidth()"
>
-
</button>
</div>
</li>
<li>
Height:
<div
class="btn-group"
role="group"
aria-label="Third group"
>
<button
type="button"
class="btn btn-secondary"
onclick="increaseheight()"
>
+
</button>
</div>
<div
class="btn-group"
role="group"
aria-label="Third group"
>
<button
type="button"
class="btn btn-secondary"
onclick="decreaseheight()"
>
-
</button>
</div>
</li>
</div>
</div>
</div>
</div>
</table>
</div>
</div>
</div>
<!-- /.box-body -->
</form>
</div>
<!-- /. box -->
</div>
<!-- /.col -->
</div>
<!-- /.row -->
</section>
</div>
</div>
styling in addition to bootstrap formats
.table-area-section li {
display: inline-block;
padding: 8px;
}
.drag-section {
height: 386.5px;
}
.edit-section {
padding-top: 20px;
}
.edit-section li {
list-style: none;
display: inline-block;
padding-left: 15px;
}
.input-group {
width: 35px;
}
.table-id {
width: 40px;
}
.draggable-shapes {
border: 1px solid #c3ccff44;
height: 677px;
}
.drag-and-drop {
border: 1px solid #c3ccff44;
}
.table-services > tbody > tr > td,
.table-services > tbody > tr > th,
.table-services > tfoot > tr > td,
.table-services > tfoot > tr > th,
.table-services > thead > tr > td,
.table-services > thead > tr > th {
padding: 20px;
}
.form-table {
float: right;
padding: 20px;
}
.circle {
background: rgb(168, 168, 168);
border-radius: 50%;
border: rgb(168, 168, 168) 6px solid;
width: 80px;
height: 80px;
}
.rectangle {
height: 80px;
background: rgb(168, 168, 168);
text-align: center;
border-radius: 7%;
width: 80px;
border: rgb(168, 168, 168) 6px solid;
}
also if there is a way to change the shapes of different shapes on selecting them, I would be happy to receive some idea o how to accomplish that
I have simplified the code quite a bit, but hopefully this does what you are looking for.
I assume that by id's of the shapes, you mean the number at the end of the id attribute of the shape? You could parse this out using a regex, but I have went down the simpler solution of storing this number in a data attribute.
function dragover(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("id", ev.target.dataset.id);
}
function drop(ev) {
ev.preventDefault();
var id = parseInt(ev.dataTransfer.getData("id"), 10);
inputField.value = id;
}
.shapes {
display: flex;
}
.circle {
background: rgb(168, 168, 168);
border-radius: 50%;
border: rgb(168, 168, 168) 6px solid;
width: 80px;
height: 80px;
margin: 10px;
}
.rectangle {
margin: 10px;
height: 80px;
background: rgb(168, 168, 168);
text-align: center;
border-radius: 7%;
width: 80px;
border: rgb(168, 168, 168) 6px solid;
}
.drop-area {
padding: 50px;
border: dotted 2px dimgrey;
margin: 10px;
text-align: center;
font-style: italic;
color: grey;
}
.input {
margin: 10px;
}
<div class="shapes">
<div class="circle" id="drag1" data-id="1" draggable="true" ondragstart="drag(event)"></div>
<div class="rectangle" id="drag3" data-id="3" draggable="true" ondragstart="drag(event)"></div>
</div>
<div class="drop-area" ondragover="dragover(event)" ondrop="drop(event)">
drop zone
</div>
<input id="inputField" class="input" type="number" value="0" />

ShuffleJS can't get started

I couldn't find any up-to-date example project or guide for this library and what I have done so far (which doesn't work) is here: https://jsfiddle.net/k3g5xtyh/ Am I missing anything? Thanks in advance.
var Shuffle = window.shuffle;
var element = document.getElementById('grid');
var sizer = element.querySelector('.my-sizer-element');
var shuffle = new Shuffle(element, {
itemSelector: '.picture-item',
sizer: sizer // could also be a selector: '.my-sizer-element'
});
Let code it in the simplest possible way. Feel free to toggle show code snippet than execute script by running Run code snippet
var Shuffle = window.shuffle;
var element = document.getElementById('grid');
var shuffle = new Shuffle(element, {
itemSelector: '.picture-item'
});
addFilterButtons()
function addFilterButtons() {
var options = document.querySelector('.filter-options');
if (!options) {
return;
}
var filterButtons = Array.prototype.slice.call(
options.children
);
filterButtons.forEach(function(button) {
button.addEventListener('click', handleFilterClick.bind(this), false);
});
};
function handleFilterClick(evt) {
var btn = evt.currentTarget;
var isActive = btn.classList.contains('active');
var btnGroup = btn.getAttribute('data-group');
var filterGroup;
removeActiveClassFromChildren(btn.parentNode)
if (isActive) {
btn.classList.remove('active');
filterGroup = Shuffle.ALL_ITEMS;
} else {
btn.classList.add('active');
filterGroup = btnGroup;
}
shuffle.filter(filterGroup);
};
function removeActiveClassFromChildren(parent) {
var children = parent.children;
for (var i = children.length - 1; i >= 0; i--) {
children[i].classList.remove('active');
}
};
.aspect {
position: relative;
width: 100%;
height: 0;
padding-bottom: 100%;
overflow: hidden;
}
.aspect__inner {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.aspect--16x9 {
padding-bottom: 42%;
}
.picture-item {
height: 100px
}
.picture-item__inner {
position: relative;
height: 100%;
overflow: hidden;
background: #dac;
}
.col-3\#sm {
width: 33%;
padding-left: 8px;
padding-right: 8px;
min-height: 1px;
box-sizing: border-box;
}
.col-6\#sm {
width: 60%;
padding-left: 8px;
padding-right: 8px;
min-height: 1px;
box-sizing: border-box;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Shuffle/4.0.2/shuffle.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-6#sm">
<div class="filter-options btn-group">
<button class="btn" data-group="photography">Photography</button>
<button class="btn" data-group="wallpaper">Wallpaper</button>
<button class="btn" data-group="3d">3D</button>
</div>
</div>
</div>
<div id="grid" class="row my-shuffle-container">
<figure class="col-3#sm picture-item" data-groups='["photography"]' data-date-created="2010-09-14" data-title="Baseball">
<div class="picture-item__inner">
<div class="aspect aspect--16x9">
<div class="aspect__inner">
<img src="https://pbs.twimg.com/profile_images/2311298181/80d154u80lijwyufmcb6.png" alt="" height="145" width="230">
</div>
</div>
<figcaption>Baseball, [photography]</figcaption>
</div>
</figure>
<figure class="col-3#sm picture-item" data-groups='["wallpaper","3d"]' data-date-created="2011-08-14" data-title="Tennis">
<div class="picture-item__inner">
<div class="aspect aspect--16x9">
<div class="aspect__inner">
<img src="https://pbs.twimg.com/profile_images/2311298181/80d154u80lijwyufmcb6.png" alt="" height="145" width="230">
</div>
</div>
<figcaption>Tennis, [wallpaper, 3d]</figcaption>
</div>
</figure>
<figure class="col-3#sm picture-item" data-groups='["wallpaper","3d"]' data-date-created="2009-05-27" data-title="iMac">
<div class="picture-item__inner">
<div class="aspect aspect--16x9">
<div class="aspect__inner">
<img src="https://pbs.twimg.com/profile_images/2311298181/80d154u80lijwyufmcb6.png" alt="" height="145" width="230">
</div>
</div>
<figcaption>iMac, [wallpaper, 3d]</figcaption>
</div>
</figure>
</div>
</div>

Coin Flip HTML / Javascript | (Help)

I've tried to make my code work with the example below but after multiple hours of trying I'm giving up... Could someone please help me put this all together so it will work fine?
var result,userchoice;
function resetAll(){
var resetHTML = '<div class="tail"><img src="coin_F.png" /></div><div class="head"><img src="coin_G.png" /></div>';
setTimeout(function(){
$('.coinBox').fadeOut('slow',function(){
$(this).html(resetHTML)
}).fadeIn('slow',function(){
$('#btnFlip').removeAttr('disabled');
});
},2500);
}
// Checking User Input
$(document).on('change','#userChoice', function(){
userchoice = $(this).val();
if(userchoice == "") {
$(this).parent('p').prepend("<span class='text text-danger'>Please select a coin side to play the game</span>")
$('#btnFlip').attr('disabled','disabled');
} else {
/**/
$('#btnFlip').removeAttr('disabled');
$(this).siblings('span').empty();
}
return userchoice;
});
// Final result declaration
function finalResult(result,userchoice){
var resFormat = '<h3>';
resFormat += '<span class="text text-primary">You choose : <u>'+userchoice+'</u></span> |';
resFormat += '<span class="text text-danger"> Result : <u>'+result+'</u></span>';
resFormat += '</h3>';
var winr = '<h2 class="text text-success" style="color: #49DF3E;">You Won!!</h2>';
var losr = '<h2 class="text text-danger" style="color: #c34f4f;">You Lost...</h2>';
if(result == userchoice){
$('.coinBox').append(resFormat+winr)
} else{
$('.coinBox').append(resFormat+losr)
}
}
// Button Click Actions
$(document).on('click','#btnFlip',function() {
if($('#userChoice').val() == "") return;
var flipr = $('.coinBox>div').addClass('flip');
var number = Math.floor(Math.random()*2);
$(this).attr('disabled','disabled');
setTimeout(function() {
flipr.removeClass('flip');
//result time
if(number) {
result = 'Global';
//alert('Head = '+number);
$('.coinBox').html('<img src="coin_G.png" /><h3 class="text-primary">Global</h3>');
finalResult(result,userchoice);
resetAll();
} else {
result = 'Fortune';
//alert('Tail = '+number);
$('.coinBox').html('<img src="coin_F.png" /><h3 class="text-primary">Fortune</h3>');
finalResult(result,userchoice);
resetAll();
}
},2000);
return false;
});
#wrapper
{
width: 100%;
height: auto;
min-height: 500px;
}
.btn
{
width: 12%;
background-color: #c34f4f;
color: white;
padding: 14px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 22px;
}
.btn:hover
{
background-color: #A64242;
}
input[type=submit]:hover {
background-color: #A64242;
}
.container
{
padding: 50px 0;
text-align: center;
}
h1
{
margin-bottom: 100px;
}
.head
{
margin-top: -205px;
}
.flip img{animation: flipIt 0.5s linear infinite;}
.head img
{
animation-delay: 0.25s;
}
#keyframes flipIt
{
0%{width: 0px;
height: 200px;}
25%{width: 200px;
height: 200px;}
50%{width: 0px;
height: 200px;}
100%{width: 0px;
height: 200px;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>Coin Flip | <span>Global or Fortune</span></h1>
</div>
<div class="col-lg-12">
<!--blank-->
<div class="col-lg-4"></div>
<!--coin-->
<div class="col-lg-4">
<div class="coinBox">
<div class="tail">
<img src="coin_F.png" />
</div>
<div class="head">
<img src="coin_G.png" />
</div>
</div>
</div>
<!--user form elements-->
<div class="col-lg-4 text-left">
<p>
<div class="form-control">
<button name="Global" id="userChoice">Global</button>
<button name="Fortune" id="userChoice">Fortune</button>
</div>
<p>
<button class="btn btn-lg btn-primary" id="btnFlip" disabled>Flip It</button>
</p>
</div>
</div>
</div>
</div>
</div>
I tried to use this example but couldn't get it to work: https://jsfiddle.net/8jw1ogLd/
I have changed your fiddle:
https://jsfiddle.net/8jw1ogLd/6/
The only change is this:
$(this).addClass("disabled");
on 25-th line. Is this answer solves your problem?
Edit:
This is the fixed jsfiddle with your code:
https://jsfiddle.net/45t3th0n/34/

Categories

Resources