i want to find closest h2 tag to hovered image following is my html code
<div class="col-md-3 col-sm-3 col-xs-12" style="padding-left:0;">
<div class="ih-item square effect7"><a href="#">
<div class="img">
<img src="images/facilities/facility1.png" class="img-responsive fullwidthimg">
</div>
<div class="info">
<h3>Content </h3>
<p>Some content </p>
</div></a>
</div>
<h2>Arenas</h2>
</div>
this is what i am trying to do in jquery
$(document).ready(function () {
$('.img').hover( function(){
$(this).closest('h2').hide();
})
})
Please help me how can i do it .
closest() only looks up the ancestor tree. You need a more complex traverse since the <h2> is not an ancestor
Something like:
$('.img').hover( function(){
$(this).closest('.ih-item').siblings('h2').hide();
});
You can use the .parents() method to get the correct ancestor and find for h2 tag:
$(document).ready(function() {
$('.img').hover(function() {
$(this).parents().eq(2).find('h2').hide();
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 col-sm-3 col-xs-12" style="padding-left:0;">
<div class="ih-item square effect7">
<a href="#">
<div class="img" style="border:2px solid red;">
<img src="images/facilities/facility1.png" class="img-responsive fullwidthimg">
</div>
<div class="info">
<h3>Content </h3>
<p>Some content </p>
</div>
</a>
</div>
<h2>Arenas</h2>
</div>
PLease go through below code, It will help you. Amending #mathiasfc's code so once you hover on image taxt will hide and on hover out you can get it back.
$(document).ready(function() {
$('.img').hover(function() {
$(this).parents().eq(2).find('h2').hide();
},function(){
$(this).parents().eq(2).find('h2').show();
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3 col-sm-3 col-xs-12" style="padding-left:0;">
<div class="ih-item square effect7">
<a href="#">
<div class="img" style="border:2px solid red;">
<img src="images/facilities/facility1.png" class="img-responsive fullwidthimg">
</div>
<div class="info">
<h3>Content </h3>
<p>Some content </p>
</div>
</a>
</div>
<h2>Arenas</h2>
</div>
you were missing quotes on h2 :
$(document).ready(function () {
$('.img').hover( function(){
$(this).closest('.col-md-3').find('h2').hide();
})
})
this should work
You have to think in your tree first, mainly because you are manipulating your DOM tree. My approach in this situation is go to the first-child node and find your h2 tag, after that make your treatment.
$(document).ready(function () {
$('.img').hover( function(){
$(this).parent().parent().parent().find('h2').hide();
})
})
https://jsfiddle.net/9b9s87oo/1/
Related
I want to change selected (or default) image when users clicked other images thumbs. I tried that with below codes but dosen't work.. Where do I mistake in here ?
Here are simple jquery codes;
<script>
$('img.thumbnail').click(function () {
$('#productImage').attr('src',$(this).attr('src').replace('60/60','400/200'));
})
</script>
and html;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-md-5">
<img id="productImage" src='http://via.placeholder.com/400/200?text={{$product->product_name}}'>
<hr>
<div class="row">
<div class="col-xs-3">
<img src="http://via.placeholder.com/60/60?text=otherimage1">
</div>
<div class="col-xs-3">
<img src="http://via.placeholder.com/60/60?text=otherimage2">
</div>
<div class="col-xs-3">
<img src="http://via.placeholder.com/60/60?text=otherimage3">
</div>
</div>
Your img doen't contain class .thumbnail it is opposite like this,
$('.thumbnail img').click(function () {
$('#productImage').attr('src', $(this).attr('src').replace('60/60','400/200'));
});
And also check your <img> tag.
You were not calling the right selector.
$('a.thumbnail').click(function () {
$('#productImage').attr('src',$(this).children('img').attr('src').replace('60/60','400/200'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-md-5">
<img id="productImage" src='https://via.placeholder.com/400/200?text=nothing'>
<hr>
<div class="row">
<div class="col-xs-3">
<img src="https://via.placeholder.com/60/60?text=otherimage1">
</div>
<div class="col-xs-3">
<img src="https://via.placeholder.com/60/60?text=otherimage2">
</div>
<div class="col-xs-3">
<img src="https://via.placeholder.com/60/60?text=otherimage3">
</div>
</div>
Try attaching the click event to a.thumbnail elements and than do a jQuery.find('img') to get the thumbnail image's src attribute:
$('a.thumbnail').click(function () {
var src = $(this).find('img').attr('src').replace('60/60','400/200');
$('#productImage').attr('src', src);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="col-md-5">
<img id="productImage" src="http://via.placeholder.com/400/200?text=otherimage0">
<hr>
<div class="row">
<div class="col-xs-3">
<img src="http://via.placeholder.com/60/60?text=UrunResimi1">
</div>
<div class="col-xs-3">
<img src="http://via.placeholder.com/60/60?text=otherimage2">
</div>
<div class="col-xs-3">
<img src="http://via.placeholder.com/60/60?text=otherimage3">
</div>
</div>
$(document).ready(function(){
$('.thumbnail img').click(function () {
$('#productImage').attr('src',$(this).attr('src').replace('60/60','400/200'));
});
});
Your jquery selector is incorrect. It should be in this format and make sure you have document.ready function to make it work properly in all the browsers online or offline.
Plnkr Link
Here is my HTML and Javascript code, and basically as you can see currently what it does is show/hide a row of 3 images upon button click.
Thing is, that there are another 2 rows just like this one and I need to know how I can change the javascript code to make the show/hide thing work for all of them.
I know it has something to do with looping through an array of buttons, but I have no idea of Javascript.
Here it is :
<style>
.show-tapas{
display: none;
}
.show-tapas.showing{
display: block;
}
</style>
<div class="row">
<div class="col-md-12">
<div class="load-more-button">
Tapas
</div>
</div>
</div>
<div class="row show-tapas">
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_1_1.jpeg" data-lightbox="image-1"><div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="images/menu_tapas_1_0.jpeg">
</div>
</div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_2_1.jpeg" data-lightbox="image-1"><div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="images/menu_tapas_2_0.jpeg">
</div>
</div></div>
</a>
</div>
<div class="col-md-4 col-sm-6">
<a href="images/menu_tapas_3_1.jpeg" data-lightbox="image-1"><div class="thumb">
<div class="portfolio-item">
<div class="image">
<img src="images/menu_tapas_3_0.jpeg">
</div>
</div></div>
</a>
</div>
</div>
<script>
var a = document.querySelector('.load-more-button');
var b = document.querySelector('.show-tapas');
a.addEventListener("click",function(e){
e.preventDefault
b.classList.contains("showing") ? b.classList.remove("showing") : b.classList.add("showing");
})
</script>
Thank you very much!!!
In this code I only see one row with the class .show-tapas.
Anyway, you should use querySelectorAll to take every matched items.
var button = document.querySelector('.load-more-button');
var tapas = document.querySelectorAll('.show-tapas');
button.addEventListener("click",function(e){
tapas.forEach(b => $(b).toggle());
})
Pro-tip: If you have JQuery you might consider using $(b).toggle() instead of b.classList.contains("showing") ? b.classList.remove("showing") : b.classList.add("showing");
In a dom which has many of the blocks like the one below, I'd like to get name of pid element (i.d 123) when link is clicked:
<div class="a-post">
<a class="pid" name="123"></a>
<div class="row">
<p>Some text</p>
</div>
<br>
<div class="row">
<div class="col-xs-12">
<p>Othe text </p>
</div>
<br>
<div class="row">
<div class="col-xs-1">
<img class="link" src="link.svg">
</div>
</div>
</div>
</div>
Here is my jQuery:
$(document).ready(function () {
$(".link").click(function () {
let pid = $(this).parent(".a-post").find(".pid").attr('name');
console.log('pid is:', pid);
}
});
But I get pid is: undefined
How can I fix this?
You have to use .closest() and not .parent(), because .parent() only goes 1 step up. .closest() will continue until it reach the top or finds the element.
$(document).ready(function() {
$(".link").click(function() {
let pid = $(this).closest(".a-post").find(".pid").attr('name');
console.log('pid is:', pid);
})
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="a-post">
<a class="pid" name="123"></a>
<div class="row">
<p>Some text</p>
</div>
<br>
<div class="row">
<div class="col-xs-12">
<p>Othe text </p>
</div>
<br>
<div class="row">
<div class="col-xs-1">
<img class="link" src="link.svg">
</div>
</div>
</div>
</div>
I'm not really experienced with jQuery but I couldn't find an answer for this. What I exactly want to do is when people click on the img with the class machine-dropdown that the div overview does slideToggle. I got multiple lists on this page with the same construction so I need them to work individual.
<img class="machine-dropdown" src="/theme/cliptech-xl/img/arrow-machine-drop.png" />
<div class="clear"></div>
<div class="category-divider"></div>
<div class="row">
<div class="overview">
<div class="col-lg-3 col-md-6 col-sm-6">
<a href="machines">
<img class="actueel-img" src="" />
</a>
<a href="">
<span class="machine-overzicht-title"></span>
</a>
</div>
</div>
</div>
I tryed it with many methods that jquery already has. .closest .first .find but still when i click it slides all lists.
Thanks for the help already!
You could do it like this:
Change your HTML to this:
<img class="machine-dropdown" data-target="#overview-1" src="/theme/cliptech-xl/img/arrow-machine-drop.png" />
<div class="clear"></div>
<div class="category-divider"></div>
<div class="row">
<div class="overview" id="overview-1">
<div class="col-lg-3 col-md-6 col-sm-6">
<a href="machines">
<img class="actueel-img" src="" />
</a>
<a href="">
<span class="machine-overzicht-title"></span>
</a>
</div>
</div>
</div>
Note that I've added data-target="#overview-1" to the machine-dropdown image and id="overview-1" to the overview div.
Now use the following javascript/jquery:
$(function(){
$(".machine-dropdown").each(function(){
$(this).click(function(){
var target = $(this).data("target");
$(target).slideToggle();
});
});
});
use this attribute in your code.
$('.machine-dropdown').click(function(){
$(this).next().next().next().find('.overview').slideToggle();
});
I think it will solve your problem.
I'm trying to make the accordion effect on this code, like this sample:
<div class="row">
<div class="col-sm-5 col-md-3 boxcontainer">
<span class="boxheader">
1
</span>
<div class="box">
ABC
</div>
<div class="boxfooter">
DEF
</div>
</div>
<div class="col-sm-5 col-md-3 boxcontainer">
<span class="boxheader">
2
</span>
<div class="box">
ABC
</div>
<div class="boxfooter">
DEF
</div>
</div>
</div>
When I click on the boxheader, the box and boxfooter parts appear. How do I to deal this, please?
FIDDLE
The code was always given in the link you've specified.
$(function() {
$( "#accordion" ).accordion();
});
Use slideToggle() method of jquery. Try the below code.
$("body").on("click",".boxheader",function(){
$(".box").hide();
$(".boxfooter").hide();
$(this).parent().find(".box").slideToggle();
$(this).parent().find(".boxfooter").slideToggle();
});
css:
.box,.boxfooter{
display:none;
}
Check Fiddle