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.
Related
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");
When i add or remove a class with javascript then reload the page ..
it wont work
I tried this code, and put it in on the header
<script>
$(document).ready(function() {
$('.boxAdRight').removeClass('boxAdRight').addClass('active');
});
</script>
and this is my HTML I want to remove the class boxAdRight and change it with .active class
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane fade in active" id="data">
<div class="getData">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="servers">
<ul>
<li class="active"
id="s_0"onclick="getServer(this.id,0);">
<i class="fa fa-video-camera"></i> server1
</li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-12 fRight">
<div class="episodes boxAdRight">
<h2>episodes</h2>
<ul>
<li>
episode 1
</li>
<li class="active"> episode 2
</li>
</ul>
</div>
</div>
<div class="col-md-9 col-sm-8 col-xs-12 fRight">
<div class="boxVideos">
<div class="getCode"><iframe src="https://*******" scrolling="no" frameborder="0" width="700" height="430" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
thank you
As a first observation I would like to mention the fact that JQuery's removeClass function returns one or more space separated class names that should be removed. As a consequence, you should not apply addClass over the result of removeClass.
There might be other issues also in your code though...
Replace your .boxAdRight class with .episodes class and it'll work as you want.
<script>
$(document).ready(function() {
$(".episodes").removeClass("boxAdRight").addClass("active");
});
</script>
I believe that the order of the method calls should be
$('.boxAdRight').addClass('active').removeClass('boxAdRight');
In the original example $('.boxAdRight').removeClass('boxAdRight').addClass('active'); the selector .boxAdRight is being used, but then that class is being removed with .removeClass('boxAdRight'), so .addClass('active') is being called on a selector with no matching elements.
get it like that will solve it
$('.episodes').addClass('active').removeClass('boxAdRight');
in normal case yours too must work ?
You can also simplify this code by replacing of class instead of removing it.
$('.boxAdRight').className = 'active';
how to replace class HTML name with javascript
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/
I have a html code similar to this:
<div class="col-md-7">
<div class="row launch">
<img class="img-responsive" alt=""><br/>
</div>
<ul class="row gallery">
<a href="" class="light-link col-xs-6 col-sm-4 col-md-3 ">
<img src=""/>
</a>
</ul>
</div>
<div class="col-md-7">
<div class="row launch">
<img class="img-responsive" alt=""><br/>
</div>
<ul class="row gallery">
<a href="" class="light-link col-xs-6 col-sm-4 col-md-3 ">
<img src=""/>
</a>
</ul>
</div>
What i am trying to do (with JQuery) is when the user is clicking on the first div "row launch" to do something with the link "light-link" inside next siblings ul "row gallery". I want the same thing with the second div "row launch", and the link inside the bellow sibling and so on...What i am dooing wrong?
my code looks like this:
$('.launch').click(function(){
$('.launch').next().children("a:first").trigger('click');
});
But it does not work, it always attach the event to the first ul a "light-link" from the list, even when i click on the second div "row launch" from the list, or the third...
Note: needed for a lightgallery example (multiple galleries using classes), i wanted to trigger a clic on a thumbnail, when the user clic on a default large image, and activate the related gallery.
You can use the siblings and children. note that to trigger a native click you should use the get and then use the click function to trigger it.
$('.launch').click(function(){
$(this).siblings('ul').children(".light-link").get(0).click();
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-7">
<div class="row launch">
<img class="img-responsive" alt="pic1"><br/>
</div>
<ul class="row gallery">
<a href="" class="light-link col-xs-6 col-sm-4 col-md-3 ">
<img src="google.com" alt="pic link1"/>
</a>
</ul>
</div>
<div class="col-md-7">
<div class="row launch">
<img class="img-responsive" alt="pic2"><br/>
</div>
<ul class="row gallery">
<a href="" class="light-link col-xs-6 col-sm-4 col-md-3 ">
<img src="" alt="pic link2"/>
</a>
</ul>
</div>
Try the .find() function combined with the selector this:
$('.launch').click(function(){
$(this).next().find("a:first-of-type").trigger('click');
});
Thank you. Both this 2 answers works,
So my problem was related to lightgallery
http://sachinchoolur.github.io/lightGallery/demos/
I have all this thumbnails, and when clic some of this you activate the lightgallery. But, i needed also, that when the user clic on a bigger default image(not thumbnails) it will activate the gallery related by triggering a clic on the first thumb lightgallery with big picture activating the gallery
I have a link on click of that i want to get the parent div text having a specific class.How can we do this in jquery
HTML
<div class="rcmp_li lft">
<div class="rcm">
<div class="cmplogowrap clr cmp">
<a class="reclogo lft" href="#"></a>
<a class="lft cmp" href="#">
<div class="tpjobwrap">
<div class="compName font_15">ABC </div>
<div class="tpjob_desc">Construction</div>
<div class="tpjob_desc">Mumbai</div>
</div>
</a>
</div>
<a class="lnk cmpjobs" href="#"> Active </a>
</div>
<div class="cmpfollow_wrap clr">
<div class="followbtnwrap rgt">
<a onclick="abc(this)" href="javascript:void(0)">Test</a>
</div>
<div id="my_follow61" class="followcnt rgt">6 </div>
</div>
</div>
On Click of abc() i want to get the value of diva having class compName
i Have tried this
$(obj).parents('div[class^="compName"]').html()
But this is not working
You have incorrect selector to target element. you need to use:
$(obj).closest('.rcmp_li').find('.compName').html()
Working Demo
Try including :has() selector at parameter passed to .parents() to return div element having child element .compName
function abc(obj) {
console.log($(obj).parents(":has(.compName)").find(".compName").html())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="rcmp_li lft">
<div class="rcm">
<div class="cmplogowrap clr cmp">
<a class="reclogo lft" href="#"></a>
<a class="lft cmp" href="#">
<div class="tpjobwrap">
<div class="compName font_15">ABC </div>
<div class="tpjob_desc">Construction</div>
<div class="tpjob_desc">Mumbai</div>
</div>
</a>
</div>
<a class="lnk cmpjobs" href="#"> Active </a>
</div>
<div class="cmpfollow_wrap clr">
<div class="followbtnwrap rgt">
<a onclick="abc(this)" href="javascript:void(0)">Test</a>
</div>
<div id="my_follow61" class="followcnt rgt">6 </div>
</div>
</div>
Your code will not work because its parent is not the div you are looking for.
$(obj).parents('div[class^="compName"]').html();
Also you cannot use "parents" And to travel to parent hierarchy you will have to use parent().parent() where you need to know the exact parent level.
Here you can simply use $("div.compName").html();