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>

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>

How to fade/blend between 2 divs in a less 'clunky' way

NB
My Header:
<header>
<div style="float:left;margin-left:20px;">
<div style="float:left; margin-left:10px;margin-top:55px;background-color:#2BC3A7; height:3px; width:200px;"> </div>
<div style="clear:both;float:left;"></div>
<div style="float:left; margin-left:10px;margin-top:5px;font-family:DIN; font-size:12pt;color:#2BC3A7;">Services/Products</div>
</div>
</div>
</header>
I have 2 divs:
<div id="#content1">
<div id="divWelcome" style="margin-top:50px;">
<div id="headerimg" style="position: relative;">
<div style="position: absolute; bottom:255px; left: 20px; width: 550px; font-family:DIN; font-size:23pt; font-weight:600; color: white; letter-spacing:0.01em;">
We offer Cloud solutions for small businesses to help them manage their workflow requirements
</div>
<hr style="height:6px;position: absolute; bottom:210px; left: 20px; width: 490px;"/>
<div style="position: absolute; bottom:175px; left: 20px; width: 550px; font-family:DIN; font-size:14pt; font-weight:500; color: white; letter-spacing:0.01em;">
Our core sectors of expertise are professional services, data management and outsourcing.
</div>
</div>
<div id="divAboutContents" style="margin-top:50px; background-color:red;position: relative;display: none;">
</div>
</div>
</div>
So when the page loads the 1st div shows. The effect I want is when the user presses a button the divFirst gently fades away and the divSecond gently fades in. I have used this bit of jQuery but the affect does not look very pleasing.
<script type="text/javascript">
$(document).ready(function () {
$("#divAbout").click(function () {
$("#headerimg").fadeOut();
$("#divAboutContents").fadeIn();
});
});
</script>
What else can I try/read up on? Thanks
NB
This is part of my CSS
#content1 {
clear: both;
position: absolute;
}
Also I was fading the other one out. just forgot to put it in the question. The affect I get is 'clunky'

'Pleasing' is a very subjective term, however to improve it you could place both div elements within a parent container positioned absolutely so they overlap. You can then fadeToggle() between the two as needed. Something like this:
$('#container').click(function() {
$(this).find('div').fadeToggle();
})
#container > div {
position: absolute;
}
#divSecond {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="container">
<div id="divFirst">some content with images</div>
<div id="divSecond">different content with images</div>
</div>
Click the text to see the fade transition in action.

playing fadein/fadeout slider on tab button click

I have created a Fadein/Fadeout slider. Left button and right button are working fine but I want to play slider by clicking on tab buttons.
JSfiddle
HTML
<p id="slide1_controls">
<div class="block-icon icon-s1">
<img class="block-img icon-s1" src="../_images/building_icon1.png" data-hover-image="../_images/building_icon1_hover.png" data-selected="false" />
</div>
<div class="block-icon icon-s2">
<img class="block-img icon-s2" src="../_images/building_icon2.png" data-hover-image="../_images/building_icon2_hover.png" data-selected="false" />
</div>
<div class="block-icon icon-s3">
<img class="block-img icon-s3" src="../_images/building_icon3.png" data-hover-image="../_images/building_icon3_hover.png" data-selected="false" />
</div>
<div class="block-icon icon-s4">
<img class="block-img icon-s4" src="../_images/building_icon4.png" data-hover-image="../_images/building_icon4_hover.png" data-selected="false" />
</div>
</p>
<div class="slider-text-context" id="target">
<div class="slide-01 fade-texts active">tab1</div>
<div class="slide-02 fade-texts">tab2</div>
<div class="slide-03 fade-texts">tab3</div>
<div class="slide-04 fade-texts">tab4</div>
</div>
CSS
.fade-texts {
width: 100%;
height: 259px;
left: 0px;
position: absolute;
}
.slider-btn-area {
position: absolute;
z-index: 8;
margin-left: auto;
margin-right: auto;
left: 25%;
top: 54%;
width: 50%;
}
#target > div {
display:none;
}
#target div:nth-child(1) {
display:block;
}
.tab-area {
position: absolute;
left: 25%;
top: 30%;
}
Javascript
$(".icon-s2").click(function() {
activeElem = $("#target .slide-02");
activeElem.removeClass('active').fadeOut(0);
if (!activeElem.is(':first-child')) {
activeElem.removeClass('active').fadeOut(0).prev().addClass('active').fadeIn(400);
}
}
$(".icon-s3").click(function() {
activeElem = $("#target .slide-03");
activeElem.removeClass('active').fadeOut(0);
if (!activeElem.is(':first-child')) {
activeElem.removeClass('active').fadeOut(0).prev().addClass('active').fadeIn(400);
}
}
When I press the tab it does not work to try to appear a DIV.

Your code made no sense. The way it looked was that the images had to be clicked in order to fadeIn/Out the tabs. I believe it should be the other way. I cleaned up the markup, and simplified the classes, ids, styles, etc...
Here's the DEMO
HTML
<div id="slides">
<div id="slide1" class="slide active">
<img class="img" src="http://placehold.it/150x50/000/Fff.png&text=FIRST" />
</div>
<div id="slide2" class="slide">
<img class="img" src="http://placehold.it/150X50/048/Fee.png&text=SECOND" />
</div>
<div id="slide3" class="slide">
<img class="img" src="http://placehold.it/150X50/fa8/375.png&text=THIRD" />
</div>
<div id="slide4" class="slide">
<img class="img" src="http://placehold.it/150X50/9a7/a10.png&text=FOURTH" />
</div>
</div>
<div class="tab-area" id="controls">
<div id="tab1" class="tab">1</div>
<div id="tab2" class="tab">2</div>
<div id="tab3" class="tab">3</div>
<div id="tab4" class="tab">4</div>
</div>
CSS
.slide {
display:none;
}
.active {
display: block;
}
.tab {
width: 16px;
height: 16px;
display: inline-block;
margin: 0 10px;
outline: 1px solid black;
text-align: center;
cursor: pointer;
}
jQuery/JavaScript
$(function () {
$('.tab').on('click', function (event) {
var tabID = event.target.id;
//console.log('tabID: '+tabID);
var order = tabID.split('b').pop();
//console.log('order: '+order);
var pos = parseInt(order, 10);
var slideID = 'slide'+pos;
//console.log('slideID: '+slideID);
var act = document.getElementById(slideID);
//console.log('act: '+act.id);
$('.slide').fadeOut(0).removeClass('active');
$(act).addClass('active').fadeIn(750);
});
});

How to write hover using jquery?

if hover on the button tag, it 'll show the social buttons with spaces.
When I mouse over in the space between two social icons, the follo.w button flickers for a moment We should not show follow button if I move even in between icons.
<div class="visible-lg visible-md">
<button class="btn follow-btn text-center" onmouseover="$(this).hide().next().show();">Follow Benedict on social media</button>
<div class="social-btn text-center" onmouseout="$(this).hide().prev().show();">
<a class="btn" href="https://twitter.com/BenedictEvans" target="_blank">
<img src="/assets/new_home/influential-images/Icons/twitter.png" width="100%" height="100%"/>
</a>
<a class="btn" href="http://ben-evans.com/" target="_blank">
<img src="/assets/new_home/influential-images/Icons/blog.png" width="100%" height="100%"/>
</a>
<a class="btn" href="https://soundcloud.com/a16z" target="_blank">
<img src="/assets/new_home/influential-images/Icons/soundcloud.png" width="100%" height="100%"/>
</a>
<a class="btn" href="http://www.slideshare.net/bge20" target="_blank">
<img src="/assets/new_home/influential-images/Icons/slideshare.png" width="100%" height="100%"/>
</a>
<a class="btn" href="https://www.linkedin.com/in/benedictevans" target="_blank">
<img src="/assets/new_home/influential-images/Icons/linkedin.png" width="100%" height="100%"/>
</a>
</div>
</div>
Added the fiddle here:
http://jsfiddle.net/thangadurai1992/g9rasopd/

you could always use css for this. It works by using a wrapper div and having the hover effect on the parent.
img {
height: 30px;
margin: 20px;
}
button {
height: 30px;
margin-top: 20px;
width: 100%;
position: absolute;
}
.wrapper:hover button {
display: none;
}
.wrapper {
display: inline-block;
position: relative;
}
<div class="wrapper">
<button>Follow Text Here</button>
<img src="http://placekitten.com/g/300/200" />
<img src="http://placekitten.com/g/300/200" />
<img src="http://placekitten.com/g/300/200" />
<img src="http://placekitten.com/g/300/200" />
</div>
Note: The margin used on the button and image tags are for demo only, and can be removed without breaking the functionality.
I have placed the css (to keep it clean) directly onto the img and button tags. In order for you to ensure it only applies to this button / these images, you could select them via class:
.social {
height: 30px;
margin:5px;
}
.follow {
height: 30px;
width: 100%;
margin-top:5px;
position: absolute;
}
.wrapper:hover .follow {
display: none;
}
.wrapper {
display: inline-block;
position: relative;
}
<div class="wrapper">
<button class="follow">Follow Benedict on social media</button>
<img class="social" src="/assets/new_home/influential-images/Icons/twitter.png" />
<img class="social" src="/assets/new_home/influential-images/Icons/blog.png" />
<img class="social" src="/assets/new_home/influential-images/Icons/soundcloud.png" />
<img class="social" src="/assets/new_home/influential-images/Icons/slideshare.png" />
<img class="social" src="/assets/new_home/influential-images/Icons/linkedin.png" />
</div>

You don't need JS on this one.
I just added a container and set an hover.
http://jsfiddle.net/g9rasopd/6/
.social-btn-container:hover .follow-btn{
display: none;
}
.social-btn-container:hover .social-btn{
display: inline-block;
}