How can I get all my other .open-img elements to open my modal?
Eventually I want to trigger modals with the image inside, I'm sure I should be using .this, but cant get it to work.
Codepen: http://codepen.io/Middi/pen/EWxKLZ
Javascript
var modal = document.querySelector(".modal");
var modalBg = document.querySelector(".modal-bg");
var closeButton = document.querySelector(".close-button");
var openImg = document.querySelector(".open-img");
closeButton.addEventListener("click", function() {
modal.classList.toggle("closed");
modalBg.classList.toggle("closed");
});
this.openImg.addEventListener("click", function() {
modal.classList.toggle("closed");
modalBg.classList.toggle("closed");
});
Thanks in advance.
You need to insert eventListener on your each open-img element.
for (var i = 0; i < openImg.length; i++) {
openImg[i].addEventListener('click', function(){
modal.classList.toggle("closed");
modalBg.classList.toggle("closed");
})
}
or use ES6 feature Array#from:
Array.from(openImg).forEach(v => v.addEventListener('click', function(){
modal.classList.toggle("closed");
modalBg.classList.toggle("closed");
}));
Codepen link
Here's a solution based on your code. It's not perfect but it should give you a good starting point:
// get all the matching elements
var openImg = document.querySelectorAll(".open-img");
// iterate over them and add the handler for each of them
openImg.forEach(function (image) {
image.addEventListener("click", function() {
// append the image to the modal
document.querySelector('.modal-main').appendChild(image.cloneNode(true))
modal.classList.toggle("closed");
modalBg.classList.toggle("closed");
});
});
Related
I have these src errors that I want to remove after the page loads. All the things have been marked with an underline or an arrow. I have tried this particular code 👇, but nothing seems to work. can you help me pls?
var ele = document.querySelectorAll('[src]')
Array.from(ele).forEach(function (item) {
item.addEventListener(
'error',
function (e) {
item.remove()
},
true
)
})
window.onload = function () {
console.clear()
}
One workaround can be this by overriding img onerror.
(function() {
var allimgs = document.images;
for (var i = 0; i < allimgs.length; i++) {
allimgs[i].onerror = function() {
this.style.visibility = "hidden"; //if you want hide
this.remove(); //if you want to remove img tag
console.clear(); //clear error from console
}
}
})();
So I contacted their support and it was an issue at their back-end. It is now fixed. Thanks.
I've got an image modal that will work when I bind an event handler to an Id, but not when I apply it to a class to have it fire off of any image clicked.
Here is a portion of the html
<div class="column">
<img src="images/journalism-images/j1.jpg" class="grid-img" id="myImage">
<img src="images/journalism-images/j2.jpg" class="grid-img">
</div>
Here is my Javascript below
var modal = document.getElementById('myModal');
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var images = document.getElementById("myImage");
var close = document.querySelector(".image-modal-close");
function changeImage() {
img.src = modalImg.src;
}
images.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
changeImage();
}
so basically what is happening is whatever image I put the ID of #myImage on will fire the modal with the correct image src, but I can't fire the modal when I use something like-
document.querySelectorAll(".grid-img");
can anyone help me out?
var images = document.querySelectorAll(".grid-img");
for ( var index = 0; index < images.length; index ++ ) {
images[index].addEventListener("click",function(e) {
// Do whatever you need.
},false);
}
Or
var $images = $( '.grid-img' );
$images.on( 'click', function(e) {
// Do whatever you need.
});
Remember that querySelectorAll returns set of elements.
Use jquery for this:
$(".grid-img").on("click", function() {
//logic
}
QuerySelectorAll will return a set of elements.
If you want javascript:
document.getElementsByClassName("grid-img").addEventListener("click",function(e) {
//Your logic
}
You can also watch the Example of getElementsByClassName
Example of getElementsByClassBame:
var element = document.getElementsByClassName("grid-img");
element[0].addEventListener("click",function(e) {
//Your logic
}
element[1].addEventListener("click",function(e) {
//Your logic
}
In the mobile version on my form appears 'Close' button.
Unfortunately, it does not work. I see a normal button, but when I click there is no reaction. In the javascript I load the file form-with-button.html to render form content in my all .html files.
<div id="form-with-button">
</div>
and use javascript to show and close.
//Onload show header and footer content
$("#header").load('header.html', function(){
$('#nav').affix({
offset: {top: $('#header').height()-$('#nav').height()}
});
});
$("#footer").load('footer.html');
$("#contact").load('footer-contact.html');
$("#form-with-button").load('form-with-button.html');
// Sticky Buttons Show Hide
$("#fix-quote, #fix-contact").on("click", function() {
var body = $("body");
var openPos= ["",""];
var id = $(this).attr("id");
var content = $("#"+id+"-content");
var property = (content.attr("class").toString().indexOf("left") > -1)? "left": "right";
if (!body.hasClass("bd_"+id)) {
openPos= [0,380]
var ele = $(this);
body.addClass("bd_"+id)
setTimeout(function(){
body.on("click.fix",function(ev) {
if($(ev.target).closest(".fixed-container").length == 0){
$(ele).click()
}
});
},10);
} else {
body.removeClass("bd_"+id).off("click.fix");
}
content.css("top","").show().css(property, openPos[0]);
$(this).css(property, openPos[1]);
});
// Mobile Requests Showhide
$("#fix-quote-mob, #fix-contact-mob").on("click", function() {
var id = $(this).attr("id").slice(0,-4);
var content = $("#"+id+"-content");
content.show()
setTimeout(function(){
content.css("top",0)
},10)
});
$(".fix-contact-close").on("click", function() {
var content = $(this).closest(".fixed-container");
content.css("top","").delay(400).hide(0);
});
Please help, why my button does not work?
You are trying to add a handler to an element created in a dynamic way, so you need to refactor your code in order to make it work:
$(document).on("click", ".fix-contact-close", function() {
var content = $(this).closest(".fixed-container");
content.css("top","").delay(400).hide(0);
});
Thanks in advance for any help I can get with this one. I'm working on a project which requires me to create buttons out of select options. The buttons are being created without issue, but I can't figure out for the life of me why the onclick trigger isn't firing. I've recoded this in jQuery too and am having the same issue. I'll post both.
JS (with a bit of JS):
var buttonObj = {
addButtons: function() {
$('select').each( function() {
// Check that buttons don't already exist
var selectBox = $(this);
if(!selectBox.parent().next().hasClass('button-group')) {
// Create button div
var buttonGroup = document.createElement('div');
buttonGroup.className = 'button-group';
// Check which type of button to create
var buttonLen = selectBox.children().length;
if(buttonLen > 3) {
// Long button classes
var buttonClass = 'decision-button long';
} else {
// Short button classes
var buttonClass = 'decision-button';
}
selectBox.parent().parent().append(buttonGroup);
// Create Buttons
for(var i = 1; i < buttonLen; i++) {
var newButton = document.createElement('button');
newButton.className = buttonClass;
newButton.type = "button";
newButton.innerHTML = selectBox.children().eq(i).html();
buttonGroup.appendChild(newButton);
newButton.onclick = function() {
alert($(this));
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
}
}
} else {
console.log('do nothing');
}
});
}
}
buttonObj.addButtons();
The Answer
I wasn't checking for $(document).ready() because I was lead to believe that if you're loading the JS at the bottom of the DOM, it is unnecessary. In this case, it was totally necessary.
Thanks to all those who helped.
I think jQuery got an easy way to bind dynamically elements.
jQuery provides .on() (or .live() for older version) for this.
Example:
jQuery(document).ready(function(){
var btnClass=".someClass";
$(document).on('click',btnClass,function(e){
alert($(this));
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
});
});
I am trying to code my own image gallery using html css jquery. I have a modal window to show the clicked in images. Inside my modal window I have a previous and next button.
My question is how can i show the previous images or next images when someone click that button.
Here's my jsFiddle
jquery code i am using to show clicked in images.
$(function(){
$('.gallery a').click(function(evt) {
evt.preventDefault( );
var imgPath = $(this).attr('href');
$('.gallery-overlay').show()
.find('.gallery-image').attr('src',imgPath);
return false;
});
});
Add this to your jQuery.
Declare a variable current image in your function and keep current image saved in that variable. Update the variable whenever current image is changed.
Updated jsfiddle
Click on the second image in the images and see the prev and next image then.
$('.gallery-control-previous').click(function(){
var imgPath = current_img.prev().attr('href');
current_img = current_img.prev();
$('.gallery-overlay').show().find('.gallery-image').attr('src',imgPath);
});
$('.gallery-control-next').click(function(){
var imgPath = current_img.next().attr('href');
current_img = current_img.next();
$('.gallery-overlay').show().find('.gallery-image').attr('src',imgPath);
});
If you have understood this answer, add checks to the code showing next, prev elemments only when they exist.
You can find how to do that,
here..
Updated.
Get the first child of next row, and pass that.
$('.gallery-control-next').click(function(){
if(current_img.next().length){
current_img = current_img.next();
}else{
current_img = current_img.parents(".row").next(".row").find("a:first");
}
var imgPath = current_img.attr('href');
$('.gallery-overlay').show().find('.gallery-image').attr('src',imgPath);
});
I have added img_no to each a tag to identify the current active image and get next or previous image
Working Demo
$(function () {
$('.gallery a').click(function (evt) {
evt.preventDefault();
var imgPath = $(this).attr('href');
var img_no = $(this).attr('img_no');
$('.gallery-overlay').show()
.find('.gallery-image').attr('src', imgPath).attr('img_no', img_no);
return false;
});
});
i = 1;
$('.row a img').each(function () {
$(this).attr('img_no', i);
$(this).parents('a').attr('img_no', i);
i++;
});
images_length = i - 1;
console.log(images_length);
$('.gallery-control-next').click(function () {
var img_no = $(this).parent().parent().find('.gallery-image').attr('img_no');
img_no++;
if (img_no > images_length) {
img_no = 1;
}
$('.row a').each(function () {
if ($(this).attr('img_no') == img_no) {
imgPath = $(this).attr('href');
}
});
$('.gallery-imagebox img').attr('src', imgPath).attr('img_no', img_no);
});
$('.gallery-control-previous').click(function(){
var img_no = $(this).parent().parent().find('.gallery-image').attr('img_no');
img_no--;
if (img_no <= 0) {
img_no = images_length;
}
$('.row a').each(function () {
if ($(this).attr('img_no') == img_no) {
imgPath = $(this).attr('href');
}
});
$('.gallery-imagebox img').attr('src', imgPath).attr('img_no', img_no);
});