Draggable Widgets not overlapping - javascript

I am having issues with configuring my CSS to work accordingly with the JavaScript for the draggable widgets.
For example per testing, when placing a 2x2 widget inside of the dropzone, the 1x2 widget drops down (outside of the dropzone) instead of overlapping.
Placing a dropzone highlight for the 2x2 widget is also outside of the dropzone.
As for the 1x1 widgets, a CSS code that will work accordingly has not been made.
var sizeOfOptions = 0;
function onDragStart2x4(event) {
event
.dataTransfer
.setData('text/plain', event.target.id);
if (sizeOfOptions <= 0) {
document.getElementsByClassName("s2x4")[0].hidden = false;
document.getElementsByClassName("s2x4")[0].style.borderColor = "black";
}
}
function onDragStart2x2(event) {
event
.dataTransfer
.setData('text/plain', event.target.id);
if (sizeOfOptions <= 4) {
if (document.getElementById("s1x2topleft").innerHTML == "" &&
document.getElementById("s1x2botleft").innerHTML == "") {
document.getElementById("s2x2left").hidden = false;
}
if (document.getElementById("s1x2topright").innerHTML == "" &&
document.getElementById("s1x2botright").innerHTML == "") {
document.getElementById("s2x2right").hidden = false;
}
}
}
function onDragStart1x2(event) {
event
.dataTransfer
.setData('text/plain', event.target.id);
if (sizeOfOptions <= 6) {
if (document.getElementById("s2x2left").innerHTML === "") {
document.getElementById("s1x2topleft").style.visibility = "visible";
document.getElementById("s1x2botleft").style.visibility = "visible";
}
if (document.getElementById("s2x2right").innerHTML === "") {
document.getElementById("s1x2topright").style.visibility = "visible";
document.getElementById("s1x2botright").style.visibility = "visible";
}
}
}
function onDragStart1x1(event) {
event
.dataTransfer
.setData('text/plain', event.target.id);
if (sizeOfOptions <= 7) {
if (document.getElementById("s2x2left").innerHTML === "") {
if (document.getElementById("s1x2topleft").innerHTML == "") {
document.getElementById("s1x1topleft").style.visibility = "visible";
document.getElementById("s1x1topmidleft").style.visibility = "visible";
}
if (document.getElementById("s1x2botleft").innerHTML == "") {
document.getElementById("s1x1botmidleft").style.visibility = "visible";
document.getElementById("s1x1botleft").style.visibility = "visible";
}
} {
if (document.getElementById("s2x2right").innerHTML === "") {
if (document.getElementById("s1x2topright").innerHTML == "") {
document.getElementById("s1x1topright").style.visibility = "visible";
document.getElementById("s1x1topmidright").style.visibility = "visible";
}
if (document.getElementById("s1x2botright").innerHTML == "") {
document.getElementById("s1x1botmidright").style.visibility = "visible";
document.getElementById("s1x1botright").style.visibility = "visible";
}
}
}
}
}
function onDragOver(event) {
event.preventDefault();
}
function onDragEnd2x4(event) { // expresion? === if(expresion), after ? === then, after : === else
document.getElementsByClassName("s2x4")[0].innerHTML == "" ?
document.getElementsByClassName("s2x4")[0].hidden = true :
document.getElementsByClassName("s2x4")[0].hidden = false;
}
function onDragEnd2x2(event) {
let divs = document.getElementsByClassName("s2x2");
if (divs[0].innerHTML == "") {
divs[0].hidden = true;
}
if (divs[1].innerHTML == "") {
divs[1].hidden = true;
}
}
function onDragEnd1x2(event) {
let divs = document.getElementsByClassName("s1x2");
if (divs[0].innerHTML == "") {
divs[0].style.visibility = "hidden";
}
if (divs[1].innerHTML == "") {
divs[1].style.visibility = "hidden";
}
if (divs[2].innerHTML == "") {
divs[2].style.visibility = "hidden";
}
if (divs[3].innerHTML == "") {
divs[3].style.visibility = "hidden";
}
}
function onDragEnd1x1(event) {
let divs = document.getElementsByClassName("s1x1");
if (divs[0].innerHTML == "") {
divs[0].style.visibility = "hidden";
}
if (divs[1].innerHTML == "") {
divs[1].style.visibility = "hidden";
}
if (divs[2].innerHTML == "") {
divs[2].style.visibility = "hidden";
}
if (divs[3].innerHTML == "") {
divs[3].style.visibility = "hidden";
}
if (divs[4].innerHTML == "") {
divs[4].style.visibility = "hidden";
}
if (divs[5].innerHTML == "") {
divs[5].style.visibility = "hidden";
}
if (divs[6].innerHTML == "") {
divs[6].style.visibility = "hidden";
}
if (divs[7].innerHTML == "") {
divs[7].style.visibility = "hidden";
}
}
function onDrop2x4(event) {
console.log("Drop options = ", sizeOfOptions);
const id = event
.dataTransfer
.getData('text');
const draggableElement = document.getElementById(id);
if (draggableElement.classList.contains("widget-2x4") && sizeOfOptions <= 0) {
draggableElement.classList.add("size2x4");
const dropzone = event.target;
if (dropzone.innerHTML == "") {
sizeOfOptions += 8;
dropzone.appendChild(draggableElement);;
console.log(dropzone.innerHTML)
event.dataTransfer.clearData();
} else
alert("Each dropzone can only contain 1 widget.");
}
}
function onDrop2x2(event) {
console.log("Drop options = ", sizeOfOptions);
const id = event
.dataTransfer
.getData('text');
const draggableElement = document.getElementById(id);
if (draggableElement.classList.contains("widget-2x2") && sizeOfOptions <= 4) {
draggableElement.classList.add("size2x2");
const dropzone = event.target;
if (dropzone.innerHTML == "") {
sizeOfOptions += 4;
dropzone.appendChild(draggableElement);;
console.log(dropzone.innerHTML)
event.dataTransfer.clearData();
} else
alert("Each dropzone can only contain 1 widget.");
}
}
function onDrop1x2(event) {
console.log("Drop options = ", sizeOfOptions);
const id = event
.dataTransfer
.getData('text');
const draggableElement = document.getElementById(id);
if (draggableElement.classList.contains("widget-1x2") && sizeOfOptions <= 6) {
draggableElement.classList.add("size1x2");
const dropzone = event.target;
if (dropzone.innerHTML == "") {
sizeOfOptions += 2;
dropzone.appendChild(draggableElement);;
console.log(dropzone.innerHTML)
event.dataTransfer.clearData();
} else
alert("Each dropzone can only contain 1 widget.");
}
}
function onDrop1x1(event) {
console.log("Drop options = ", sizeOfOptions);
const id = event
.dataTransfer
.getData('text');
const draggableElement = document.getElementById(id);
if (draggableElement.classList.contains("widget-1x1") && sizeOfOptions <= 7) {
draggableElement.classList.add("size1x1");
const dropzone = event.target;
if (dropzone.innerHTML == "") {
sizeOfOptions += 1;
dropzone.appendChild(draggableElement);;
console.log(dropzone.innerHTML)
event.dataTransfer.clearData();
} else
alert("Each dropzone can only contain 1 widget.");
}
}
.draggable-widgets {
width: 800px;
height: 100px;
margin: auto;
margin-bottom: 40px;
overflow: auto;
white-space: nowrap;
}
.draggable-widgets ul {
margin: auto;
}
.draggable-widgets li {
display: inline-block;
}
.dropzone {
height: 320px;
width: 800px;
}
.divclass {
background-color: mediumpurple;
width: 800px;
height: 320px;
border: 1px black solid;
}
.widget-2x4 {
width: 70px;
height: 70px;
background-color: mediumpurple;
border: 5px black solid;
}
.widget-2x2 {
width: 70px;
height: 70px;
background-color: mediumpurple;
border: 5px black solid;
}
.widget-1x2 {
width: 70px;
height: 70px;
background-color: mediumpurple;
border: 5px black solid;
}
.widget-1x1 {
width: 70px;
height: 70px;
background-color: mediumpurple;
border: 5px black solid;
}
.box2 {
width: 190px;
height: 150px;
}
.box3 {
width: 800px;
height: 320px;
background-color: white;
}
.s2x4 {
position: relative;
margin: 10px;
border: 1px black solid;
width: 780px;
height: 300px;
}
.size2x4 {
position: relative;
background-color: mediumpurple;
border: 1px black solid;
width: 780px;
height: 300px;
}
#s2x2left {
margin: 10px;
border: 1px black solid;
width: 380px;
height: 300px;
}
#s2x2right {
margin: 10px;
border: 1px black solid;
width: 380px;
height: 300px;
}
.size2x2 {
background-color: mediumpurple;
border: 1px black solid;
width: 380px;
height: 300px;
float: left;
}
#s1x2topleft {
display: inline-block;
visibility: hidden;
border: 1px black solid;
margin: 10px;
width: 380px;
height: 140px;
}
#s1x2topright {
display: inline-block;
position: relative;
visibility: hidden;
border: 1px black solid;
margin: 10px;
width: 380px;
height: 140px;
left: 395px;
bottom: 164px;
}
#s1x2botleft {
display: inline-block;
position: relative;
visibility: hidden;
border: 1px black solid;
margin: 10px;
width: 380px;
height: 140px;
bottom: 170px;
}
#s1x2botright {
display: inline-block;
position: relative;
visibility: hidden;
border: 1px black solid;
margin: 10px;
width: 380px;
height: 140px;
bottom: 334px;
left: 395px;
}
.size1x2 {
background-color: mediumpurple;
border: 1px black solid;
width: 380px;
height: 140px;
}
#s1x1topleft {
display: inline-block;
border: 1px black solid;
width: 40px;
height: 40px;
visibility: hidden;
}
#s1x1topmidleft {
display: inline-block;
border: 1px black solid;
width: 40px;
height: 40px;
visibility: hidden;
}
#s1x1topmidright {
display: inline-block;
border: 1px black solid;
width: 40px;
height: 40px;
visibility: hidden;
}
#s1x1topright {
display: inline-block;
border: 1px black solid;
width: 40px;
height: 40px;
visibility: hidden;
}
#s1x1botleft {
display: inline-block;
border: 1px black solid;
width: 40px;
height: 40px;
visibility: hidden;
}
#s1x1botmidleft {
display: inline-block;
border: 1px black solid;
width: 40px;
height: 40px;
visibility: hidden;
}
#s1x1botmidright {
display: inline-block;
border: 1px black solid;
width: 40px;
height: 40px;
visibility: hidden;
}
#s1x1botright {
display: inline-block;
border: 1px black solid;
width: 40px;
height: 40px;
visibility: hidden;
}
.size1x1 {
background-color: mediumpurple;
border: 1px black solid;
width: 40px;
height: 40px;
}
<html>
<head>
<link rel="stylesheet" href="widgets.css">
<script src="config.js"></script>
</head>
<body>
<div class="draggable-widgets">
<!--Widgets Start Here-->
<ul>
<li>
<div id="box2" class="widget-2x4" ondragend="onDragEnd2x4(event)" draggable="true" ondragstart="onDragStart2x4(event);">
<p>2x4</p>
</div>
</li>
<li>
<div id="box1" class="widget-2x2" ondragend="onDragEnd2x2(event)" draggable="true" ondragstart="onDragStart2x2(event);">
<p>2x2</p>
</div>
</li>
<li>
<div id="box1" class="widget-2x2" ondragend="onDragEnd2x2(event)" draggable="true" ondragstart="onDragStart2x2(event);">
<p>2x2</p>
</div>
</li>
<li>
<div id="box4" class="widget-1x2" ondragend="onDragEnd1x2(event)" draggable="true" ondragstart="onDragStart1x2(event);">
<p>1x2</p>
</div>
</li>
<li>
<div id="box4" class="widget-1x2" ondragend="onDragEnd1x2(event)" draggable="true" ondragstart="onDragStart1x2(event);">
<p>1x2</p>
</div>
</li>
<li>
<div id="box4" class="widget-1x2" ondragend="onDragEnd1x2(event)" draggable="true" ondragstart="onDragStart1x2(event);">
<p>1x2</p>
</div>
</li>
<li>
<div id="box4" class="widget-1x2" ondragend="onDragEnd1x2(event)" draggable="true" ondragstart="onDragStart1x2(event);">
<p>1x2</p>
</div>
</li>
<li>
<div id="box5" class="widget-1x1" ondragend="onDragEnd1x1(event)" draggable="true" ondragstart="onDragStart1x1(event);">
<p>1x1</p>
</div>
</li>
<li>
<div id="box5" class="widget-1x1" ondragend="onDragEnd1x1(event)" draggable="true" ondragstart="onDragStart1x1(event);">
<p>1x1</p>
</div>
</li>
<li>
<div id="box5" class="widget-1x1" ondragend="onDragEnd1x1(event)" draggable="true" ondragstart="onDragStart1x1(event);">
<p>1x1</p>
</div>
</li>
<li>
<div id="box5" class="widget-1x1" ondragend="onDragEnd1x1(event)" draggable="true" ondragstart="onDragStart1x1(event);">
<p>1x1</p>
</div>
</li>
<li>
<div id="box5" class="widget-1x1" ondragend="onDragEnd1x1(event)" draggable="true" ondragstart="onDragStart1x1(event);">
<p>1x1</p>
</div>
</li>
<li>
<div id="box5" class="widget-1x1" ondragend="onDragEnd1x1(event)" draggable="true" ondragstart="onDragStart1x1(event);">
<p>1x1</p>
</div>
</li>
<li>
<div id="box5" class="widget-1x1" ondragend="onDragEnd1x1(event)" draggable="true" ondragstart="onDragStart1x1(event);">
<p>1x1</p>
</div>
</li>
<li>
<div id="box5" class="widget-1x1" ondragend="onDragEnd1x1(event)" draggable="true" ondragstart="onDragStart1x1(event);">
<p>1x1</p>
</div>
</li>
</ul>
</div>
<div id="box3" class="divclass box3">
<div id="dropzone-1" class="dropzone">
<!--2x4 START-->
<div class="s2x4" ondragover="onDragOver(event)" ondrop="onDrop2x4(event);" hidden="true"></div>
<!--2x4 END-->
<!--2x2 START-->
<div id="s2x2left" class="s2x2" ondragover="onDragOver(event)" ondrop="onDrop2x2(event);" hidden="true"></div>
<div id="s2x2right" class="s2x2" ondragover="onDragOver(event)" ondrop="onDrop2x2(event);" hidden="true"></div>
<!--2x2 END-->
<!--1x2 START-->
<div id="s1x2topleft" class="s1x2" ondragover="onDragOver(event)" ondrop="onDrop1x2(event);" hidden="true"></div>
<div id="s1x2topright" class="s1x2" ondragover="onDragOver(event)" ondrop="onDrop1x2(event);" hidden="true"></div>
<div id="s1x2botleft" class="s1x2" ondragover="onDragOver(event)" ondrop="onDrop1x2(event);" hidden="true"></div>
<div id="s1x2botright" class="s1x2" ondragover="onDragOver(event)" ondrop="onDrop1x2(event);" hidden="true"></div>
<!--1x2 END-->
<!--1x1 START-->
<div id="s1x1topmidleft" class="s1x1" ondragover="onDragOver(event)" ondrop="onDrop1x1(event);" hidden="true"></div>
<div id="s1x1topmidright" class="s1x1" ondragover="onDragOver(event)" ondrop="onDrop1x1(event);" hidden="true"></div>
<div id="s1x1topleft" class="s1x1" ondragover="onDragOver(event)" ondrop="onDrop1x1(event);" hidden="true"></div>
<div id="s1x1topright" class="s1x1" ondragover="onDragOver(event)" ondrop="onDrop1x1(event);" hidden="true"></div>
<div id="s1x1botleft" class="s1x1" ondragover="onDragOver(event)" ondrop="onDrop1x1(event);" hidden="true"></div>
<div id="s1x1botmidleft" class="s1x1" ondragover="onDragOver(event)" ondrop="onDrop1x1(event);" hidden="true"></div>
<div id="s1x1botmidright" class="s1x1" ondragover="onDragOver(event)" ondrop="onDrop1x1(event);" hidden="true"></div>
<div id="s1x1botright" class="s1x1" ondragover="onDragOver(event)" ondrop="onDrop1x1(event);" hidden="true"></div>
<!--1x1 END-->
</div>
</body>
</html>

Related

How do I make a circular effect with the left and right arrows?

Here's my code in CodePen:
https://codepen.io/Krzysiek_39/pen/poNLbgx
This can probably be done with property border-radius: 50%;.
This is to look like on this website:
https://www.studiointerbit.pl/kontakt/
How do I make a circular effect with the left and right arrows?
I will be very grateful for effective help.
<div class="text">
<a class="refresh" title="A website refresh">Website</a>
</div>
<div class="menu">
<a>MENU</a>
</div>
<div class="slider_wrapper">
<div class="slider">
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?art" alt=""><span class="caption">Caption for slide 1</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?action" alt=""><span class="caption">Caption for slide 2</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?war" alt=""><span class="caption">Caption for slide 3</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?crime" alt=""><span class="caption">Caption for slide 4</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?drama" alt=""><span class="caption">Caption for slide 5</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?sci-fi" alt=""><span class="caption">Caption for slide 6</span>
</div>
</div>
<div class="slider_objects">
<div class="slider_btn prev_btn"><i class="fas fa-chevron-left fa-2x"></i></div>
<div class="slider_btn next_btn"><i class="fas fa-chevron-right fa-2x"></i></div>
<ul class="slider_list_wrapper">
<li class="slider_list active_slide"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
</ul>
</div>
</div>

You can use ::before selector, and style it accordingly, as per the needs.
$(document).ready(function() {
$('.refresh').click(function(e) {
location.reload();
});
});
//-----------------------------------------
var active_img_num = 0;
var slide_interval_time = 5;
var slide_during_time = 2;
var slide_fast_during_time = 2;
var slide_timer;
var num_of_img = 1;
var num_of_img_tag = 1;
var sliding_now = false;
$
(
function() {
var div_tag, a_tag, img, cap;
num_of_img_tag = $(".slider_img_wrapper").length
num_of_img = $(".slider_img_wrapper img").length;
active_img_num = adjust_img_num(active_img_num)["img_tags"];
for (var i = 0; i < num_of_img_tag; i++) {
$(".slider_img_wrapper").eq(adjust_img_num(active_img_num + (Math.pow(-1, i + 1)) * Math.ceil(i / 2))["img_tags"]).css("opacity", 1);
$(".slider_img_wrapper").eq(adjust_img_num(active_img_num + (Math.pow(-1, i + 1)) * Math.ceil(i / 2))["img_tags"]).css("transform", "translateX(" + (100 * Math.pow(-1, i + 1) * Math.ceil(i / 2)) + "%)");
}
next_img_num = adjust_img_num(active_img_num + 1)["img_tags"];
slide_timer = setInterval(slide, slide_interval_time * 1000);
$(".slider_list_wrapper li").removeClass("active_slide");
$(".slider_list_wrapper li").eq(active_img_num).addClass("active_slide");
$(".slider_list").css("transition", slide_during_time + "s");
}
);
function adjust_img_num(img_num) {
var result = [];
if (!$.isNumeric(img_num)) {
result["images"] = 0;
result["img_tags"] = 0;
} else if (img_num < 0) {
result["images"] = (num_of_img + (img_num % num_of_img)) % num_of_img;
result["img_tags"] = (num_of_img_tag + (img_num % num_of_img_tag)) % num_of_img_tag;
} else {
result["images"] = img_num % num_of_img;
result["img_tags"] = img_num % num_of_img_tag;
}
return result;
}
function search_direction(now_positon = 0, goal_position = 0) {
var i = 0;
while (true) {
if ((goal_position % num_of_img) == adjust_img_num(now_positon + i)["images"]) {
return {
"plus": true,
"target_num": adjust_img_num(now_positon + i)["img_tags"],
"move_value": i
};
} else if ((goal_position % num_of_img) == adjust_img_num(now_positon - i)["images"]) {
return {
"plus": false,
"target_num": adjust_img_num(now_positon - i)["img_tags"],
"move_value": -i
};
}
i++;
}
}
function slide(next_img = next_img_num, duration = slide_during_time, easing = "easeInOutCubic") {
$
(
function() {
next_img = adjust_img_num(next_img)["img_tags"];
if (sliding_now) {
return;
} else {
sliding_now = true;
}
var target_img_info = search_direction(active_img_num, next_img);
if (Math.abs(target_img_info["move_value"]) >= 2) {
move_images(active_img_num + (target_img_info["plus"] ? 1 : -1), next_img, slide_fast_during_time, "linear");
} else {
move_images(next_img, next_img, duration, easing);
}
function move_images(next_img, target_img = next_img, duration = slide_during_time, easing = "swing") {
var translateX_matrix = [];
$(".slider_img_wrapper").css("transition", duration + "s");
for (var i = 0; i < num_of_img_tag; i++) {
translateX_matrix = $(".slider_img_wrapper").eq(i).css("transform").slice(7, -1).split(",");
translateX_matrix[4] = parseInt(translateX_matrix[4]) - (target_img_info["move_value"]) * parseInt($(".slider_img_wrapper").css("width"));
$(".slider_img_wrapper").eq(i).css("transform", "matrix(" + translateX_matrix.join(",") + ")").css("left", "0%");
}
$(".slider_list_wrapper li").removeClass("active_slide");
$(".slider_list_wrapper li").eq(target_img % num_of_img).addClass("active_slide");
setTimeout
(
function() {
active_img_num = adjust_img_num(target_img)["img_tags"];
next_img_num = adjust_img_num(target_img + 1)["img_tags"];
$(".slider_img_wrapper").css("transition", "0s");
for (var i = 0; i < num_of_img_tag; i++) {
$(".slider_img_wrapper").eq(adjust_img_num(active_img_num + Math.pow(-1, i + 1) * Math.ceil(i / 2))["img_tags"]).css("opacity", 1);
$(".slider_img_wrapper").eq(adjust_img_num(active_img_num + Math.pow(-1, i + 1) * Math.ceil(i / 2))["img_tags"]).css("transform", "translateX(" + (100 * Math.pow(-1, i + 1) * Math.ceil(i / 2)) + "%)");
}
sliding_now = false;
},
duration * 1000
);
clearInterval(slide_timer);
slide_timer = setInterval(slide, slide_interval_time * 1000);
}
}
);
}
$(".slider_objects").on(
"click touchend",
".prev_btn",
function() {
clearInterval(slide_timer);
slide_timer = setInterval(slide, slide_interval_time * 1000);
slide(adjust_img_num(active_img_num - 1)["img_tags"]);
}
);
$(".slider_objects").on(
"click touchend",
".next_btn",
function() {
clearInterval(slide_timer);
slide_timer = setInterval(slide, slide_interval_time * 1000);
slide(adjust_img_num(active_img_num + 1)["img_tags"]);
}
);
$(document).on(
"click touchend",
".slider_list",
function() {
var clicked_num = $(".slider_list").index(this);
clicked_num = search_direction(active_img_num, clicked_num)["target_num"];
slide(clicked_num);
}
);
document.addEventListener(
'touchstart',
function(event) {
if (sliding_now) {
return;
}
event.preventDefault();
touch_x1 = event.changedTouches[0].pageX;
move_x_percent = 0;
clearInterval(slide_timer);
}, {
passive: false
}
);
document.addEventListener(
'touchmove',
function(event) {
if (sliding_now) {
return;
}
event.preventDefault();
touch_x2 = event.changedTouches[0].pageX;
move_x_percent = (touch_x1 - touch_x2) / window.innerWidth * 100;
if (false) {
$(".slider_img_wrapper").eq(adjust_img_num(active_img_num - 1)["img_tags"]).css("left", (-move_x_percent - 100) + "%");
$(".slider_img_wrapper").eq(active_img_num).css("left", (-move_x_percent) + "%");
$(".slider_img_wrapper").eq(adjust_img_num(active_img_num + 1)["img_tags"]).css("left", (-move_x_percent + 100) + "%");
}
for (var i = 0; i < num_of_img_tag; i++) {
$(".slider_img_wrapper").css("left", (-move_x_percent) + "%");
}
if (Math.abs(move_x_percent) >= 75) {
if (touch_x1 - touch_x2 > 0) {
slide(active_img_num + 1, slide_fast_during_time, "easeOutQuart");
} else {
slide(active_img_num - 1, slide_fast_during_time, "easeOutQuart");
}
touch_x1 = touch_x2;
}
}, {
passive: false
}
);
document.addEventListener(
'touchend',
function(event) {
if (sliding_now) {
return;
}
event.preventDefault();
touch_x3 = event.changedTouches[0].pageX;
if (Math.abs(move_x_percent) > 30) {
if (touch_x1 - touch_x2 > 0) {
slide(active_img_num + 1, slide_fast_during_time, "easeOutQuart");
} else {
slide(active_img_num - 1, slide_fast_during_time, "easeOutQuart");
}
} else {
slide(active_img_num, slide_fast_during_time, "easeOutQuart");
}
move_x_percent = 0;
}, {
passive: false
}
);
//-----------------------------------------
$(document).ready(function() {
var NavY = $('.menu-container').offset().top;
var stickyNav = function() {
var ScrollY = $(window).scrollTop();
if (ScrollY > NavY) {
$('.menu').addClass('sticky');
} else {
$('.menu').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
body {
background-color: #bdbdbd;
font-family: Verdana;
margin: 0;
position: relative;
height: 220vh;
z-index: -100;
}
.header-container {
background-color: #01579b;
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 100%;
height: 20vh;
z-index: 4;
}
.header {
background-color: #191919;
position: absolute;
left: 5%;
margin-top: 20px;
}
.header .text a {
color: #77A0AC;
font-size: 31px;
padding: 0px 15px 0px;
text-decoration: none;
}
.text:hover {
cursor: pointer;
}
.menu-container {
position: absolute;
left: 5%;
right: 5%;
bottom: 0;
width: 90%;
}
.menu {
font-size: 16px;
}
.menu a {
background-color: #660066;
color: #76ff03;
text-align: center;
display: block;
margin: 0;
text-decoration: none;
}
.content {
left: 10%;
top: 15%;
right: 10%;
position: absolute;
}
.box {
background-color: #191919;
width: 100%;
position: absolute;
padding: 15px 15px 15px;
}
.slider_wrapper {
width: 100%;
height: 40vw;
overflow: hidden;
position: relative;
}
.slider {
position: absolute;
width: 100%;
}
.slider div {
overflow: hidden;
position: absolute;
width: 100%;
}
.slider img {
width: 100%;
height: 40vw;
}
.caption {
position: absolute;
bottom: 0;
background: rgba(0, 0, 0, 0.4);
color: #ffffff;
width: 100%;
font-size: 36px;
padding: 1.6rem;
cursor: default;
}
.slider_objects {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor: default;
}
.slider_btn {
pointer-events: auto;
opacity: 0;
}
.slider:hover .slider_objects .slider_btn {
opacity: 1;
}
.slider_btn:hover {
background-color: #000000;
color: lime;
opacity: 1;
}
.slider_wrapper:hover .slider_btn {
opacity: 1 !important;
display: block !important;
}
.slider_btn:hover:after {
display: block;
position: absolute;
border-radius: 50%;
width: 10%;
height: 10%;
background: none !important;
}
.prev_btn,
.next_btn {
width: 10px;
height: 10px;
position: absolute;
top: calc(50% - 25px);
border-radius: 50%;
display: -webkit-flex;
display: -ms-flex;
display: flex;
justify-content: center;
-ms-align-items: center;
align-items: center;
z-index: 2;
background: none !important;
cursor: pointer;
}
.prev_btn::before,
.next_btn::before {
content: "";
background-color: #00000080;
border-radius: 50%;
position: absolute;
inset: 0 0;
z-index: -1;
transform: translate(-27.5%, -20%);
}
.prev_btn:hover::before,
.next_btn:hover::before {
background-color: #000;
}
.prev_btn {
color: #ffffff;
left: 50px;
}
.next_btn {
color: #ffffff;
right: 50px;
}
.slider_img_wrapper>a>img {
cursor: default;
}
.slider_list_wrapper {
width: calc(100% - 40px);
position: absolute;
bottom: 3vw;
display: -webkit-flex;
display: -ms-flex;
display: flex;
justify-content: center;
-ms-align-items: center;
align-items: center;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
list-style-type: none;
}
.slider_list {
width: 15px;
height: 15px;
margin: 5px 10px 0;
background-color: #323232;
border: 2px solid #ffffff;
border-radius: 50%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
box-shadow: 0 0 3px 1px #000000;
cursor: pointer;
pointer-events: auto;
}
.active_slide {
background-color: #ffa500;
}
.sticky {
width: 90%;
position: fixed;
left: 5%;
top: 0;
z-index: 100;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<link rel="stylesheet" href="https://www.jqueryscript.net/css/jquerysctipttop.css">
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/mobile-json-carousel/css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
<body>
<div class="header-container">
<div class="header">
<div class="text">
<a class="refresh" title="A website refresh">Website</a>
</div>
</div>
<div class="menu-container">
<div class="menu">
<a>MENU</a>
</div>
</div>
</div>
<div class="content">
<div class="box">
<div class="slider_wrapper">
<div class="slider">
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?art" alt=""><span class="caption">Caption for slide 1</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?action" alt=""><span class="caption">Caption for slide 2</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?war" alt=""><span class="caption">Caption for slide 3</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?crime" alt=""><span class="caption">Caption for slide 4</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?drama" alt=""><span class="caption">Caption for slide 5</span>
</div>
<div class="slider_img_wrapper">
<img src="https://source.unsplash.com/1600x900/?sci-fi" alt=""><span class="caption">Caption for slide 6</span>
</div>
</div>
<div class="slider_objects">
<div class="slider_btn prev_btn"><i class="fas fa-chevron-left fa-2x"></i></div>
<div class="slider_btn next_btn"><i class="fas fa-chevron-right fa-2x"></i></div>
<ul class="slider_list_wrapper">
<li class="slider_list active_slide"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
<li class="slider_list"></li>
</ul>
</div>
</div>
</div>
</div>
</body>

I have flexbox layout onclick i want to replace some images with one bigger

Onclick I want to change first image from first element with another which is bigger and takes 3 spaces from flexbox. I tried to do it on my own ,and on click 2 images hide which is ok but I can't make changed image bigger to fit into flexbox.
function changeImage() {
document.getElementById("imgClickAndChange").src = "someimagepath";
var x = document.getElementById("imgClickAndChange1");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
.container1 {
display: flex;
width: 100%;
height: 300px;
}
.container1 div{
color: white;
height: 100%;
}
.sub-wrap {
flex: 0 0 50%;
display: flex;
width: 100%;
flex-wrap: wrap;
}
.sub-wrap div {
height: 50%;
}
.w-25 {
flex: 0 0 25%;
}
.w-small {
flex: 0 0 33%;
}
.w-double {
flex: 0 0 66%;
}
<div class="container1">
<div class="w-25"><img src="image" id="imgClickAndChange" onclick="changeImage()"></img></div>
<div class="sub-wrap">
<div class="w-small"><img src="image"id="imgClickAndChange1"></div>
<div class="w-double"><img src="image" ></div>
<div class="w-small"><img src="image" ></div>
<div class="w-small"><img src="image" ></div>
<div class="w-small"> <img src="image"></div>
</div>
<div class="w-25"> <img src="image"></div>
</div>

it's a example code....
use flex:2 instead of flex: 0 0 50%; to .sub-wrap class and flex:1 to .w-25 class.. for trick..
Array.from(document.querySelectorAll('.img')).forEach(function (el) {
el.addEventListener('click', function (e) {
flexShrink();
e.target.style.flexGrow = '2';
});
});
function flexShrink() {
Array.from(document.querySelectorAll('.img')).forEach(function (el) {
el.style.flexGrow = '1';
});
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
#main {
width: 100%;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
}
.item {
flex-grow: 1;
}
<div id="main">
<div class="item img" style="background-color: lightblue">img</div>
<div class="item" style="background-color: khaki"></div>
<div class="item img" style="background-color: pink">img</div>
</div>

I have created tasks through template literals, and want to drag and drop names to the task i want

`
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Task Manager</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div id="main-container">
<header>
<h1>TASK MANAGER</h1>
<div id="task-value-check" class="value-check"></div>
<div id="member-value-check" class="value-check"></div>
<div id="input">
<div id="task-form">
<form onsubmit="createTask(event)">
<input class="text-input" name="task" type="text" placeholder="Name of
new task">
<input class="button" type="submit" value="ADD"/>
</form>
</div>
<div id="tasks-header" class="header">TASKS</div>
<div id="member-form">
<form onsubmit="createMember(event)">
<input class="text-input" name="teamMember" type="text"
placeholder="Name of new team member">
<input class="button" type="submit" value="ADD"/>
</form>
</div>
<div id="members-header" class="header">TEAM MEMBERS</div>
</div>
</header>
<main>
<div id="assign-value-check" class="value-check"></div>
<div id="assign-form">
<form onsubmit="assignToMember(event)">
<input class="text-input" class="input-txt" id="check-task" type="text"
placeholder="Pick task">
<input type="submit" id="assign-button" value="ASSIGN" class="button"
class="input-submit">
</form>
</div>
<div id="assignments-header" class="header">TASK ASSIGNMENTS</div>
<main>
<div id="listing">
<div id="tasks-rendering" class="rendering"></div>
<div id="members-rendering" class="rendering"></div>
<div id="assignments-rendering" class="rendering"></div>
</div>
</main>
</div>
<script src=index.js></script>
</body>
</html>
function createTask(event) {
event.preventDefault();
let task = document.querySelector("[name='task']").value;
task = task.toLowerCase();
const taskList = JSON.parse(localStorage.getItem('task')) || [];
if (task === "") {
document.getElementById("task-value-check").innerHTML = "PLEASE ENTER A TASK";
} else {
document.getElementById("task-value-check").innerHTML = "";
document.getElementById("member-value-check").innerHTML = "";
const tasks = { task};
taskList.push(tasks);
window.localStorage.setItem('task', JSON.stringify(taskList));
event.target.reset();
renderTaskList();
}
}
function createMember(event) {
event.preventDefault();
let member = document.querySelector("[name='teamMember']").value;
member = member.toLowerCase();
if (member === "") {
document.getElementById("member-value-check").innerHTML = "PLEASE ENTER A TEAM MEMBER";
} else {
document.getElementById("member-value-check").innerHTML = "";
document.getElementById("task-value-check").innerHTML = "";
const members = { member };
const memberList = JSON.parse(localStorage.getItem('member')) || [];
memberList.push(members);
window.localStorage.setItem('member', JSON.stringify(memberList));
event.target.reset();
renderMemberList();
}
}
function assignToMember(event) {
event.preventDefault();
const taskList = JSON.parse(localStorage.getItem('task')) || {};
let nameTask = document.getElementById('check-task').value;
let valueCheck = document.getElementById('assign-value-check');
if (nameTask === "") {
valueCheck.innerHTML = "PLEASE ENTER A TASK AND A TEAM MEMBER";
} else if (nameTask === "") {
valueCheck.innerHTML = "PLEASE ENTER A TASK";
} else {
valueCheck.innerHTML = "";
nameTask = nameTask.toLowerCase();
const assignMemberList = JSON.parse(localStorage.getItem('assignment')) || [];
let task;
if (nameTask != '') {
for (const a of taskList) {
if (a.task === nameTask) {
task = a.task;
}
}
if (task != undefined) {
let assignToMember = {task};
assignMemberList.push(assignToMember);
window.localStorage.setItem('assignment', JSON.stringify(assignMemberList));
} else {
valueCheck.innerHTML = "PLEASE ENTER AN EXISTING TASK AND/OR TEAM MEMBER";
}
renderUpdatedTaskList();
}
event.target.reset();
}
}
function renderTaskList() {
const taskList = JSON.parse(window.localStorage.getItem("task")) || [];
const taskListOutput = document.getElementById("tasks-rendering");
taskListOutput.innerHTML = "";
for (const a of taskList) {
let taskElement = document.createElement("div");
taskElement.innerHTML = `<div class="object-render">
<h4>${a.task.charAt(0).toUpperCase() + a.task.slice(1)}</h4>
</div>`;
taskListOutput.appendChild(taskElement);
}
}
function renderMemberList() {
const memberList = JSON.parse(window.localStorage.getItem("member")) || [];
const memberListOutput = document.getElementById("members-rendering");
memberListOutput.innerHTML = "";
for (const m of memberList) {
let memberElement = document.createElement("div");
memberElement.innerHTML = `<div class="object-render" draggable="true"
ondragstart="drag(event)">
<h4 id="drag1">${m.member.charAt(0).toUpperCase() +
m.member.slice(1)}</h4>
</div>`;
memberListOutput.appendChild(memberElement);
}
}
I am trying to drag and drop names to different tasks, but when I do the names i drop only
appears on the first created task. I want to be able to drag and drop names to the task I want. I also want them to stay there when the site is refreshed.
function renderUpdatedTaskList(){
const assignMemberList = JSON.parse(localStorage.getItem('assignment')) || [];
const assignmentListOutput = document.getElementById('assignments-rendering');
assignmentListOutput.innerHTML = "";
for (const a of assignMemberList) {
let assignmentElement = document.createElement("div");
assignmentElement.innerHTML = `<div id="assignment-object-render" class="object-render-
assignments"
class="containers" ondragover="allowdrop(event)">
<h1>${a.task.charAt(0).toUpperCase() + a.task.slice(1)}</h1>
<br>
<p>medlemmer</p>
<div class="membersDiv" ondragover="allowdrop(event)" ondrop="drop(event)">
</div>
</div>`;
assignmentListOutput.appendChild(assignmentElement);
}
renderMemberNamesOnTask();
}
function allowdrop(ev) {
ev.preventDefault();
}
function drag(ev) {
let memberInfo = ev.target.innerText;
ev.dataTransfer.setData("text/plain", memberInfo);
}
function drop(ev) {
ev.preventDefault();
const taskAndMember = JSON.parse(localStorage.getItem("taskAndMember")) || [];
let memberInfo = ev.dataTransfer.getData("text/plain");
task = ev.target.parentElement.querySelector("h1").innerText;
ev.target.append(memberInfo);
memberAndTask = {task, memberInfo};
taskAndMember.push(memberAndTask);
window.localStorage.setItem("taskAndMember", JSON.stringify(taskAndMember));
renderUpdatedTaskList();
}
function renderMemberNamesOnTask(){
const taskAndMember = JSON.parse(localStorage.getItem("taskAndMember")) || [];
let membersDiv = document.querySelectorAll(".membersDiv");
membersDiv.innerHTML = "";
for(const m of taskAndMember){
let htmlTxt = document.createElement("div");
htmlTxt.innerHTML = `${m.memberInfo}`;
Every name i drag on to a task will only appear on the first created task. I am pretty sure the problem lies somewhere here.
membersDiv.appendChild(htmlTxt);
}
}
`

`
body{
margin: 0;
padding: 0;
font-family: 'Oswald', sans-serif;
}
#main-container{
position: relative;
background-color: gainsboro;
margin: 0 auto;
width: 800px;
height: 1000px;
border-bottom: 30px solid floralwhite;
}
header{
z-index: 2;
position: absolute;
width: 800px;
height: 100px;
background-color: floralwhite;
text-align: center;
}
.text-input{
font-size: 15px;
border: 1px solid white;
height: 17px;
width: 250px;
}
.button{
font-size: 14px;
border: 1px solid white;
color: grey;
height: 20px;
width: 50px;
}
#task-form{
position: absolute;
left: 40px;
margin-top: 15px;
top: 110px;
}
#member-form{
position: absolute;
right: 40px;
margin-top: 15px;
top: 110px;
}
.value-check{
position: absolute;
z-index: 3;
top: 110px;
font-size: 12px;
color: red;
}
#task-value-check{
left: 40px;
}
#member-value-check{
right: 210px;
}
#assign-value-check{
top: 561px;
left: 135px;
}
.header{
position: absolute;
z-index: 2;
top: 170px;
background-color: antiquewhite;
color: grey;
border-bottom: 1px solid white;
height: 20px;
width: 370px;
font-size: 15px;
padding: 10px;
}
#tasks-header{
left: 0px;
}
#members-header{
right: 0px;
}
#assignments-header{
top: 620px;
width: 780px;
text-align: center;
}
#assign-form{
position: absolute;
left: 220px;
top: 578px;
}
#check-task{
position: absolute;
left: -85px;
}
#check-member{
position: absolute;
right: -445px;
}
#assign-button{
position: absolute;
width: 80px;
left: 450px;
}
#plus-symbol{
position: absolute;
color: white;
top: -28px;
left: 175.5px;
}
#assignment-object-render{
background-color: floralwhite;
padding: 20px;
padding-bottom: 50px;
font-size: 10px;
text-align: center;
}
.object-render{
background-color: floralwhite;
padding: 20px;
font-size: 10px;
text-align: center;
width: 62px;
word-wrap: break-word;
overflow-y: auto;
height: 55px;
}
.object-render-assignments{
background-color: floralwhite;
padding: 20px;
font-size: 10px;
text-align: center;
}
#tasks-rendering{
top: 210px;
}
#members-rendering{
top: 210px;
right: 0px;
}
#assignments-rendering{
bottom: 20px;
width: 760px;
height: 280px;
}
.rendering{
position: absolute;
background-color: antiquewhite;
font-family: sans-serif;
padding: 20px;
width: 350px;
height: 300px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-row-gap: 20px;
grid-column-gap: 20px;
overflow: auto;
}
.membersDiv{
height: 70px;
width: 200px;
background-color: lightgray;
overflow-y: scroll;
}
This is the css code.
`

Button positioning in completely wrong place to where it should

I've got a webpage with 2 different sections. Each are the height of the viewport. One has a button 'work' in the center. When this is clicked, that disappears and some links appear where it was. The same sort of thing applies for the next section.
I'm trying to add a reset function to remove the links and add the buttons back. I originally tried to make one button reset all sections but, after that didn't work, I'm now trying to make an individual button for each section.
I've done this but my problem is that the second section's reset button appears in the same place as the first section's one. Both should appear at the bottom right section of their respective sections.
function openSites(categoryType) {
if (categoryType == "work") {
var sites = document.getElementById("workSites");
var button = document.getElementById("workButton");
} else if (categoryType == "other") {
var sites = document.getElementById("otherSites");
var button = document.getElementById("otherButton");
}
sites.classList.add("show");
sites.classList.remove("hide");
button.classList.add("hide");
}
function reset(categoryType) {
if (categoryType == "work") {
var sites = document.getElementById("workSites");
var button = document.getElementById("workButton");
} else if (categoryType == "other") {
var sites = document.getElementById("otherSites");
var button = document.getElementById("otherButton");
}
sites.classList.remove("show");
sites.classList.add("hide");
button.classList.remove("hide");
}
function betterReset() {
for (category in document.getElementsByClassName("category-container")) {
document.write(category);
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page {
display: inline-block;
overflow: hidden;
width: 100%;
height: 100vh;
}
#page-1 {
display: block;
background-color: #3faae4;
}
#page-2 {
display: block;
background-color: #ffffff;
}
.pointer {
cursor: pointer;
}
#work {
height: 100%;
width: 100%;
}
#other {
height: 100%;
width: 100%;
}
#workSites {
height: 100%;
width: 100%;
}
#otherSites {
height: 100%;
width: 100%;
}
.sites {
list-style-type: none;
height: 100%;
}
.site {
padding: 50px 0px;
flex-grow: 1;
text-align: center;
}
.center {
display: flex;
align-items: center;
justify-content: center;
}
.category-container {
height: 100%;
}
.category-button {
border: solid 0.5px;
padding: 60px;
}
.buttonClose {
position: absolute;
border: solid 0.5px;
border-radius: 5px;
right: 3px;
bottom: 0px;
width: 70px;
height: 35px;
}
.show {
display: block;
}
.hide {
display: none;
}
<!DOCTYPE html>
<html>
<head>
<title>Nick's site</title>
<link rel="stylesheet" type="text/css" href="./styles3.css">
<meta name="viewport" content="width= device-width, inital-scale=1">
</head>
<body>
<div id="page-1" class="page">
<div id="work">
<div id="workButton" class="category-container center">
<a class="category-button pointer" onclick="openSites('work')">Work</a>
</div>
<div id="workSites" class="hide">
<ul class="sites center">
<li class="site"><a class="pointer" href="#">Printfactory</a></li>
<li class="site"><a class="pointer" href="#">Henry's Site</a></li>
</ul>
<button onclick="reset('work')" class="buttonClose pointer" style="z-index: 2;">
Reset
</button>
</div>
</div>
</div>
<div id="page-2" class="page">
<div id="other">
<div id="otherButton" class="category-container center">
<a class="category-button pointer" onclick="openSites('other')">Other</a>
</div>
<div id="otherSites" class="hide">
<ul class="sites center">
<li class="site"><a class="pointer" href="#">#</a></li>
<li class="site"><a class="pointer" href="#">#</a></li>
<li class="site"><a class="pointer" href="#">#</a></li>
</ul>
<button onclick="reset('other')" class="buttonClose pointer" style="z-index: 2;">
Reset2
</button>
</div>
</div>
</div>
</body>
</html>

You are giving a position:absolute tu your reset buttons. This make them take the values of right and bottom relative to next parent with position:relative.In this case being the body tag.
To fix this, add position:relative to your parent divs.
#workSites,
#otherSites {
position: relative;
}
Hope this helps :>
function openSites(categoryType) {
if (categoryType == "work") {
var sites = document.getElementById("workSites");
var button = document.getElementById("workButton");
} else if (categoryType == "other") {
var sites = document.getElementById("otherSites");
var button = document.getElementById("otherButton");
}
sites.classList.add("show");
sites.classList.remove("hide");
button.classList.add("hide");
}
function reset(categoryType) {
if (categoryType == "work") {
var sites = document.getElementById("workSites");
var button = document.getElementById("workButton");
} else if (categoryType == "other") {
var sites = document.getElementById("otherSites");
var button = document.getElementById("otherButton");
}
sites.classList.remove("show");
sites.classList.add("hide");
button.classList.remove("hide");
}
function betterReset() {
for (category in document.getElementsByClassName("category-container")){
document.write(category);
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.page {
display: inline-block;
overflow: hidden;
width: 100%;
height: 100vh;
}
#page-1 {
display: block;
background-color: #3faae4;
}
#page-2 {
display: block;
background-color: #ffffff;
}
.pointer {
cursor: pointer;
}
#work {
height: 100%;
width: 100%;
}
#other {
height: 100%;
width: 100%;
}
#workSites {
height: 100%;
width: 100%;
}
#otherSites {
height: 100%;
width: 100%;
}
.sites {
list-style-type: none;
height: 100%;
}
.site {
padding: 50px 0px;
flex-grow: 1;
text-align: center;
}
.center {
display: flex;
align-items: center;
justify-content: center;
}
.category-container {
height: 100%;
}
.category-button {
border: solid 0.5px;
padding: 60px;
}
.buttonClose {
position: absolute;
border: solid 0.5px;
border-radius: 5px;
right: 3px;
bottom: 0px;
width: 70px;
height: 35px;
}
.show {
display: block;
}
.hide {
display: none;
}
#workSites,
#otherSites {
position: relative;
}
<!DOCTYPE html>
<html>
<head>
<title>Nick's site</title>
<link rel="stylesheet" type="text/css" href="./styles3.css">
<meta name="viewport" content="width= device-width, inital-scale=1">
</head>
<body>
<div id="page-1" class="page">
<div id="work">
<div id="workButton" class="category-container center">
<a class="category-button pointer" onclick="openSites('work')">Work</a>
</div>
<div id="workSites" class="hide">
<ul class="sites center">
<li class="site"><a class="pointer" href="#">Printfactory</a></li>
<li class="site"><a class="pointer" href="#">Henry's Site</a></li>
</ul>
<button onclick="reset('work')" class="buttonClose pointer" style="z-index: 2;">
Reset
</button>
</div>
</div>
</div>
<div id="page-2" class="page">
<div id="other">
<div id="otherButton" class="category-container center">
<a class="category-button pointer" onclick="openSites('other')">Other</a>
</div>
<div id="otherSites" class="hide">
<ul class="sites center">
<li class="site"><a class="pointer" href="#">#</a></li>
<li class="site"><a class="pointer" href="#">#</a></li>
<li class="site"><a class="pointer" href="#">#</a></li>
</ul>
<button onclick="reset('other')" class="buttonClose pointer" style="z-index: 2;">
Reset2
</button>
</div>
</div>
</div>
</body>
</html>

show an element after clicking two or more different elements

I have different elements and want to connect them with lines after clicking on them. The problem is that each element can be connected with several other elements, so there are more than one possibilities to combine each element, which means I have to click all of the elements I want to be connected to show the lines between.
For example: when you click #button1 and #button2 a line appears between them. When you click now #button3 a line between #button2 and #button3 would show up in addition to the first line. (The lines are images which should be shown after clicking the buttons).
I couldn't find any solutions where you can trigger an event after clicking two or more elements. Hope somebody can help me!
#button1 {
border: #000000 solid;
width: 100px;
float: left;
}
#button2 {
border: #000000 solid;
width: 100px;
margin-left: 300px;
}
#button3 {
border: #000000 solid;
width: 100px;
margin-top: 175px;
margin-left: 0px;
float: left;
}
#button4 {
border: #000000 solid;
width: 100px;
margin-top: 175px;
margin-left: 300px;
}
#line12 {
margin-left: 55px;
margin-top: 17.5px;
position: absolute;
visibility: hidden;
}
#line24 {
margin-left: 350px;
margin-top: 33px;
position: absolute;
visibility: hidden;
}
#line14 {
margin-left: 50px;
margin-top: 33px;
position: absolute;
visibility: hidden;
}
#line13 {
margin-left: 50px;
margin-top: 33px;
position: absolute;
visibility: hidden;
}
#line32 {
margin-left: 50px;
margin-top: 33px;
position: absolute;
visibility: hidden;
}
<div id="line12">
<img src="img/line12.png">
</div>
<div id="line14">
<img src="img/line14.png">
</div>
<div id="line24">
<img src="img/line24.png">
</div>
<div id="line13">
<img src="img/line13.png">
</div>
<div id="line32">
<img src="img/line32.png">
</div>
<div id="button1">show lines 1</div>
<div id="button2">show lines 2</div>
<div id="button3">show lines 3</div>
<div id="button4">show lines 4</div>

Try something like this. Remember that you should incluse your js
var firstEl = -1;
$("#button1").on("click",function(){
if (firstEl == -1){
firstEl = 1;
} else {
$("line" + firstEl + "1").show();
console.log("show " + "line" + firstEl + "1");
firstEl = -1;
}
});
$("#button2").on("click",function(){
if (firstEl == -1){
firstEl = 2;
} else {
$("line" + firstEl + "2").show();
console.log("show " + "line" + firstEl + "2");
firstEl = -1;
}
});
$("#button3").on("click",function(){
if (firstEl == -1){
firstEl = 3;
} else {
$("line" + firstEl + "3").show();
console.log("show " + "line" + firstEl + "3");
firstEl = -1;
}
});
$("#button4").on("click",function(){
if (firstEl == -1){
firstEl = 4;
} else {
$("line" + firstEl + "4").show();
console.log("show " + "line" + firstEl + "4");
firstEl = -1;
}
});
#button1{
border:#000000 solid;
width:100px;
float:left;
}
#button2{
border:#000000 solid;
width:100px;
margin-left:300px;}
#button3{
border:#000000 solid;
width:100px;
margin-top:175px;
margin-left:0px;
float:left;}
#button4{
border:#000000 solid;
width:100px;
margin-top:175px;
margin-left:300px;
}
#line12 {
margin-left:55px;
margin-top:17.5px;
position:absolute;
visibility:hidden;
}
#line24 {
margin-left: 350px;
margin-top:33px;
position:absolute;
visibility:hidden;
}
#line14 {
margin-left: 50px;
margin-top:33px;
position:absolute;
visibility:hidden;
}
#line13 {
margin-left: 50px;
margin-top:33px;
position:absolute;
visibility:hidden;
}
#line32 {
margin-left: 50px;
margin-top:33px;
position:absolute;
visibility:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="line12"><img src="img/line12.png"></div>
<div id="line14"><img src="img/line14.png"></div>
<div id="line24"><img src="img/line24.png"></div>
<div id="line13"><img src="img/line13.png"></div>
<div id="line32"><img src="img/line32.png"></div>
<div id="button1">show lines 1</div>
<div id="button2">show lines 2</div>
<div id="button3">show lines 3</div>
<div id="button4">show lines 4</div>

Try using following code :
HTML :
<div id="line12" class="line-image-container">
<img src="img/line12.png">
</div>
<div id="line14" class="line-image-container">
<img src="img/line14.png">
</div>
<div id="line24" class="line-image-container">
<img src="img/line24.png">
</div>
<div id="line13" class="line-image-container">
<img src="img/line13.png">
</div>
<div id="line32" class="line-image-container">
<img src="img/line32.png">
</div>
<div id="button1" data-line-no="1">show lines 1</div>
<div id="button2" data-line-no="2">show lines 2</div>
<div id="button3" data-line-no="3">show lines 3</div>
<div id="button4" data-line-no="4">show lines 4</div>
jQuery :
var i=0;
var line_obj = array();
$('button').on('click', function() {
$('.line-image-container').css('visibility', 'hidden');
if(i<=2) {
var line = $(this).attr('data-line-no');
line_obj.push(line);
i++;
}
if(i == 2) {
$('#line'+line_obj[0]+line_obj[1]).css('visibility', 'visible');
i = 0;
}
});
It would be better if you add your code in jsfiddle.

You could try something like this:
$(function() {
var buttonClicks = [];
$(".test").click(function(e) {
var btnId = $(e.target).attr('id');
// make sure the same button wasnt clicked twice
if (buttonClicks[0] === btnId)
return;
buttonClicks.push(btnId);
if (buttonClicks.length === 2) { // 2 buttons clicked
// put your line drawing logic here
console.log("Show line between " + buttonClicks[0] + " and " + buttonClicks[1]);
buttonClicks = []; // reset button clicks
}
});
});
.test {
cursor: pointer;
}
#button1 {
border: #000000 solid;
width: 100px;
float: left;
}
#button2 {
border: #000000 solid;
width: 100px;
margin-left: 300px;
}
#button3 {
border: #000000 solid;
width: 100px;
margin-top: 175px;
margin-left: 0px;
float: left;
}
#button4 {
border: #000000 solid;
width: 100px;
margin-top: 175px;
margin-left: 300px;
}
#line12 {
margin-left: 55px;
margin-top: 17.5px;
position: absolute;
visibility: hidden;
}
#line24 {
margin-left: 350px;
margin-top: 33px;
position: absolute;
visibility: hidden;
}
#line14 {
margin-left: 50px;
margin-top: 33px;
position: absolute;
visibility: hidden;
}
#line13 {
margin-left: 50px;
margin-top: 33px;
position: absolute;
visibility: hidden;
}
#line32 {
margin-left: 50px;
margin-top: 33px;
position: absolute;
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="line12">
<img src="img/line12.png">
</div>
<div id="line14">
<img src="img/line14.png">
</div>
<div id="line24">
<img src="img/line24.png">
</div>
<div id="line13">
<img src="img/line13.png">
</div>
<div id="line32">
<img src="img/line32.png">
</div>
<div class="test" id="button1">show lines 1</div>
<div class="test" id="button2">show lines 2</div>
<div class="test" id="button3">show lines 3</div>
<div class="test" id="button4">show lines 4</div>

Categories