Develop Reference

Javascript popup?

So what I'm trying to make is a map of Germany with markers.
and when clicked on a marker a div (content) will show with some things in it
is there a way to let JavaScript know which marker I clicked and it will open the corresponding content div, in total it will be about 200 markers so it must be a decently efficient code and my knowledge about JavaScript is not that great
this is the code I have for now
<div class="map">
<img src="/images/map.jpg">
</div>
<div class="markers" style="top: 60%; left: 35%;">
<div class="content" style="display: none;">
<h1>Test</h1>
<p>test</p>
</div>
</div>
<div class="markers" style="top: 20%; left: 60%;">
<div class="content" style="display: none;">
<h1>Test2</h1>
<p>test2</p>
</div>
</div>

Basic idea is using event delegation and listen to the click on the parent. You can than determine what was clicked and you can toggle a class to show the hidden element. Basic idea:
document.querySelector(".map-wrapper").addEventListener("click", function (e) {
// find if a marker was clicked
var marker = e.target.closest('.marker');
console.log(marker)
// was one clicked?
if (marker) {
// Hide any others that may be showing
var active = document.querySelector('.marker.active');
if(active && active!==marker) {
active.classList.remove('active');
}
// toggle the info so it shows/hides
marker.classList.toggle('active');
}
});
.map-wrapper {
position: relative;
background-color: #CCCCCC;
width: 400px;
height: 400px;
}
.marker {
position: relative;
}
.marker::after {
content: '🚻';
}
.marker .content {
display: none;
opacity: 0;
}
.marker.active .content {
position: absolute;
display: block;
opacity: 1;
transition: opacity 0.3s;
background-color: #CCFF00;
border: 2px solid red;
margin: 20px;
}
<div class="map-wrapper">
<div class="marker" style="left:100px; top: 100px;">
<div class="content">
<h1>Test1</h1>
<p>test1</p>
</div>
</div>
<div class="marker" style="left:150px; top: 270px;">
<div class="content">
<h1>Test2</h1>
<p>test2</p>
</div>
</div>
<div class="marker" style="left: 46px; top: 143px;">
<div class="content">
<h1>Test3</h1>
<p>test3</p>
</div>
</div>
</div>

There is no need to add any IDs or other means to identify the correct .content to show.
Add a click event listener to each marker and toggle a class on the element. The rest can be done with CSS.
// Find all of the .markers elements
const markers = document.querySelectorAll('.markers');
// Loop through the .markers
markers.forEach((marker) => {
// Add event listener to each .marker
marker.addEventListener('click', (e) => {
if (e.currentTarget.classList.contains('active')) {
// If the clicked element is active, deactivate it...
e.currentTarget.classList.remove('active');
} else {
// ...otherwise, deactivate any other active .markers...
removeClass(markers, 'active');
// ...and activate the clicked .marker
e.currentTarget.classList.add('active');
}
})
});
// Helper function to remove a class from a collection of elements
function removeClass(els, className) {
els.forEach((el) => {
el.classList.remove(className);
});
}
.markers {
border: 1px solid #e6e6e6;
}
.markers .content {
display: none;
}
.markers.active .content {
display: block;
}
<div class="markers" style="top: 60%; left: 35%;">
<p>
Marker 1
</p>
<div class="content">
<h1>Test</h1>
<p>test</p>
</div>
</div>
<div class="markers" style="top: 20%; left: 60%;">
<p>
Marker 2
</p>
<div class="content">
<h1>Test2</h1>
<p>test2</p>
</div>
</div>

Bottom display a message on checkbox click

I am trying to display a message at the bottom when someone click on checkbox.
<style>
.stick {
background-color: red;
height: 60px;
position: fixed;
width: 100%;
left: 0;
}
</style>
<div class="col-md-12" id="compare" style="stick; display:none;">
<div class="separator"></div>
<div class="alert alert-info text-md-center">
<span class="text-md-center">
<button class="btn">
My message
</span>
</div>
</div>
<script>
function showProductsCompare() {
document.getElementById('compare').style.display = "block";
}
</script>
until now, all it's correct, the message appear on the page when the code is inserted
but I tried to make a sticky message like this page https://www.homedepot.com/s/french%2520door%2520refrigerators?NCNI-5 (click on the checkbox.
I don't find example or to make that.
Thank you.

This will do the work:
.stick {
background-color: red;
height: 60px;
position: fixed;
width: 100%;
left: 0;
buttom: 0;
}
You will need to give the div a class of "stick":
<div class="col-md-12 stick" id="compare" style="stick; display:none;">

how to make divs fly from one container to another container using greensock.js?

I am trying to create UI where on click tiles [sub-divs] move from one parent div to another parent div. I have created a pen to explain the question.The pen is working fine but now I need to know how to show them moving, animation. I want them to fly one by one on click. I used greensock.js before but I don't have any idea how to use it in this case, or can I use it here?
$(".mybox").on('click', function() {
$(this).css('background', 'red');
$(this).detach();
$(this).appendTo("#two");
var p = $("#two");
var position = p.position();
TweenLite.to(this, 0.5, {x:position.left, y:position.right});
});
#one {
width: 200px;
height: 200px;
float: left;
background: rgba(255,40,100,0.5);;
}
#two {
margin-left: 300px;
width: 200px;
height: 200px;
background: rgba(0,240,10,0.5);
}
.mybox {
float:left;
width: 50px;
height: 50px;
background: rgb(255,0,0);
margin: auto auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/easing/EasePack.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one">
<div id="content" class="mybox">
1
</div>
<div id="content" class="mybox">
2
</div>
<div id="content" class="mybox">
3
</div>
<div id="content" class="mybox">
4
</div>
<div id="content" class="mybox">
5
</div>
</div>
<div id="two">
</div>

sliding through divs using next and previous buttons

I am trying to slide through 2 different divs on my page with 2 buttons - next and previous.
it is basically like a setup wizard that you see while installing a software.
so here is the mark up:
<div id="container">
<div id="box1" class="box">
<button id="nxt">Next</button>
<button id="prv">Previous</button>
</div>
<div id="box2" class="box">
<button id="nxt">Next</button>
<button id="prv">Previous</button>
</div>
</div>
and here is the JQuery for both buttons:
$('#nxt').click(function() {
$(this).parent(".box").animate({left: '-150%'}, 500 );
$(this).parent(".box").next(".box").animate({left: '50%'},500);
});
$('#prv').click(function() {
$(this).parent(".box").animate({left: '150%'}, 500 );
$(this).parent(".box").prev(".box").animate({left: '50%'},500);
});
I am able to do perform the "next" operation but not the "previous" one, there is a mistake with jquery, please help me with that.
you can also have a glance at this fiddle
Thank You

You must not use same ids for multiple elements. Use class attribute instead, see below markup and jquery;
HTML: Change id to class for previous and next buttons
<div id="container">
<div id="box1" class="box">
<button class="nxt">Next</button>
<button class="prv">Previous</button>
</div>
<div id="box2" class="box">
<button class="nxt">Next</button>
<button class="prv">Previous</button>
</div>
</div>
jQuery: make changes in jquery selector for class attribute and keep rest of the code as it is.
$('.nxt').click(function() {
$(this).parent(".box").animate({left: '-150%'}, 500 );
$(this).parent(".box").next(".box").animate({left: '50%'},500);
});
$('.prv').click(function() {
$(this).parent(".box").animate({left: '150%'}, 500 );
$(this).parent(".box").prev(".box").animate({left: '50%'},500);
});
JSFiddle Demo

you have just missed .animate({left: '-50%'} in $('#prv').click(function(){}
JSFiddle link

You use same id for buttons in first div and in second div. It is not right and that's the source of problem. Check out this fiddle to see right version.
$('#nxt').click(function() {
$(this).parent(".box").animate({left: '-150%'}, 500 );
$(this).parent(".box").next(".box").animate({left: '50%'},500);
});
$('#prv1').click(function() {
$(this).parent(".box").animate({left: '150%'}, 500 );
$(this).parent(".box").prev(".box").animate({left: '50%'},500);
});
#container {
position: absolute;
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;
}
.box {
position: absolute;
width: 50%;
background-color: white;
height: 500px;
line-height: 300px;
font-size: 50px;
text-align: center;
border: 2px solid black;
left: 50%;
top: 100px;
margin-left: -25%;
}
#box2 {
left: 150%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="box1" class="box">
<button id="nxt">Next</button>
<button id="prv">Previous</button>
</div>
<div id="box2" class="box">
<button id="nxt1">Next</button>
<button id="prv1">Previous</button>
</div>
</div>

Place elements side by side

I am trying to create a push animation, where one element 'pushes' the other.
I have 4 divs in a parent div 2 are boxes that I want the push animation happening on, and 2 'button' divs. The wrapper div doesn't have a set height.
The problem is, the second box div gets placed under the first box div. How can I get them to be right and left of each other, not one on top of the other.
Also, I need a bit of help with the animation. How can I get one box div to 'push' the other?
This is what I mean by 'push' effect:
JSFiddle
$(document).ready(function() {
"use strict";
$('#leftBtn').click(function() {
$('#leftBox').animate({
left: '-200px'
});
$('#rightBox').animate({
left: '-200px'
});
});
$('#rightBtn').click(function() {
$('#leftBox').animate({
left: '200px'
});
$('#rightBox').animate({
left: '200px'
});
});
});
#wrapper {
width: 400px;
background-color: chocolate;
margin: auto;
overflow: hidden;
}
#leftBox,
#rightBox {
width: 400px;
height: 100px;
display: inline-block;
position: relative;
}
#rightBox {
left: 400px;
}
#leftBtn,
#rightBtn {
width: 200px;
height: 30px;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="leftBox" style="background-color: cornflowerblue;">Hello
</div><div id="rightBox" style="background-color: darkkhaki;">Bye Bye
</div><div id="leftBtn" style="background-color: yellowgreen;">Click Me
</div><div id="rightBtn" style="background-color: yellow;">No, Click Me!</div>
</div>

You can use display:inline-block on #leftBox & #rightBox to place them side by side. For animation, wrap them with another div(#wrapper) & change the position of #wrapper on click .
Example:
JSFiddle
HTML:
<div id="wrapper">
<div id="slider">
<div id="leftBox" style="background-color: cornflowerblue;">Hello
</div>
<div id="rightBox" style="background-color: darkkhaki;">Bye Bye
</div>
</div>
<div id="buttons">
<div id="leftBtn" style="background-color: yellowgreen;">Click Me
</div>
<div id="rightBtn" style="background-color: yellow;">No, Click Me!</div>
</div>
</div>
JS:
$(document).ready(function() {
"use strict";
$('#leftBtn').click(function() {
$('#slider').animate({
left: '-400px'
});
});
$('#rightBtn').click(function() {
$('#slider').animate({
left: '0px'
});
});
});