Develop Reference

Javscript: For every image click show modal with image zoom

I'm currently working on a simple image modal that should show only an image zoom with a close button.
I have a markup generated from my CMS in which the a tag can be configurated to have an extra class "lightbox" as an attribute which should then trigger the lightbox script.
However, currently it seems to only work for the first image that's loaded. When I click on another image it shows the same image source from the first one and I'm not sure how to fix it. Do all the images need to be looped over first?
My CMS generates a markupa for the images like this in the DOM (image is a placeholder):
<a href="image1.png" class="lightbox">
<img class="image-embed-item" src="image" >
</a>
<a href="image1.png" class="lightbox">
<img class="image-embed-item" src="image" >
</a>
<a href="image1.png" class="lightbox">
<img class="image-embed-item" src="image" >
</a>
In my default layout I then add the markup for the lightbox modal:
<div id="imagemodal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="close">×</div>
<img src="" id="imagepreview" style="width: 100%;" >
</div>
</div>
This is the javascript code:
window.addEventListener('DOMContentLoaded', function () {
// add imageresource id to loaded image
$(".image-embed-item").attr("id", "imageresource");
// add data-toggle class to all lightbox elements
$(".lightbox").attr("data-toggle", "lightbox");
// click event for data toggle
$(document).on('click', '[data-toggle="lightbox"]', function (event) {
event.preventDefault();
// use image source from clicked image
$('#imagepreview').attr('src', $('#imageresource').attr('src'));
$('.modal').css('display', 'block');
});
$(document).on('click', $('.closeModal'), function (event) {
// close function
});
});
Here is my css:
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1000; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

You are using the same id for all .image-embed-item in:
$(".image-embed-item").attr("id", "imageresource");
And then use $('#imageresource').attr('src') to set the preview.
That's why it always show the first image in the modal. You can solve it by changing $('#imageresource').attr('src') to $(this).find('img').attr('src'). Something like this:
window.addEventListener('DOMContentLoaded', function () {
// add data-toggle class to all lightbox elements
$(".lightbox").attr("data-toggle", "lightbox");
// click event for data toggle
$(document).on('click', '[data-toggle="lightbox"]', function (event) {
event.preventDefault();
// use image source from clicked image
$('#imagepreview').attr('src', $(this).find('img').attr('src'));
$('.modal').css('display', 'block');
});
$(document).on('click', $('.closeModal'), function (event) {
// close function
});
});

How do I set the active state for image buttons instead of just focused state with my current code?

First time posting here and new to programming with just 3 days of experience.
I'm having some trouble getting my default button to be active instead of just focused. I've attempted to read other posts about this, but my lack of experience makes it hard for me to put 2 and 2 together.
The page is going into squarespace so I'm trying to do it all in one code block. I don't want the buttons to deactivate when the user clicks on other parts of the website, which it currently happens. (Even if they click on blank areas).
Thank you very much for any advice you can give me.
/* Change Button Size/Border/BG Color And Align To Middle */
.services {
width: 210px;
height: 135px;
padding: 0px;
border: 0px;
outline: 0px;
cursor: pointer;
color: #999999;
font-size: 20px;
text-align: center;
background: url("https://i.ibb.co/G5mn9nY/Services-Buttons-Combined-Big.png") no-repeat;
/* As all link share the same background-image */
}
/* Set Mouseover Button Text and Current/Active Color */
.services:focus,
.services:hover,
.services:active {
color: black;
}
/* Position Button Text*/
divtext {
position: relative;
top: 90px;
}
/* Div Wrapper to format button areas. */
.servicesbuttonwrapper {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
/* Div Wrapper to format revealed description text. */
.servicestextwrapper {
text-align: left;
margin-left: 100px;
margin-right: 32px;
top: 50px;
position: relative;
}
/* Change Image rollover position depending On Focus. */
.assets {
background-position: 0 0;
}
.assets:focus,
.assets:hover,
.assets:active {
background-position: 0 -135px;
}
.viz {
background-position: 0 -270px;
}
.viz:focus,
.viz:hover,
.viz:active {
background-position: 0 -405px;
}
.software {
background-position: 0 -540px;
}
.software:focus,
.software:hover,
.software:active {
background-position: 0 -675px;
}
.more {
background-position: 0 -810px;
}
.more:focus,
.more:hover,
.more:active {
background-position: 0 -945px;
}
/* Hides intitial button descriptions. */
#assets,
#viz,
#software,
#more {
display: none;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Services</title>
</head>
<body>
<!--Div wrapper so we can format positioning of buttons in CSS-->
<div class="servicesbuttonwrapper">
<!--Base buttons plus javascript functions for click behavior. This used to be <button class> instead of <a href> but I read somewhere this is better... seems to work ok.-->
<a href="javascript:void(0)" id="defaultstate" onclick="show('software');" class="services software">
<divtext>INTERACTIVE SOFTWARE</divtext>
</a>
<a href="javascript:void(0)" onclick="show('assets');" class="services assets">
<divtext>3D ASSET CREATION</divtext>
</a>
<a href="javascript:void(0)" onclick="show('viz');" class="services viz">
<divtext>3D VISUALIZATION</divtext>
</a>
<a href="javascript:void(0)" onclick="show('more');" class="services more">
<divtext>IMAGE CREATION</divtext>
</a>
</div>
<!--Base description text.-->
<div class="servicestextwrapper">
<div id="assets">3D Assets Description.</div>
<div id="viz">3D Visualization Description.</div>
<div id="software">Interactive Software Description.</div>
<div id="more">And More Description.</div>
</div>
<!--Javascript function to hide/show elements based on button press.-->
<script type="text/javascript">
function show(elementId) {
document.getElementById("assets").style.display = "none";
document.getElementById("viz").style.display = "none";
document.getElementById("software").style.display = "none";
document.getElementById("more").style.display = "none";
document.getElementById(elementId).style.display = "block";
}
</script>
<!--Javascript function to set first button as focus.-->
<script>
window.onload = function() {
document.getElementById("defaultstate").click();
};
var linkToFocus = document.getElementById('defaultstate');
linkToFocus.focus();
</script>
</body>
</html>

Welcome to Stack Overflow.
So first thing to note, the :active pseudo element only applies when the user clicks (mouse-down) on something. You can see it here
The most common method is to apply the css class "active", and have a .active selector on whatever element you want to style.
Right now you have the buttons affected by hover and focus, so when the user clicks outside the button it loses focus.
You can solve this by changing a bit of CSS and javascript. The edited portions are marked by /* EDIT */
I would not recommend the last line where I exploit the fact that your function passes in the element ID, and that element ID matches the class of the button that was used to select it. A better way would to have show take the Javascript event as argument, then use the event.target to get the a tag clicked on, then use a getElementById on something like a data-target="more" attribute. This will allow you to change the CSS class without coupling the class to the implementation of the Javascript
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Services</title>
</head>
<style>/* Change Button Size/Border/BG Color And Align To Middle */
.services {
width:210px;
height:135px;
padding: 0px;
border:0px;
outline:0px;
cursor: pointer;
color: #999999;
font-size: 20px;
text-align: center;
background: url("https://i.ibb.co/G5mn9nY/Services-Buttons-Combined-Big.png") no-repeat; /* As all link share the same background-image */
}
/* Set Mouseover Button Text and Current/Active Color */
/* EDIT */
.services:focus, .services:hover, .services.active {
color: black;
}
/* Position Button Text*/
divtext {
position: relative;
top: 90px;
}
/* Div Wrapper to format button areas. */
.servicesbuttonwrapper {
display: flex;
flex-flow: row wrap;
justify-content: space-around;
}
/* Div Wrapper to format revealed description text. */
.servicestextwrapper {
text-align: left;
margin-left: 100px;
margin-right: 32px;
top: 50px;
position: relative;
}
/* Change Image rollover position depending On Focus. */
.assets {
background-position: 0 0;
}
/* EDIT */
.assets:focus, .assets:hover, .assets.active {
background-position: 0 -135px;
}
.viz {
background-position: 0 -270px;
}
/* EDIT */
.viz:focus, .viz:hover, .viz.active {
background-position: 0 -405px;
}
.software {
background-position: 0 -540px;
}
/* EDIT */
.software:focus, .software:hover, .software.active {
background-position: 0 -675px;
}
.more {
background-position: 0 -810px;
}
/* EDIT */
.more:focus, .more:hover, .more.active {
background-position: 0 -945px;
}
/* Hides intitial button descriptions. */
#assets, #viz, #software, #more {
display: none;
}
</style>
<body>
<!--Div wrapper so we can format positioning of buttons in CSS-->
<div class="servicesbuttonwrapper">
<!--Base buttons plus javascript functions for click behavior. This used to be <button class> instead of <a href> but I read somewhere this is better... seems to work ok.-->
<divtext>INTERACTIVE SOFTWARE</divtext>
<divtext>3D ASSET CREATION</divtext>
<divtext>3D VISUALIZATION</divtext>
<divtext>IMAGE CREATION</divtext>
</div>
<!--Base description text.-->
<div class="servicestextwrapper">
<div id="assets">3D Assets Description.</div>
<div id="viz">3D Visualization Description.</div>
<div id="software">Interactive Software Description.</div>
<div id="more">And More Description.</div>
</div>
<!--Javascript function to hide/show elements based on button press.-->
<script type="text/javascript">
/* EDIT */
function show(elementId) {
document.getElementById("assets").style.display = "none";
document.getElementById("viz").style.display = "none";
document.getElementById("software").style.display = "none";
document.getElementById("more").style.display = "none";
document.getElementById(elementId).style.display = "block";
// get a list of the buttons with ".services" class
const buttons = document.querySelectorAll(".services");
for(let button of buttons) {
// remove ".active" class
button.classList.remove("active");
}
// add the active class to element button specified by argument
document.querySelector("." + elementId).classList.add("active");
}
</script>
<!--Javascript function to set first button as focus.-->
<script>
window.onload=function(){
document.getElementById("defaultstate").click();
};
var linkToFocus = document.getElementById('defaultstate');
linkToFocus.focus();
</script>
</body>
</html>

Javascript: Iterate through ID -> cannot set property 'onclick' of null javascript

I'm trying to code a modal with a slideshow. It works fine for the first picture when I type '1' instead of 'i' in the for loop. When I use 'i' in the for loop I get the error message "cannot set property 'onclick' of null javascript"
I know that this is some very beginner stuff... but I'm sitting here now for hours to find a solution...
Thank you for your help!
window.onload = function() {
var modal;
var prefixModal = 'myModal';
var img;
var prefixmyImg = 'myImg';
var modalImg;
var prefixmodalImg = 'img';
for (var i = 0; i <= 6; i++) {
modal = document.getElementById(prefixModal + i);
img = document.getElementById(prefixmyImg + i);
modalImg = document.getElementById(prefixmodalImg + i);
}
var closey = document.getElementsByClassName('close');
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
};
.container_slideshow {
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
display: block;
height: 8rem;
margin-top: 1rem;
min-width: 100%;
}
.content_slideshow {
display: inline-block;
height: 100%;
width: 40vw;
background-color: darkgray;
margin-left: 0;
margin-right: .5rem;
}
.content_slideshow:last-child {
margin: 0;
}
}
/* Style the Image Used to Trigger the Modal */
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 50%; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: scroll; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(57,61,69,0.6); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
animation-name: zoom;
animation-duration: 0.6s;
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close2 {
display: none;
position: absolute;
color: #f1f1f1;
transition: 0.3s;
width: 100%;
height: 100%;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
HTML:
<div class="container_slideshow">
<div class="content_slideshow">
<!-- Trigger the Modal -->
<img class="slider" id="myImg1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/SilburyHill_gobeirne.jpg/1200px-SilburyHill_gobeirne.jpg" alt="">
<!-- The Modal -->
<a class="close">
<div id="myModal1" class="modal">
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img1">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
</a>
</div>
<div class="content_slideshow">
<!-- Trigger the Modal -->
<img class="slider" id="myImg2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/SilburyHill_gobeirne.jpg/1200px-SilburyHill_gobeirne.jpg" alt="">
<!-- The Modal -->
<a class="close">
<div id="myModal2" class="modal">
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img2">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
</a>
</div>
</div>

The reason is for (var i = 0; i <= 6; i++) {. The count starts from 0 and it will try to find a dom element with id myModal6.
Change the for loop to
for (var i = 0; i < 6; i++) {

After a very rough look I'd say the DOM node with id "myModal0" doesn't exist (which is most likely true for your other prefixes as well it just happens to be the first you try to get the DOM node of.
Keep in mind that your loop starts at 0 not 1.
Also keep in mind that each node you are trying to assign must exist beforehand! So you either have to have each element in your html file or create them on the fly with JS.
If you wanted to start at 1 you could do:
for (let i=1; i<x; i++) {
// do smth ...
}

It looks like this code:
for (var i = 0; i <= 6; i++) {
modal = document.getElementById(prefixModal + i);
img = document.getElementById(prefixmyImg + i);
modalImg = document.getElementById(prefixmodalImg + i);
// NOTE: put the code that does something IN HERE,
// right now it's outside the loop
}
is iterating through all elements in the HTML document that have ids from "myModal0" through "myModal6", and the same for the other two prefixes "myImg" and "img".
I don't see all these elements in your HTML document. I only see "myModal1" and "myModal2" (as well as elements 1 and 2 of "myImg" and "img".
It looks like you either need to reduce the size of the loop so it only iterates through the elements you actually have, or you need to fill out the rest of the HTML and put in the rest of the elements (all the way from 0 through (and including) 6.
Oh and there's another thing to remember here too, none of your actual code that is causing the error, is inside the loop. All you do in the loop is setting the names of the variables. So the later code is always using "myModal6", because that is the last thing the loop sets the names to.

toggle on hover and click not working properly

I've created this little toggle, since i"m starting with javascript, but it's not working as I would like to. The brown box should appear and disappear both on hover and click (for ipad mostly).
Right now it's fine for hover, but not for clicking on ipad, it just appears once, and thats it.
I think it's also getting confused with my sharing icons.
Any help is appreciated.
jsfiddle
function toggleDisplay (toBlock, toNone) {
document.getElementById(toBlock).style.display = 'block';
document.getElementById(toNone).style.display = 'none';
}
#toggle_hero
{
float:left;
}
.leftHalf
{
display: block;
height: 100%;
width: 50%;
float: left;
position: absolute;
z-index: 2;
}
.leftHalf div
{
display:none;
}
.leftHalf:hover
{
}
.leftHalf:hover div
{
display:block;
width: 100%;
height: 23%;
overflow: auto;
margin: auto;
position: absolute;
left: 0;
bottom: 70px;
right: 0;
background: white;
color: #fff;
background-color:rgba(207,167,80,0.7);
padding:10px;
font-size: 0.8em;
font-weight: 200;
}
.leftHalf:hover div h3
{
font-weight: 500;
float:left;
}
.leftHalf:hover div span{
float:right;
text-align: center;
padding-bottom:5px;
color:black;
}
hover (on a pc) or click me (on ipad)
<div id="toggle_hero" onclick="toggleDisplay('comment', 'toggle_hero')">
<div class="leftHalf clearfix" id="comment">
<div>
<span>
<a target="_blank" class="icon-facebook fa fa-facebook" href="https://www.facebook.com/sharer/sharer.php?u=http://google.com" onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">facebook </a>
<a target="_blank" href="http://twitter.com/share?url=http://google.com" class="fa fa-twitter"> twitter</a>
</span>
<h3>this text should appear both on hover and click (for ipad)</h3>
</div>
</div>
</div>

You could just create an event listener that captures the current toggled state in a var.
var toggle = false;
var myDiv = document.getElementById('myDiv');
myDiv.addEventListener('click', function() {
if (toggle === false) {
this.getElementsByTagName('p')[0].style.display = 'none';
toggle = true;
} else {
this.getElementsByTagName('p')[0].style.display = 'initial';
toggle = false;
}
});
http://jsfiddle.net/scott88/bLkdt6mc/
You can add another listener for the 'mouseover'.

Your HTML structure is a bit weird. The text that you want to hover/click is actually outside of the target area for your click event. It happens to work for me locally because of the absolute positioning, but I wouldn't be surprised if the iPad browser behaves differently.
I would suggest defining a clear target for what is to be clicked/hovered, apply a class on click/hover, and handle the rest in CSS. I put together a sample of what I envision. You can remove the mouseenter and mouseleave events to simulate on a computer how it works with the touch events. I'm not sure exactly how you want it to behave, but hopefully this is enough to get you started.
function setHover(isHover) {
var element = document.getElementById("toggle_hero");
if (isHover)
element.className = "hovered";
else
element.className = "";
}
function toggleHover() {
var element = document.getElementById("toggle_hero");
setHover(element.className === "");
}
#toggle_hero {
float:left;
}
#comment {
display:none;
width: 100%;
height: 23%;
overflow: auto;
margin: auto;
position: absolute;
left: 0;
right: 0;
background: white;
color: #fff;
background-color:rgba(207,167,80,0.7);
padding:10px;
font-size: 0.8em;
font-weight: 200;
}
.hovered #comment {
display: block;
}
<div id="toggle_hero" onclick="toggleHover()" onmouseenter="setHover(true);" onmouseleave="setHover(false);">
hover (on a pc) or click me (on ipad)
<div id="comment">
<div>
<span>
<a target="_blank" class="icon-facebook fa fa-facebook" href="https://www.facebook.com/sharer/sharer.php?u=http://google.com" onclick="window.open(this.href, 'facebook-share','width=580,height=296');return false;">facebook </a>
<a target="_blank" href="http://twitter.com/share?url=http://google.com" class="fa fa-twitter"> twitter</a>
</span>
<h3>this text should appear both on hover and click (for ipad)</h3>
</div>
</div>
</div>

Show/hide timeout event - unable to trigger click after amount of time

I'm attempting the following:
Have a Show/Hide Event that is supposed to trigger after a second when the page loads. If the user clicks on the show/hide icon then it doesn't automatically trigger the timeout function.
When the Show/Hide Div appears it does the following:
- expand the div to be larger
- displays hidden content
- change out the icon
I have almost all of the functions working, except for the setTimeOut to work. I managed to get it working on another page, but for some reason it's not working in this one.
Update: The timeout function correctly works but as soon as it opens up, it immediately closes instead of remaining open.
Please advise!
Here's the code that I currently have:
JQuery:
setTimeout(function (f) {
$('.show_hide_aboutus').click();
}, 1000);
//For About Us Show/hide
$('.show_hide_aboutus').click(function(f){
f.preventDefault();
clearTimeout(time); // cancels timeout
$(".slidingDiv").slideToggle('fast',function() {
$('.overlayAbout').toggleClass('animate', $(this).is(':visible'));
if ( $('.animate').is(':visible') ){ // Open
$('.showhideMenu').animate({ "margin-left": "-13px"}, 'fast');
$('.showhideMenu').fadeIn('slow');
$('.showWork').hide();
$('.aboutContent').fadeIn('slow');
$('.ourworkContent').fadeIn('slow');
$('.overlayAbout').animate({ width: '29.5%', height: '100%'}, 'fast'); /* */
$('.infoicon').toggleClass('infoicon arrow-left'); /* hides the up arrow */
$('.arrow-right-down').toggleClass('arrow-right-down arrow-right'); /* hides the up arrow */
} else { // Close
$('.overlayAbout').animate({ width: 69, height: 69}, 'fast'); /* */
$('.ourworkContent').hide();
$('.showWork').show();
$('.aboutContent').hide();
$('.arrow-left').toggleClass('arrow-left infoicon'); /* hides the up arrow */
$('.arrow-right').toggleClass('arrow-right arrow-right-down'); /* hides the up arrow */
$('.showhideMenu').hide();
}
}); /* slidingDiv Toggle */
}); /* show_hide click function */
HTML:
<div class="overlayAbout">
<a href="#" class="show_hide_aboutus">
<div class="infoicon"> </div>
<div class="arrow-right-down"> </div>
<div class="showWork">
Back to <br/> about us
</div> <!--- showWork div link -->
</a> <!-- show_hide -->
<div class="slidingDiv">
<div class="showhideMenu">
Menu Stuff
</div>
<div class="large-9 columns margintop-small aboutContent">
<div class="scrolling">
Test setwlewjlj wlerjwlerj
</div>
</div>
</div> <!-- large-9 columns margintop -->
</div> <!--slidingDiv -->
</div> <!-- overlayAbout -->
CSS:
.slidingDiv { color: #4F4E4E; display: none;}
.overlayAbout{
position: absolute;
z-index: 1;
width: 69px;
height: 69px;
background-color: white;
color: #4F4E4E;
opacity: 0.8;
filter:alpha(opacity=95);
padding: 10px 15px;
line-height: 20px;
border: 1px solid #000;
}
.showhideMenu{ display: none; }
.showWork{
line-height: 15px;
width: 70px;
margin: 0px 0 0 -15px;
text-align: center;
}
.showWork a{ font-size: 9px; color: #334444; line-height:11px; }
.aboutContent{ display: none; }

There is a typo in your timeout function
$('show_hide_aboutus').click();
should be
$('.show_hide_aboutus').click();