I have a number of images and captions on a page, set up in <figure><img><figcaption> groups. I'd like to use JavaScript (or jQuery) to grab the ID of the figcaption and add an 'aria-labelledby' attribute to the parent <figure>.
For example, I have the following (simplified):
<figure id="figure1">
<img src="x.jpg">
<figcaption id="caption1">Sample</figcaption>
</figure>
<figure id="figure2">
<img src="y.jpg">
<figcaption id="caption2">Sample</figcaption>
</figure>
How can I loop through each element and add the appropriate 'aria-labelledby' attribute, e.g., aria-labelledby="caption1"?
I tried this but getting an undefined function error:
$('figure').attr('aria-labelledby', function() {
$(this).find('figcaption').attr('id');
})
Any help appreciated.
Thanks
You need to return that value, otherwise you're not doing anything with it.
$('figure').attr('aria-labelledby', function() {
return $(this).find('figcaption').attr('id');
})
Demo
$('figure').attr('aria-labelledby', function() {
return $(this).find('figcaption').attr('id');
})
[aria-labelledby] {
color: #f00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<figure id="figure1">
<img src="x.jpg">
<figcaption id="caption1">Sample</figcaption>
</figure>
<figure id="figure2">
<img src="y.jpg">
<figcaption id="caption2">Sample</figcaption>
</figure>
Related
Here is my HTML:
<img class="image" src="" />
<img class="image" src="" />
<img class="image" src="" />
<button onclick="changeImages()">Change the images</button>
Here is my JavaScript:
function changeImages() {
document.getElementsByClassName("image").setAttribute("src", "images/image.png");
}
How can I make my code so that when I click the button, all those images change?
Thanks
getElementsByClassName() returns a collection of elements which doesn't have methods for applying attributes. You need to iterate through the collection and apply the attributes you want to each of its items. Something like:
document.getElementsByClassName("image").forEach(function(image) {
image.setAttribute("src", "images/image.png");
});
I have multiple containers with content blocks within them. I've got two a functions that activate by clicking on a button left or right of the container which will scroll it left or right. These two functions work fine for the first container but since I've got four more of these containers that I want to be able to scroll there has to be a simpler way to write these functions to be compatible with all five containers.
I could always copy and paste the same code four more times but that makes for very ugly and redundant code because the only thing that changes is the class of the container that has to be scrolled.
I'm hoping some more experienced front-enders would be able to help me rewrite these functions. I'm not as advanced of a coder so I'm struggeling coming up with a good solution.
Also another problem is that the functions that make the scrolling possible aren't entirely my own code. I found most of it online somewhere and only altered it slightly to make it work for my website. So I'm not exactly sure how all of these statements work, only roughly.
As a possible solution I thought maybe have an array that stores the class names of the containers and have them be pasted in where I do .querySelector to get the class. But sadly I couldn't get that to work the way I wanted it to.
<!-- example code -->
<div>
<h1>Container title</h1>
<div>
<button id="scrollLeft1" type="button"><</button>
<div class="container">
<figure>
<img src="some image" alt="">
<figcaption>Test 1</figcaption>
</figure>
<figure>
<img src="some image" alt="">
<figcaption>Test 2</figcaption>
</figure>
<figure>
<img src="some image" alt="">
<figcaption>Test 3</figcaption>
</figure>
</div>
<button id="scrollRight1" type="button">></button>
</div>
</div>
<div>
<h1>Container title 2</h1>
<div>
<button id="scrollLeft2" type="button"><</button>
<div class="container">
<figure>
<img src="some image" alt="">
<figcaption>Test 1</figcaption>
</figure>
<figure>
<img src="some image" alt="">
<figcaption>Test 2</figcaption>
</figure>
<figure>
<img src="some image" alt="">
<figcaption>Test 3</figcaption>
</figure>
</div>
<button id="scrollRight2" type="button">></button>
</div>
</div>
var buttonOne = document.querySelector("#scrollLeft1");
var buttonTwo = document.querySelector("#scrollRight1");
var buttonThree = document.querySelector("#scrollLeft2");
var buttonFour = document.querySelector("#scrollRight2");
function scrollRight() {
var container = document.querySelector(".container");
scrollAmount = 0;
var slideTimer = setInterval(function(){
container.scrollLeft += 10;
scrollAmount += 10;
if(scrollAmount >= 700){
window.clearInterval(slideTimer);
}
}, 5);
};
function scrollLeft() {
var container = document.querySelector(".container");
scrollAmount = 0;
var slideTimer = setInterval(function(){
container.scrollLeft -= 10;
scrollAmount += 10;
if(scrollAmount >= 700){
window.clearInterval(slideTimer);
}
}, 5);
};
buttonOne.addEventListener("click", scrollLeft);
buttonTwo.addEventListener("click", scrollRight);
buttonThree.addEventListener("click", scrollLeft);
buttonFour.addEventListener("click", scrollRight);
I have created a version of your code which should be reusable between the different containers and also left some comments for better understanding of what is going on.
// create an array with all buttons that scroll left
var leftScrollButtons = document.querySelectorAll("#scrollLeft1, #scrollLeft2, #other-btn-id, .other-btn-class");
// create another array with all buttons that scroll right
var rightScrollButtons = document.querySelectorAll("#scrollRight1, #scrollRight2, #other-btn-id, .other-btn-class");
// create a default configuration object
var configDefault = {
direction: 1, // use 1 for right, -1 for left
amount: 10,
interval: 5,
threshold: 700
}
// scrolling function will use the configuration object for the information that it needs
function horizontalScroll(configObj) {
var container = document.querySelector(".container");
scrollAmount = 0;
var slideTimer = setInterval(function(){
container.scrollLeft += configObj.amount * configObj.direction;
scrollAmount += configObj.amount;
if(scrollAmount >= configObj.threshold){
window.clearInterval(slideTimer);
}
}, configObj.interval);
}
// will iterate over every item of the array (all buttons) and add a click event listener to them
leftScrollButtons.forEach(button => button.addEventListener("click", function(ev) {
var container = ev.currentTarget.parentElement.querySelector('.container');
// from the default configuration object, overrite what you need, in this case, the direction property
var configLeft = Object.assign({}, configDefault, {direction: -1, container: container});
horizontalScroll(configLeft);
debug("Scrolled left", container); // used only for the demo
}));
// will iterate over every item of the array (all buttons) and add a click event listener to them
rightScrollButtons.forEach(button => button.addEventListener("click", function(ev) {
var container = ev.currentTarget.parentElement.querySelector('.container');
// from the default configuration object, overrite what you need, in this case, no need to overrite anything here
var configRight = Object.assign({}, configDefault, {container: container});
horizontalScroll(configRight);
debug("Scrolled right", container); // used only for the demo
}));
// only used for the demo
function debug(action, container) {
var actionSpan = document.querySelector('.action-span');
actionSpan.innerText = action;
var containerSpan = document.querySelector('.container-span');
containerSpan.innerText = container.parentElement.previousElementSibling.innerText;
}
<!-- to test the demo -->
<p>Last action: <span class="action-span"></span></p>
<p>Container: <span class="container-span"></span></p>
<!-- example code -->
<div>
<h1>Container title</h1>
<div>
<button id="scrollLeft1" type="button"><</button>
<div class="container">
<figure>
<img src="some image" alt="">
<figcaption>Test 1</figcaption>
</figure>
<figure>
<img src="some image" alt="">
<figcaption>Test 2</figcaption>
</figure>
<figure>
<img src="some image" alt="">
<figcaption>Test 3</figcaption>
</figure>
</div>
<button id="scrollRight1" type="button">></button>
</div>
</div>
<div>
<h1>Container title 2</h1>
<div>
<button id="scrollLeft2" type="button"><</button>
<div class="container">
<figure>
<img src="some image" alt="">
<figcaption>Test 1</figcaption>
</figure>
<figure>
<img src="some image" alt="">
<figcaption>Test 2</figcaption>
</figure>
<figure>
<img src="some image" alt="">
<figcaption>Test 3</figcaption>
</figure>
</div>
<button id="scrollRight2" type="button">></button>
</div>
</div>
I started learning jQuery and wanted to make some work on the following structure.
<figure class="blog_image_wrap" style="text-align: center">
<img class="text-center" src="https://ahmcho.com/storage/app/uploads/public/5a6/5d4/672/5a65d467293cd550396758.jpg" style="width:50%;">
<figcaption class="blog_image_wrap">
Gary Oldman
</figcaption>
</figure>
There are multiple <figure> tags in one page and I want to extract the text of corresponding <figcaption> and pass it as a value of data-caption attribute for <a> tag. For all '' elements inside '' elements.
I have the following code but it passes all text values of <figcaption> texts as one for all <a> elements :
$(document).ready(function()
{
$('figure').each(function()
{
$("figure>a").attr('data-caption', $("figure").find('figcaption').text());
});
$("figure>a").attr("data-fancybox" , "test");
});
I would appreciate if someone would point me what am I doing wrong.
Try to use this to target the current element in each iteration of each(). Then find the specific a from that element to set the attribute. Try the following way:
$(document).ready(function() {
$('figure').each(function() {
$(this).find('a').attr('data-caption', $(this).find('figcaption').text());
$(this).find('a').attr("data-fancybox" , "test");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure class="blog_image_wrap" style="text-align: center">
<img class="text-center" src="https://ahmcho.com/storage/app/uploads/public/5a6/5d4/672/5a65d467293cd550396758.jpg" style="width:50%;">
<figcaption class="blog_image_wrap">
Gary Oldman
</figcaption>
</figure>
Since you iterating through figure, you need to find the a and figcaption on current iteration. To find the current figure object you can use $(this). So, to find the a and figcatption you can have following code:
$(document).ready(function()
{
$('figure').each(function()
{
$(this).find("a").attr('data-caption', $(this).find('figcaption').text());
});
});
I have this node.
<figure class="wide">
<a href="https://www.example.com/image_HDR.jpg" target="_blank">
<img class="exif-reader" src="https://cdn.example.com/content_big_20171008_112106_HDR.jpg"">
</a>
<figcaption>
<div class="items"> </div>
</figcaption>
</figure>
I'm starting from the image using
var img = $("img[src$='value.FileName']");
I need to replace the HTML inside the .items div but I cannot find how to get it. In the page I have a lot of nodes with this structure. I need to select the .items div that is inside the same node of the img
With css it's hard, but jquery makes it fairly easy I think:
var items = $("img[src$='value.FileName']").closest('figure').find('.items');
items.html('<p>blabla</p>');
Here is a snippet example using your code:
$(function(){
var $img = $(".exif-reader");
var $itemsDiv = $img.closest(".wide").find('.items');
$itemsDiv.html("enter html here")
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure class="wide">
<a href="https://www.example.com/image_HDR.jpg" target="_blank">
<img class="exif-reader" src="https://cdn.example.com/content_big_20171008_112106_HDR.jpg"">
</a>
<figcaption>
<div class="items"> </div>
</figcaption>
</figure>
I changed the img selector since $("img[src$='value.FileName']"); was not working in a snippet for me.
I created a javascript animation to move a picture to the right when on mouseover and to go back to its resting position when the mouse exits the image. It works flawlessly for the first image but when I try the other iterations the first image moves instead of the one I hover on.
Here is the HTML code:
<div class="sectionJoueur">
<div class="scroller">
<figure id="infos" class="nomPositionCourt A">
<img src="images/infoMathieuD.png">
</figure>
<figure class="img">
<img src="images/md.jpg">
</figure>
</div>
</div>
<div class="sectionJoueur">
<div class="scroller">
<figure id="infos" class="nomPositionCourt B">
<img src="images/infoMathieuD.png">
</figure>
<figure class="img">
<img src="images/md.jpg">
</figure>
</div>
</div>
<div class="sectionJoueur">
<div class="scroller">
<figure id="infos" class="nomPositionCourt C">
<img src="images/infoMathieuD.png">
</figure>
<figure class="img">
<img src="images/md.jpg">
</figure>
</div>
</div>
I'm trying to use the classes names "class="nomPositionCourt A">" the target the specific image being hovered on but it doesn't seem to be working.
Here is the JS code:
function over(){
if ( $("#infos").hasClass("A") ){
$("#infos").stop().animate({"margin-left": +0});
$(".img").mouseleave(out);
}
else if ( $("#infos").hasClass("B") ){
$("#infos").stop().animate({"margin-left": +0});
$(".img").mouseleave(out);
}
}
function out(){
$("#infos").stop().animate({"margin-left": -287});
}
At first glance, it looks like the reason is that both of your images are using the same ID tag (which is bad practice).
This is the code I'm looking at:
figure id="infos"
You are using that same ID tag twice. When your code runs, it's picking up the first "infos" tag it comes to, which is your first image.
Make sure to use unique ID tags and this should help resolve your problem.
You have assigned the id attribute to more than one element which suppose to be unique id="infos" class can be assigned to multiple elements but id should be unique
Try this one by changing the id to class
$(".nomPositionCourt").hover(function(){
if ( $(this).hasClass("A") ){
$(this).stop().animate({"margin-left": +0});
$(".img").mouseleave(out);
}
else if ( $(this).hasClass("B") ){
$(this).stop().animate({"margin-left": +0});
$(".img").mouseleave(out);
}
},function(){
$(this).stop().animate({"margin-left": -287});
})
In $(this) you have the object of current hovered image
Here is the Reference