I want to add as a class the image alt attribute to its container element. Markup:
<div class="field-group-our-people">
<div class="field-items even>
<img alt="John">
</div>
<div class="field-items odd>
<img alt="Kevin">
</div>
<div class="field-items even>
<img alt="Kate">
</div>
<div class="field-items odd>
<img alt="Martin">
</div>
</div>
To be like this:
<div class="field-group-our-people">
<div class="field-items even john>
<img alt="John">
</div>
<div class="field-items odd kevin>
<img alt="Kevin">
</div>
<div class="field-items even kate>
<img alt="Kate">
</div>
<div class="field-items odd martin>
<img alt="Martin">
</div>
</div>
My Jquery code(but not working):
//Add the image alt attribute as class for individual styling
$('.group_our_people .field-item').each(function() {
var att = $('.group_our_people .field-item img').attr('alt');
$(this).addClass(att);
});
What is wrong/missing in my code?
You should get the img that is child of the current div (on iteration):
var att = $(this).find('img').attr('alt');
The way you're doing (i.e. repeating the selector), you end up retrieving multiple values, and only the first one is taken into account. So, every div will get its class: "John".
$('.field-group-our-people .field-items img').each(function() {
$(this).parent().addClass( $(this).attr('alt') );
});
$('div.field-group_our_people div[class^=".field-items"] img').each(function()
{
var att = $(this).attr('alt');
$(this).parent().addClass(att);
});
Related
I have 2 grid divs, one with images and the other with a list of names. Each element within each of the divs corresponds to another within the other div (eg. .image-1 corresponds with .name-1).
When you hover over one of the elements, I want that element AND the corresponding element in the other div to both disappear.
For example, when you hover over "Name 1", I want that and the corresponding image to both disappear. Here's my general html setup:
<body>
<div class="wrapper">
<div class="picture-grid grid">
<div class="grid-box image-1">
<img src="images/image1.png" />
</div>
<div class="grid-box image-2">
<img src="images/image2.png" />
</div>
<div class="grid-box image-3">
<img src="images/image3.png" />
</div>
<div class="grid-box image-4">
<img src="images/image4.png" />
</div>
<div class="grid-box image-5">
<img src="images/image5.png" />
</div>
</div>
<div class="names-grid grid">
<div class="grid-box name-1">Name 1</div>
<div class="grid-box name-2">Name 2</div>
<div class="grid-box name-3">Name 3</div>
<div class="grid-box name-4">Name 4</div>
<div class="grid-box name-5">Name 5</div>
</div>
</div>
</body>
I'm sorry, I've been stuck on this for hours and would love some help! Here's a fiddle:
https://jsfiddle.net/8egpf1j3/
One solution using JQuery is to add data-* attributes to the HTML markup. In this approach we going to add a data-target attribute that will hold the class of the related element that should be hidden (with opacity: 0) when the current element is hovered. You can use JQuery.data() to work with data-* attributes. Check the next simplified example, from where I hope you can understand the underlying idea.
$(".grid-box").hover(
// Handler for hover-in.
function()
{
$(this).css("opacity", 0);
$($(this).data("target")).css("opacity", 0);
},
// Handler for hover-out.
function()
{
$(this).css("opacity", 1);
$($(this).data("target")).css("opacity", 1);
}
);
.grid-box {
width: 100px;
background-color: skyblue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<div class="picture-grid grid">
<div class="grid-box image-1" data-target=".name-1">
IMAGE 1
</div>
<div class="grid-box image-2" data-target=".name-2">
IMAGE 2
</div>
<div class="grid-box image-3" data-target=".name-3">
IMAGE 3
</div>
<div class="grid-box image-4" data-target=".name-4">
IMAGE 4
</div>
</div>
<hr>
<div class="names-grid grid">
<div class="grid-box name-1" data-target=".image-1">
Name 1
</div>
<div class="grid-box name-2" data-target=".image-2">
Name 2
</div>
<div class="grid-box name-3" data-target=".image-3">
Name 3
</div>
<div class="grid-box name-4" data-target=".image-4">
Name 4
</div>
</div>
</div>
You can do it this way, I suppose number of images and names is the same, and they are in the same order. Means image number one is first in its div, and name number one is first in its div.
//getting all pictures by <a> tag
var pictures = document.querySelector(".picture-grid").querySelectorAll("a");
//getting all names by <a> tag
var names = document.querySelector(".names-grid").querySelectorAll("a");
//attach reaction to "hover" event to all pictures and names
for (var i = 0; i < pictures.length; i++){
pictures[i].addEventListener("mouseenter", hide.bind(i));
names[i].addEventListener("mouseenter", hide.bind(i));
}
//run function on "hover" event, i = index of chosen image/name
function hide (){
var i = this;
pictures[i].style.opacity = 0;
names[i].style.opacity = 0;
}
I'm quite rusty with my (basic) javascript so hopefully I'm not misunderstanding the problem entirely, but essentially what I'm trying to do is return the 'alt' field of an image as a caption appended to the title for each image, and while I'm getting essentially that, it's returning the list for the entire sequence of images to each instead of their own in a sequence. Code is super simple, which is probably why it's not working. Any help is appreciated
$('#projectThumbs img').each(function(){
$('.project-title').append("<div>" + $(this).attr('alt') + "</div>");
});
For example, if the images have a caption sequence of '1','2','3', each image is now being appended with '1,2,3' instead of '1' to 1, '2' to 2, etc.
Images structure from the html (in Squarespace so I don't have access to source code, only injection). This is in a grid of images.
ETA: noticed a few hiding divs in the code, maybe the project-item-count can be useful in some way?
<a class='project'>
<div>
<div class='project-image'>
<div class='intrinsic'>
<div class = 'content-fill'>
<img alt='example'>
</div>
</div>
<div class='project-item-count'>
</div>
</div>
<div class='project-title'>
Title
</div>
</div>
</a>
image of what's happening to help clarify
$('.project-image img').each(function(){
$(this).parents('.project-image').next().append("<div>" + $(this).attr('alt') + "</div>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class='project'>
<div>
<div class='project-image'>
<div class='intrinsic'>
<div class = 'content-fill'>
<img src="https://picsum.photos/200" alt='example1'>
</div>
</div>
<div class='project-item-count'>
</div>
</div>
<div class='project-title'>
Title
</div>
</div>
</a>
<a class='project'>
<div>
<div class='project-image'>
<div class='intrinsic'>
<div class = 'content-fill'>
<img src="https://picsum.photos/200" alt='example2'>
</div>
</div>
<div class='project-item-count'>
</div>
</div>
<div class='project-title'>
Title
</div>
</div>
</a>
Assuming the HTML contains valid #projectThumbs element, the problem is that you're not targeting the .project-title element(s) correctly.
You need to do that using parent() (to find the parent of the element), and then use siblings() to find the correct sibling (which has project-title class assigned).
See the demo below:
$('#projectThumbs img').each(function() {
$(this).parent().siblings('.project-title').append("<div>" + $(this).attr('alt') + "</div>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="projectThumbs">
<a class='project'>
<div>
<div class='project-image'>
<img alt='example'>
</div>
<div class='project-title'>
Title
</div>
</div>
</a>
</div>
The id attribute cannot be duplicated in DOM elements so each function is not run on all the same id elements if you use the class attribute with the same name and use each function then your problem solved.i hope it helps you.
$('#projectThumbs img').each(function(){
$('.project-title').append("<p>" + $(this).attr('alt') + "</p>");
});
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<div id="projectThumbs">
<img alt="myimae"
src="http://psdandcode.com/themes/psd2code/images/logo.png">
<img alt="mimage"
src="http://psdandcode.com/themes/psd2code/images/logo.png">
<img alt="myimae"
src="http://psdandcode.com/themes/psd2code/images/logo.png">
<img alt="myimag"
src="http://psdandcode.com/themes/psd2code/images/logo.png">
</div>
<div class="project-title"></div>
I have a number of divs that possess the same className (.sampleClass) of which contain both an a and img element. I have managed to inherit the href value from a to img, however, due to these elements residing inside divs with the same className, the href inheritance is applied to all img elements using only the first href value of a identified inside of a div with .sampleClass.
HTML before JavaScript:
<div class="sampleClass">
<h2>text</h2>
<img src="./img/someImg.png" />
<p>text</p>
<a><span>text</span></a>
</div>
<div class="sampleClass">
<h2>text</h2>
<img src="./img/someOtherImg.png" />
<p>text</p>
<a><span>text</span></a>
</div>
The following JavaScript (vanilla) was used:
var aHref = document.querySelector(".sampleClass > a").getAttribute("href");
var img = document.querySelectorAll("img"); /* or (".sampleClass > img") */
img.forEach(function(inheritHrefImg) {
inheritHrefImg.setAttribute("href", aHref);
})
HTML after JavaScript:
<div class="sampleClass">
<h2>text</h2>
<img src="./img/someImg.png" href="example.html" /> /* this is correct */
<p>text</p>
<a><span>text</span></a>
</div>
<div class="sampleClass">
<h2>text</h2>
<img src="./img/someOtherImg.png" href="example.html" /> /* want href to be "random.html" */
<p>text</p>
<a><span>text</span></a>
</div>
I need a way to indicate img elements to only target the href of the a element within the div of which both that img and a resides.
Thanks in advance!
NOTE: Unfortunately giving an individual className to each div, although a solution, is not an option.
Just loop over the divs instead. Also note that your example is missing the first </div> end tag, I presume:
document.querySelectorAll('.sampleClass')
.forEach(sampleClass => {
sampleClass.children[1].setAttribute('href', sampleClass.children[0].children[0].getAttribute('href'));
});
console.log(document.body.innerHTML);
<div class="sampleClass">
<h2>text</h2>
<img src="./img/someImg.png" />
</div>
<div class="sampleClass">
<h2>text</h2>
<img src="./img/someOtherImg.png" />
</div>
But imgs should not have hrefs, I don't know what that's supposed to do; it would be much more elegant to simply enclose them in another dynamically created a, like this:
document.querySelectorAll('.sampleClass')
.forEach(sampleClass => {
const { href } = sampleClass.children[0].children[0];
const img = sampleClass.children[1];
img.remove();
const newA = document.createElement('a');
newA.href = href;
newA.appendChild(img);
const newAinsert = sampleClass.insertBefore(newA, sampleClass.children[1]);
});
console.log(document.body.innerHTML);
<div class="sampleClass">
<h2>text</h2>
<img src="./img/someImg.png" />
<p>text</p>
<span>text</span>
</div>
<div class="sampleClass">
<h2>text</h2>
<img src="./img/someOtherImg.png" />
<p>text</p>
<span>text</span>
</div>
I'm not sure how a href attribute on an img tag will help.. But one way you can do this is by querying for the parent divs and operating on it's children in a for loop.
Note: If you are using that href attribute on the img tag programmatically through JS, it may be better to make it a data-* attribute..
Sample:
var divs = document.querySelectorAll('.sampleClass');
divs.forEach(function(div) {
var aTag = div.querySelector('a');
var iTag = div.querySelector('img');
if (!aTag || !iTag) {
// This div does not have an image or anchor tag, skip
return;
}
iTag.setAttribute('href', aTag.href);
});
<div class="sampleClass">
<h2>text</h2>
<img src="./img/someImg.png" />
</div>
<div class="sampleClass">
<h2>text</h2>
<img src="./img/someOtherImg.png" />
</div>
I have 3 divs, there is content(images) inside of them. When you click on one of them content of it becomes visible and content of other two becomes hidden. I've been managed to achieve that with jquery code(you can check for it below), but the bad thing it's hardcoded, is there any other methods do do it?
P.S.: "https://solomia-gera.github.io/" is the site itself if you want to have a look.
---------------------------------------------------------THE CODE-----------------------------------------------------
<!-- Hide/Show DIV1 content-->
<script>
// Hide content in div with id#mox when cliked on div with id#content
$("#mox2").on("click", function () {
$("#content1").hide();
});
$("#mox3").on("click", function () {
$("#content1").hide();
});
// Show content in div with id#mox when cliked on div with id#content
$("#mox1").on("click", function () {
$("#content1").show();
});
</script>
<!-- Hide/Show DIV2 content-->
<script>
$("#content2").hide();
// Hide content in div with id#mox when cliked on div with id#content
$("#mox1").on("click", function () {
$("#content2").hide();
});
$("#mox3").on("click", function () {
$("#content2").hide();
});
// Show content in div with id#mox when cliked on div with id#content
$("#mox2").on("click", function () {
$("#content2").show();
});
</script>
<!-- Hide/Show DIV3 content-->
<script>
$("#content3").hide();
// Hide content in div with id#mox when cliked on div with id#content
$("#mox2").on("click", function () {
$("#content3").hide();
});
$("#mox1").on("click", function () {
$("#content3").hide();
});
// Show content in div with id#mox when cliked on div with id#content
$("#mox3").on("click", function () {
$("#content3").show();
});
Given that all three have a common class mox, and if you add a common class content to each of the content divs you can do this:
$(".mox").click(function() {
$(this).children(".content").show();
$(".mox").not(this).children(".content").hide();
}
Explanation: the function is called whenever you click on any element with a mox class. this selector lets you select the particular instance of the class that was clicked, children() selects any child elements and when we put a selector as an argument for children(), it selects all child elements that match that selector. Second line works similarly, with an addition of not(this), so the second line reads hide all elements that match content class and are children of any element with class mox, but this one.
EDIT: If for some reason you do not want to assign a common class to all content divs, the following function will work as is:
$(".mox").click(function() {
$(this).children("[id^=content]").show();
$(".mox").not(this).children("[id^=content]").hide();
}
Here I used attributeStartsWith selector, read more here.
There is much better way for doing this
You can simply use the following code
$('.content').on('click', '.img-heading', function(){
$(this).parent('.content').siblings('.content').removeClass('active');
$(this).parent('.content').addClass('active');
})
Codepen link
if your content is outside mox, you can apply a same class for each element and add a data for show only what you want.
$(".mox").on("click", function () {
var content = $(".content")
content.hide();
content.eq($(this).attr("data-content")-1).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mox" data-content="1">Show one</div>
<div class="mox" data-content="2">Show two</div>
<div class="mox" data-content="3">Show three</div>
<div class="content" style="display:none;width:100px;height:100px; background:red" ></div>
<div class="content" style="display:none;width:100px;height:100px; background:blue" ></div>
<div class="content" style="display:none;width:100px;height:100px; background:green" ></div>
try this code
$('.mox').on('click', function(){
$('.image_list').hide();
var $index = $('.mox').index(this);
$('.image_list').eq($index).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="box">
<div id="mox1" class="mox">
<p class="hide">
O<br>V<br>E<br>R<br>V<br>I<br>E<br>W
</p>
<div id="content1" class="image_list">
<img src="https://solomia-gera.github.io/img/1.jpg">
<img src="https://solomia-gera.github.io/img/2.jpg">
<img src="https://solomia-gera.github.io/img/3.jpg">
<img src="https://solomia-gera.github.io/img/4.jpg">
<img src="https://solomia-gera.github.io/img/5.jpg">
<img src="https://solomia-gera.github.io/img/6.jpg">
<img src="https://solomia-gera.github.io/img/7.jpg">
<img src="https://solomia-gera.github.io/img/8.jpg">
</div>
</div>
<!-- ALBUMS -->
<div id="mox2" class="mox">
<p class="">
A<br>L<br>B<br>U<br>M<br>S
</p>
<div id="content2" class="image_list">
<img src="https://solomia-gera.github.io/img/1.jpg">
<img src="https://solomia-gera.github.io/img/2.jpg">
<img src="https://solomia-gera.github.io/img/3.jpg">
<img src="https://solomia-gera.github.io/img/4.jpg">
<img src="https://solomia-gera.github.io/img/5.jpg">
<img src="https://solomia-gera.github.io/img/6.jpg">
<img src="https://solomia-gera.github.io/img/7.jpg">
<img src="https://solomia-gera.github.io/img/8.jpg">
</div>
</div>
<!-- ABOUT -->
<div id="mox3" class="mox">
<p class="">
A<br>B<br>O<br>U<br>T
</p>
<div id="content3" class="image_list">
<img src="https://solomia-gera.github.io/img/1.jpg">
<img src="https://solomia-gera.github.io/img/2.jpg">
<img src="https://solomia-gera.github.io/img/3.jpg">
<img src="https://solomia-gera.github.io/img/4.jpg">
<img src="https://solomia-gera.github.io/img/5.jpg">
<img src="https://solomia-gera.github.io/img/6.jpg">
<img src="https://solomia-gera.github.io/img/7.jpg">
<img src="https://solomia-gera.github.io/img/8.jpg">
</div>
</div>
</div>
Based on your code:
function myCustomHide(contentIds, moxsIds){
contentIds.forEach(function(element, index) {
index !== 0 ? $("#"+element).hide(): null;
moxsIds.forEach(function(moxElem, moxIndex){
if(index !== moxIndex){
$("#"+moxElem).on("click", function(){
$("#"+element).hide();
});
}
});
$("#"+moxsIds[index]).on("click", function(){
$("#"+element).show();
});
});
}
var contentsIds = [ "content1", "content2", "content3"];
var moxsIds = [ "mox1", "mox2", "mox3"];
myCustomHide(contentsIds, moxsIds);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
<div id="mox1">
Overview
</div>
<div id="content1" class="image_list">
<img src="https://solomia-gera.github.io/img/1.jpg">
<img src="https://solomia-gera.github.io/img/2.jpg">
<img src="https://solomia-gera.github.io/img/3.jpg">
<img src="https://solomia-gera.github.io/img/4.jpg">
<img src="https://solomia-gera.github.io/img/5.jpg">
<img src="https://solomia-gera.github.io/img/6.jpg">
<img src="https://solomia-gera.github.io/img/7.jpg">
<img src="https://solomia-gera.github.io/img/8.jpg">
</div>
<!-- ALBUMS -->
<div id="mox2">
Albums
</div>
<div id="content2" class="image_list">
<img src="https://solomia-gera.github.io/img/1.jpg">
<img src="https://solomia-gera.github.io/img/2.jpg">
<img src="https://solomia-gera.github.io/img/3.jpg">
<img src="https://solomia-gera.github.io/img/4.jpg">
<img src="https://solomia-gera.github.io/img/5.jpg">
<img src="https://solomia-gera.github.io/img/6.jpg">
<img src="https://solomia-gera.github.io/img/7.jpg">
<img src="https://solomia-gera.github.io/img/8.jpg">
</div>
<!-- ABOUT -->
<div id="mox3">
About
</div>
<div id="content3" class="image_list">
<img src="https://solomia-gera.github.io/img/1.jpg">
<img src="https://solomia-gera.github.io/img/2.jpg">
<img src="https://solomia-gera.github.io/img/3.jpg">
<img src="https://solomia-gera.github.io/img/4.jpg">
<img src="https://solomia-gera.github.io/img/5.jpg">
<img src="https://solomia-gera.github.io/img/6.jpg">
<img src="https://solomia-gera.github.io/img/7.jpg">
<img src="https://solomia-gera.github.io/img/8.jpg">
</div>
</div>
or check the fiddle for slight different html: https://jsfiddle.net/oy7vj7fq/2/
I'm using jQuery to create a simple addClass on hover. Hovering over a #science-panel-number div triggers a class of .active to be added to an #iphone-screen-number div.
Here is my jQuery:
$('#science-panel-1').hover(function(){
$('#iphone-screen-1').addClass('active');
},function(){
$('#iphone-screen-1').removeClass('active');
});
$('#science-panel-2').hover(function(){
$('#iphone-screen-2').addClass('active');
},function(){
$('#iphone-screen-2').removeClass('active');
});
$('#science-panel-3').hover(function(){
$('#iphone-screen-3').addClass('active');
},function(){
$('#iphone-screen-3').removeClass('active');
});
My HTML:
<div class="col-md-4">
<div id="science-panel-1" class="science-panel__item">
Content goes in here!
</div>
<div id="science-panel-2" class="science-panel__item">
Content goes in here!
</div>
<div id="science-panel-3" class="science-panel__item">
Content goes in here!
</div>
</div>
<div class="col-md-4">
div id="iphone-screen-1" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
div id="iphone-screen-2" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
<div id="iphone-screen-3" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
<div id="iphone-screen-4" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
<div id="iphone-screen-5" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
<div id="iphone-screen-6" class="iphone-screen-item">
<img src="IMG-url-here.jpg" alt="" />
</div>
</div>
<div class="col-md-4">
<div id="science-panel-4" class="science-panel__item">
Content goes in here!
</div>
<div id="science-panel-5" class="science-panel__item">
Content goes in here!
</div>
<div id="science-panel-6" class="science-panel__item">
Content goes in here!
</div>
</div>
This feels like a lot of code to do the same script. Is there a way to have one piece of script that can add the numbers it self? As #science-panel-1 will always link to to #iphone-screen-1 and so on.
This will do what you need. Just apply the handlers to elements whose ID begins with science-panel-, which should cover all of them...
$("[id^=science-panel-]").hover(function() {
// get the corresponding iphone-screen element id
var iphoneScreen = "#" + this.id.replace("science-panel-", "iphone-screen-");
$(iphoneScreen).addClass("active");
},function() {
var iphoneScreen = "#" + this.id.replace("science-panel-", "iphone-screen-");
$(iphoneScreen).removeClass("active");
});
I recommend changing the markup to include the data you need to drive the script:
<div data-target="#iphone-screen-1" id="science-panel-1" class="science-panel__item">...</div>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
This allows you to select all the science panel items at once:
$('.science-panel__item')
and perform the exact same script on each of them:
$('.science-panel__item').hover(function () {
$($(this).data('target')).addClass('active');
// ^^^^^^^^^^^^^^^^^^^^^^
// use the data-target attribute as a selector
}, function () {
$($(this).data('target')).removeClass('active');
});
If you change the attribute and the selector, you'll have a reusable feature you can apply to any element:
$('[data-hover-target]').hover(function () {
$($(this).data('hoverTarget')).addClass('active');
}, function () {
$($(this).data('hoverTarget')).removeClass('active');
});
I'd firstly ask if the active class is strictly necessary? Can what you want be achieved with CSS if it is for styling only by using the :hover pseudoclass?
If you do need the .active class for some reason, I would change the markup to be a little more generic so that all the science panels had a CSS class of .science-panel and all the iphone screens had a class of .iphone-screen. Then you could simplify the JS to look like
$('.science-panel').on('mouseenter mouseleave', function(e) {
$(this).find('.iphone-screen').toggleClass('active', e.type === 'mouseenter');
});
This will find the .iphone-screen inside of the .science-panel that you hover over and toggle the class to on if the mouse enters and off when the mouse leaves it.
edit: I see you've updated your answer to include your markup, this answer was assuming that your iphone-screens were nested in the science-panels so this won't necessarily work for you if you don't/can't nest your markup