Develop Reference

Showing multiple images on click for multiple links

I'm trying to get 10 elements to appear when the user clicks one of five links.
I will only show two here to save time.
These 'appearing' elements need to be links in some way or another.
HTML - LINKS
<a class="toggler1" href="#!"
><h1 class="website-titles">A boring website</h1></a
<a class="toggler2" href="#!"
><h1 class="website-titles">Unoriginal.co.uk</h1></a
HTML - Appearing elements
<a class="mydiv1" href="main.html">
<div class="pop-up-1">
<img
class="mydiv1-bg"
src="images/pink-pop-up.png"
alt="pink pop up"
/>
<img
class="mydiv1-gif"
src="images/spinning-star.gif"
alt="animated star gif"
/>
</div>
</a>
<a class="mydiv2" href="main.html">
<div class="pop-up-2">
<img
class="mydiv2-bg"
src="images/black-pop-up.png"
alt="black pop up"
/>
<img
class="mydiv2-gif"
src="images/stars.gif"
alt="animated star background"
/>
<h1 class="mydiv2-text">
CLICK HERE TO RE-INVIGORATE YOUR WEB SURFING EXPERIENCE!!!
</h1>
</div>
JS -
This is my JS for one link, copy and pasted 2 times for convenience sake (in the real code it's 5 times for 5 links), with the elementToClick set to different classes (toggler1,toggler2... etc) within each tag. If I copy and paste this again, with another elementToShow (mydiv2 for example), this doesn't work - only one of the elements will appear
<script>
var elementToClick = document.querySelector(".toggler1");
var elementToShow = document.querySelector(".mydiv1");
if (elementToClick) {
elementToClick.addEventListener("click", showElement);
}
function showElement() {
elementToShow.classList.add("show");
}
</script>
<script>
var elementToClick = document.querySelector(".toggler2");
var elementToShow = document.querySelector(".mydiv1");
if (elementToClick) {
elementToClick.addEventListener("click", showElement);
}
function showElement() {
elementToShow.classList.add("show");
}
</script>
CSS
/* POP UP 1 */
.mydiv1 {
display: none;
}
.mydiv1.show {
display: block;
}
/* POP UP 2 */
.mydiv2 {
display: none;
}
.mydiv2.show {
display: block;
}
Thank you for looking at this mess, I am very new to Javascript and I'm sure I'm making this unnecessarily complicated for myself. If anyone can tell me how to get this working it would be greatly appreciated! Thanks!

In your Javascript code, in the showElement, use elementToShow.classList.toggle("show"); instead of elementToShow.classList.add("show");.
var elementToClick = document.querySelector(".toggler1");
var elementToShow = document.querySelector(".mydiv1");
if (elementToClick) {
elementToClick.addEventListener("click", showElement);
}
function showElement() {
elementToShow.classList.toggle("show");
}
var elementToClick = document.querySelector(".toggler2");
var elementToShow = document.querySelector(".mydiv1");
if (elementToClick) {
elementToClick.addEventListener("click", showElement);
}
function showElement() {
elementToShow.classList.toggle("show");
}
/* POP UP 1 */
.mydiv1 {
display: none;
}
.mydiv1.show {
display: block;
}
/* POP UP 2 */
.mydiv2 {
display: none;
}
.mydiv2.show {
display: block;
}
<a class="toggler1" href="#!"
><h1 class="website-titles">A boring website</h1>
</a>
<a class="toggler2" href="#!">
<h1 class="website-titles">Unoriginal.co.uk</h1>
</a>
<a class="mydiv1" href="main.html">
<div class="pop-up-1">
<img
class="mydiv1-bg"
src="images/pink-pop-up.png"
alt="pink pop up"
/>
<img
class="mydiv1-gif"
src="images/spinning-star.gif"
alt="animated star gif"
/>
</div>
</a>
<a class="mydiv2" href="main.html">
<div class="pop-up-2">
<img
class="mydiv2-bg"
src="images/black-pop-up.png"
alt="black pop up"
/>
<img
class="mydiv2-gif"
src="images/stars.gif"
alt="animated star background"
/>
<h1 class="mydiv2-text">
CLICK HERE TO RE-INVIGORATE YOUR WEB SURFING EXPERIENCE!!!
</h1>
</div>
</a>

Wrap all the elements you want to show in a div tag. For example:
<div id="elementToShow">
<a class="mydiv1" href="main.html">
.....
</div>
In your js select that enclosing element
var elementToShow = document.querySelector("#elementToShow");

The problem is in JavaScript part. You have multiple script tags, each of which have elementToClick and elementToShow. When you define elementToClick in the second (or any other) script tag, the previous ones are being overwritten. You only have one elementToClick and one elementToShow, instead of five. The same is true for all the other variables and functions (showElement).
Another piece of advice, try to use reusable code and try to never copy and paste code, like you did here. You can define one function:
function showElement(elementToShow) {
elementToShow.classList.toggle("show");
}
Then you can call this function for each of five elements:
let elements = [
{toggler: 'toggler1', div: 'div1'},
{toggler: 'toggler2', div: 'div2'},
...
];
for (let el of elements) {
let toggler = document.querySelector(`.${el.toggler}`);
let div = document.querySelector(`.${el.div}`);
toggler.addEventListener('click', () => showElement(div)); // add a click listener with a corresponding div
}
Hope this helps!

Show different form based on what image is clicked

I've got 3 images in the screen. Each image should display a different form in the SAME POSITION in the screen and hide the other 2 forms.
Image1: When clicked show form1 and hide form2 and form 3
Image2: When clicked show form2 and hide form1 and form 3
Image3: When clicked show form3 and hide form1 and form 2
Forms should be shown at the same position. I just see a solution calling the whole page by sending a parameter in the URL stating which form to show on the screen. I would really like to show the right form depending on what image is clicked at the moment without that.
I'm using HTML5, Bootstrap 4 and JavaScript - any suggestion using any of these languages would be perfect.

There are a lot of answers to things like this, try looking around before asking a question.
Here is one of the simplest approaches you will ever see using only JS and HTML
JavaScript
const imageOne = document.getElementById('imageOne');
const imageTwo = document.getElementById('imageTwo');
const imageThree = document.getElementById('imageThree');
const formOne = document.getElementById('formOne');
const formTwo = document.getElementById('formTwo');
const formThree = document.getElementById('formThree');
imageOne.addEventListener("click", function() {
formOne.style.display = "block";
formTwo.style.display = "none";
formThree.style.display = "none";
});
imageTwo.addEventListener("click", function() {
formOne.style.display = "none";
formTwo.style.display = "block";
formThree.style.display = "none";
});
imageThree.addEventListener("click", function() {
formOne.style.display = "none";
formTwo.style.display = "none";
formThree.style.display = "block;
});
HTML
<img id="imageOne" src="http://foo.bar">
<img id="imageTwo" src="http://bar.foo">
<img id="imageThree" src="http://last.image">
<div id="formOne" style="display: none">
<form>
....
</form>
</div>
<div id="formTwo" style="display: none">
<form>
....
</form>
</div>
<div id="formThree" style="display: none">
<form>
....
</form>
</div>

Ok, you need:
the 3 images
the 3 forms, with position absolute or fixed (so that they stay in the same position)
a JS function attached to the click event of every image that changes the correspondet form style to display:block and the others to display:none.
Something like:
var form1 = document.getElementById('form1')
document.getElementById('form1').onclick = function() {
form1.style.display = 'block'
form2.style.display = 'none'
form3.style.display = 'none'
}
For each one of your forms.
Here is a working pen I made to show how to do it.
https://codepen.io/jaimelopez18/pen/zWOEMw
This is all made with pure js (vanilla). You should try to learn this first and after you get a good grasp of it, I recommend taking a look at VueJS.

I just made a simple skeleton in jsFiddle as per your requirements, have a look at the code.
HTML:
<html>
<head>
<script type='text/javascript' src="jquery.min.js"></script>
</head>
<body>
<div class="jsImgWrp">
<img src="http://via.placeholder.com/350x150" class="jsImg" data-formid="form1" />
<img src="http://via.placeholder.com/350x150" class="jsImg" data-formid="form2"/>
<img src="http://via.placeholder.com/350x150" class="jsImg" data-formid="form3" />
</div>
<div class="jsFormWrp form-wrapper">
<div class="jsFrm form1 active">
form 1
</div>
<div class="jsFrm form2">
form 2
</div>
<div class="jsFrm form3">
form 3
</div>
</div>
</body>
</html>
CSS:
.form-wrapper .jsFrm {
display:none;
padding:10px;
border:solid 2px #eee;
width:200px;
height:100px;
}
.form-wrapper .jsFrm.active {
display:block;
}
.jsImgWrp img {
width:100px;
display:inline-block;
}
Javascript:
$(document).ready(function(){
var imgWrapper = $('.jsImgWrp');
var formWrapper = $('.jsFormWrp');
$('.jsImg', imgWrapper).on('click', function(){
var formId = $(this).data('formid');
$('.jsFrm').removeClass('active');
$('.' + formId).addClass('active');
})
});
Hope this may help you.

Stop simple JavaScript slideshow after one loop

I know very little about JavaScript at all, but I'm looking for a solution to a simple code that I'd like to use. I'm not trying to execute any slides or fades, just a simple slideshow that switches from one image to the next. I want the slideshow to play through just once, and then stop on the last image in the sequence. Any help would be greatly appreciated!
$("#slideshow > div:gt(0)").hide();
setInterval(function() {
$('#slideshow > div:first')
.next()
.end()
.appendTo('#slideshow');
}, 3000);
As I said, it's a very simple code. The first GIF runs only once, the second GIF loops. I would like the slideshow to stop on the looping GIF. I'm wondering if the '3000' (which I know corresponds to the length of each slide) can be changed to accomplish what I'm looking for. Or else adding a stop function... which I don't know how to write.
<div id="slideshow">
<div>
<img src="https://31.media.tumblr.com/e2c4bbaeb781a3b834cd09549595393f/
tumblr_noy3q3l1dy1uwyyx9o2_1280.gif">
</div>
<div>
<img src="https://33.media.tumblr.com/1d6495399687801067d62c83c4218644/
tumblr_noy3q3l1dy1uwyyx9o1_1280.gif">
</div>
</div>

Ok I have made this with the objective of being as clear and simple for you to understand as possible, (since you new to js...)
JS/Jquery:
$(function () {
setTimeout(playSlideShow, 3000);
function playSlideShow() {
var currImgContainer = $('.showImg');
if (!$(currImgContainer).hasClass('lastImg')) {
$('.showImg').removeClass('showImg').next().addClass('showImg');
setTimeout(playSlideShow, 3000);
}
}
});
So here we find the imgContainer(div) with the class "showImg", then using chaining, we remove the class and add it to the next imgContainer(div). Therefore toggling the CSS to show/hide the image until it finds the div that has the class "lastImg".
CSS:
.slideShow > div:not(.showImg) {
display: none;
}
.showImg {
display: block;
width: 400px;
height: 400px;
}
HTML:
<div class="slideShow" id="slideshow">
<div class="showImg">
<img src="Images/img1.png" alt="" />
</div>
<div>
<img src="Images/img2.png" alt="" />
</div>
<div>
<img src="Images/img3.png" alt="" />
</div>
<div class="lastImg">
<img src="Images/img4.png" alt="" />
</div>
</div>
This way you can have as many images as you want, just make sure the last div has class "lastImg" and the first one has the class "showImg".
Here is a fiddle
Hope it helps...

Try this:
var intervalID = null;
var iterator = 0;
var intervalDuration = 3000;
var slideshow = $('#slideshow');
var divs = slideshow.find('div');
//divs.filter(':gt(0)').hide();
divs.eq(iterator).show();
intervalID = setInterval(function(){
divs.eq(iterator).hide();
iterator += 1;
if (iterator === divs.length - 1) { clearInterval(intervalID); }
divs.eq(iterator).show();
}, intervalDuration);
#slideshow > div { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slideshow">
<div>
<img src="https://dl.dropboxusercontent.com/u/45891870/Experiments/Codepen/PIXI/0.4/images/JS.jpg" />
</div>
<div>
<img src="https://dl.dropboxusercontent.com/u/45891870/Experiments/Codepen/PIXI/0.4/images/PIXI.jpg" />
</div>
<div>
<img src="https://dl.dropboxusercontent.com/u/45891870/Experiments/Codepen/PIXI/0.4/images/JS.jpg" />
</div>
</div>
The HTML structure is same as yours but the only thing that I have changed are the image sources (tumbler images weren't loading for me). But JavaScript has been changed completely.
Add as many DIVs as you like in your HTML to test it out. Hope it helps.
Update #1:
Added CSS to hide the divs by default.
Increased the intervalDuration to 3000. Just to make sure there is ample time for the images to be loaded.
Commented the filter line of JS.
Added another JS line right below the previous filter line.
This update should also load your GIF only when it is needed to appear, hence will not be running in the background.
Let me if this works.

switch multiple images on click

I have the code to switch an image back and forth and it works fine. However, I was wondering if there was a way to rewrite the script so I can use it in multiple places. This is my code currently:
function swaparrows(obj) {
var x=document.images
if (x[0].src.match('images/editloadout.png')) {
x[0].src="images/editloadoutopen.png";
}
else if (x[0].src.match('editloadoutopen.png')) {
x[0].src="images/editloadout.png";
}
}
<img src="images/editloadout.png" onclick="swaparrows()" />
which works for this one specific instance only. I would like it to work in multiple places with different pictures entirely.

Pass the two images in to the swap function, and use the actual clicked object's src:
function swaparrows(obj, i1, i2) {
var src = obj.getAttribute('src');
if (src.match(i1))
obj.setAttribute('src', i2);
else
obj.setAttribute('src', i1);
}
where the HTML is:
<img src="images/editloadout.png"
onclick="swaparrows(this, 'images/editloadout.png', 'editloadoutopen.png')" />
example: http://codepen.io/paulroub/pen/GoEBF

So you could use a case switch and decide based on the sender ID
Reference:http://www.w3schools.com/js/js_switch.asp
example:
function swaparrows(idTag) {
var ele = document.getElementById(idTag);
switch(idTag){
case("editLoadout"):
if (ele.src.match('images/editloadout.png')) {
ele.src="images/editloadoutopen.png";
}
else if (ele.src.match('editloadoutopen.png')) {
ele.src="images/editloadout.png";
}
break;
case("button2"):
if (ele.src.match('images/button2.png')) {
ele.src="images/button2open.png";
}
else if (ele.src.match('button2open.png')) {
ele.src="images/button2.png";
}
break;
}
}
<img id="editLoadout" src="images/editloadout.png" onclick="swaparrows('editLoadout')" />
<img id="button2" src="images/button2.png" onclick="swaparrows('button2')" />

Why not just use css and let javascript do more important stuff?
replace the background-color with background-image or whatever
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Switch</title>
<style>
.i{
width:32px;line-height:32px;
display:block;float:left;
text-align:center;
background-color:white;
}
.i:target{
background-color:green;
}
</style>
</head>
<body>
<a class="i" id="a" href="#a">a</a>
<a class="i" id="b" href="#b">b</a>
<a class="i" id="c" href="#c">c</a>
<a class="i" id="d" href="#d">d</a>
<a class="i" id="e" href="#e">e</a>
</body>
</html>
another approach is to set a js var with the current selected item and toggle the class of that.if you want an example just ask.any other questions just ask.
.. there are many ways to to what you want, your approach is not a good one.

How to tell a javascript function what element to manipulate?

I am so very new to asp.net and javascript, and I am supposed to do the following task in a couple of days. I know I have to learn all the basics, before asking, but really don't know where to get what I need in short time. Thanks a lot in advance!
Here's a number cities, which will be shown on a country map:
Each city has it's own style (since city positions are different), defined in a css.
<div class="node">
<div class="taxonomy">
</div>
<div class="content">
<div id="contact_map" runat="server">
<ul>
<li id="city1" onmouseover= "onmouseoveragent(this)"
onmouseout="onmouseoutagent(this)">
<a href="someAddress"><span class="hideme">Some City Name</span>
</a>
<p class="hideme">Some City Name<strong class="tel">0123456789</strong>
</p>
</li>
<%-- other cities here, with different city name and tel --%>
</ul>
</div>
</div>
</div>
I will probably try to figure out how to create these city items dynamically later.
Below is a hint box, to be shown when mouse is over the city. It has to be repeated for all the cities. (Question1: How can I create these hint boxes dynamically, and somehow fill them with the information associated with the right city? Maybe I have to create the previous list dynamically, too..)
<div id="agentVisit" class="floating-tip-wrapper" style="margin: 0px; padding: 0px; position:
absolute; display:none; opacity: 1;">
<div class="floating-tip" style="margin: 0px;">Some City Name
<strong class="tel">0123456789</strong>
</div>
</div>
And this is tha javascript code for onmouseover and onmouseout of each city:
(Question 2: How can I tell the function which agentVisit to get? )
<script language="javascript" type="text/javascript">
function onmouseoveragent(e) {
var hint = document.getElementById("agentVisit");
console.log(hint);
hint.style.display = 'block';
hint.style.top = Math.max(e.offsetTop - hint.offsetHeight, 0) + "px";
hint.style.left = e.offsetLeft + "px";
};
function onmouseoutagent(e) {
var hint = document.getElementById("agentVisit");
hint.style.display = 'none';
}
</script>
I would appreciate it if you provide an idea (or just a general hint) of how to do it. Or just a link to a quick tutorial. Thanks!

I think you are making this way more complicated than it has to be, because you can leverage data dash (data-) attributes of DOM elements and then use something like jQueryUI Tooltip.