I have a list that looks like this:
<div class="col12">
<div class="card-stacked">
<div class="card-content">
<a class="card-link" href=""></a>
</div>
</div>
</div>
--------------
<div class="col12">
<div class="card-stacked">
<div class="card-content">
<a class="card-link" href=""></a>
</div>
</div>
</div>
--------------
<div class="col12">
<div class="card-stacked">
<div class="card-content">
<a class="card-link" href=""></a>
</div>
</div>
</div>
What I am trying to do now is to add a hover effect to the card-stacked once the user hovers over card-link but the only problem is that I dont know how to target the specific div. I dont want to add a hover effect to all divs just the parent of the a tag
Eg:
$('.card-link').hover(function() {
$(this).$('.card-stackedl').addClass('hover');
}, function() {
$(this).$('.card-stacked').removeClass('hover');
});
You could use jQuery methods closest() or parent() :
$(this).closest('.card-stacked').addClass('hover');
//OR
$(this).parents('.card-stacked').addClass('hover');
Hope this helps.
$('.card-link').hover(function() {
$(this).closest('.card-stacked').addClass('hover');
}, function() {
$(this).closest('.card-stacked').removeClass('hover');
});
.hover{
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col12">
<div class="card-stacked">
<div class="card-content">
<a class="card-link" href="">card-link</a>
</div>
</div>
</div>
--------------
<div class="col12">
<div class="card-stacked">
<div class="card-content">
<a class="card-link" href="">card-link</a>
</div>
</div>
</div>
--------------
<div class="col12">
<div class="card-stacked">
<div class="card-content">
<a class="card-link" href="">card-link</a>
</div>
</div>
</div>
--------------
I think this documentation should give you a hand here https://api.jquery.com/category/selectors/
$('.card-link').hover(function() {
$(this).parents('.card-stacked').addClass('hover');
}, function() {
$(this).$('.card-stacked').removeClass('hover');
});
Try this.
You have to use .closest() method to get the specific parent in the tree. You can also make use of .toggleClass() like:
$('.card-link').hover(function(e) {
$(this).closest('.card-stacked').toggleClass('hover', e.type === 'mouseenter');
});
.hover {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col12">
<div class="card-stacked">
<div class="card-content">
<a class="card-link" href="">card-link</a>
</div>
</div>
</div>
--------------
<div class="col12">
<div class="card-stacked">
<div class="card-content">
<a class="card-link" href="">card-link</a>
</div>
</div>
</div>
--------------
<div class="col12">
<div class="card-stacked">
<div class="card-content">
<a class="card-link" href="">card-link</a>
</div>
</div>
</div>
--------------
Related
So it's hard to explain without giving an example, but I'll try my best.
So lets say my HTML looks like this:
<div class="container">
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece active-piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
</div>
So what I want is in Javascript/jQuery to get the .active-piece, then from there on count which .item it is inside of the .container element.(So 2 being the answer, considering we start counting from 0)
I know I can get the $('.active-piece'), and probably should get the parent of the parent from there but then what am I suppose to do?
Maybe I'm thinking too difficult, but I can't seem to figure out how to do get the expected result. Does anyone know how to?
Basically you want to get index of the item element that has child element at some level with the class active-piece. To do that you could use closest method to get parent with class item and then get index of that element
$('.active-piece').closest('.item').index();
const index = $('.active-piece').closest('.item').index();
console.log(index)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece active-piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
</div>
I know there are examples above, but they all use jQuery. So I've written a little bit about how to do this with vanilla javascript. It may not be the most optimal, but hopefully it helps if you don't wish to use jQuery. (I still recommend the jQuery methods if you already use it in your project)
So we start by finding the .active-piece element.
var active = document.querySelector(".active-piece");
Next, we'll back up until we're in the .item element. We know it is two elements above.
var item = active.parentElement.parentElement;
Now we'll loop through the parent of item until we find a match.
for (var i=0; i < item.parentElement.childElementCount; i++) {
var compare = item.parentElement.children.item(i);
if (compare == item) {
console.log(`index of item containing active-piece is ${i}`);
break;
}
}
Here's a snippet
var active = document.querySelector(".active-piece");
var item = active.parentElement.parentElement;
for (var i=0; i < item.parentElement.childElementCount; i++) {
var compare = item.parentElement.children.item(i);
if (compare == item) {
console.log(`index of item containing active-piece is ${i}`);
break;
}
}
<div class="container">
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece active-piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
</div>
you can make use of filter to get all the items having active-piece as child element,
you can store result in itemWithActivePiece variable and use it for further operations
$(function(){
var itemWithActivePiece = $('.container .item').filter(function(){
return $(this).find('.piece-container .active-piece').length > 0;
});
console.log(itemWithActivePiece.length);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece active-piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
<div class="item">
<div class="piece-container">
<span class="piece"></span>
</div>
</div>
</div>
Hey guys having a problem with masonry plugin.
I'm trying to load the simple layout using percentPosition: true; and the problem is when everything loads, layout loads without the gutter and adds it later which causes all images to shift and it looks quiet annoying.
cant seem to figure out the solution to load it the way that nothing would shift. Bellow is the code:
and here is the link: dev3.oaknyc.com
<div class="section group">
<div class="col-sizer"></div>
<div class="gutter-sizer"></div>
<div class="col col-span2">
<img src={{media url="img/10-21/1.jpg"}}>
<a href={{store url="blog/introducing-hope-shoes-more/"}}>
<div class="txt-overlay">
<div class="txt-title">
<span>Introducing:</span>
<h3>HOPE for women + men</h3>
</div>
</div>
</a>
</div>
<div class="col">
<img src={{media url="img/10-21/2.jpg"}}>
<a href={{store url="women/new-items.html"}}>
<div class="txt-overlay">
<div class="txt-title">
<span>Just In:</span>
<h3>HENRIK VIBSKOV</h3>
</div>
</div>
</a>
</div>
<div class="col">
<img src={{media url="img/10-21/3.jpg"}}>
<a href={{store url="women/designers/oak.html"}}>
<div class="txt-overlay">
<div class="txt-title">
<span>Shop:</span>
<h3>OAK Collection Women</h3>
</div>
</div>
</a>
</div>
<div class="col">
<img src={{media url="img/10-21/4.jpg"}}>
<a href={{store url="men/designers/oak-collection.html"}}>
<div class="txt-overlay">
<div class="txt-title">
<span>Shop:</span>
<h3> OAK Collection Men</h3>
</div>
</div>
</a>
</div>
<div class="col col-span2">
<img src={{media url="wysiwyg/blanco/img/10-21/5.jpg"}}>
<a href={{store url="women/designers/laura-siegel.html"}}>
<div class="txt-overlay">
<div class="txt-title">
<span>Shop:</span>
<h3>Laura Siegel</h3>
</div>
</div>
</a>
</div>
<div class="col">
<img src={{media url="img/10-21/6.jpg"}}>
<a href={{store url="women/accessories.html"}}>
<div class="txt-overlay">
<div class="txt-title">
<span>Shop:</span>
<h3>Women's Accessories</h3>
</div>
</div>
</a>
</div>
<script src="https://npmcdn.com/imagesloaded#4.1/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){
jQuery('.section').imagesLoaded(function(){
jQuery('.section').masonry({
// options
columnWidth: '.col-sizer',
itemSelector: '.col',
gutter: '.gutter-sizer',
percentPosition: true
});
});
});
//]]>
</script>
I tried many thigs to navigate to next div element I'm using Mousetrap for key listener and checking if there is selected item then I'm trying to find the next div but seems like can't find anything any ideas?
HTML (There are many of this div item):
<div class="item">
<a href="#">
<div class="item-flip">
<div class="item-inner">
<img src="#">
</div>
<div class="item-details">
<div class="item-details-inner">
<div class="down-details">
<div class="rating" data-content="9.5">
<i class="icon icon-star"></i>9.5
</div>
<span class="year">2011</span>
<span>Go</span>
</div>
</div>
</div>
</div>
</a>
</div>
Javascript
Mousetrap.bind("right", function() {
if($('.item-flip selected').length){
var current = $('.item-flip selected');
$('.selected').removeClass('selected');
var el = current.next();
el.addClass('selected');
}
else{
$('.item-flip').first().addClass('selected')
}
});
I tried how to figure out a solution, in the following my snippet the code.
The points of interest are:
To select an element with two classes you need to change from $('.item-flip selected') to $('.item-flip.selected')
To get next element you need to find the clossest div father and then search for the item-flip div. So from var el = current.next(); you need to change to: var el = current.closest('.item').next().find('.item-flip');
$(function () {
Mousetrap.bind("right", function(e) {
if($('.item-flip.selected').length){
var current = $('.item-flip.selected');
$('.selected').removeClass('selected');
var el = current.closest('.item').next().find('.item-flip');
el.addClass('selected');
}
else{
$('.item-flip').first().addClass('selected')
}
});
});
.selected {
background-color: red;
}
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://rawgit.com/ccampbell/mousetrap/master/mousetrap.js"></script>
<div class="item">
<a href="#">
<div class="item-flip">
<div class="item-inner">
<img src="#">
</div>
<div class="item-details">
<div class="item-details-inner">
<div class="down-details">
<div class="rating" data-content="9.5">
<i class="icon icon-star"></i>9.5
</div>
<span class="year">2011</span>
<span>Go</span>
</div>
</div>
</div>
</div>
</a>
</div>
<div class="item">
<a href="#">
<div class="item-flip">
<div class="item-inner">
<img src="#">
</div>
<div class="item-details">
<div class="item-details-inner">
<div class="down-details">
<div class="rating" data-content="9.5">
<i class="icon icon-star"></i>9.5
</div>
<span class="year">2011</span>
<span>Go</span>
</div>
</div>
</div>
</div>
</a>
</div>
<div class="item">
<a href="#">
<div class="item-flip">
<div class="item-inner">
<img src="#">
</div>
<div class="item-details">
<div class="item-details-inner">
<div class="down-details">
<div class="rating" data-content="9.5">
<i class="icon icon-star"></i>9.5
</div>
<span class="year">2011</span>
<span>Go</span>
</div>
</div>
</div>
</div>
</a>
</div>
I have a following html as follows:
<div class="outerdiv">
<div class="title">
<div class="innerdiv">
<div class="outerdiv">
<div class="title">
<div class="innerdiv">
<div class="outerdiv">
<div class="innerdiv>
<div class="outerdiv">
<div class="title">
<div class="innerdiv">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have to apply "border-width:10px" for all divs with class = innerdiv provided that "outerdiv" contains both "title" and "innerdiv"
.
My expected output is:
<div class="outerdiv">
<div class="title">
<div class="innerdiv" style="border-width:10px">
<div class="outerdiv">
<div class="title">
<div class="innerdiv" style="border-width:10px">
<div class="outerdiv">
<div class="innerdiv>
<div class="outerdiv">
<div class="title">
<div class="innerdiv" style="border-width:10px">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I am trying this:
$(element).find(".outerdiv").not("[class="title"]).css("border-width","10px").
Edit: The number of divs are dynamic and not fixed in number
You need to use :has selector along with immediate child selector to target innerdiv element:
$('.outerdiv:has(.innerdiv):has(.title) > ,.title > .innerdiv ').css("border-width","10px");
DEMO SNIPPET :
$(function(){
$('.outerdiv:has(.innerdiv):has(.title) > .title > .innerdiv ').css("border-width","100px").css('border' ,'1px solid grey')
}) ;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="outerdiv">
<div class="title">1
<div class="innerdiv">2
<div class="outerdiv">3
<div class="title">4
<div class="innerdiv">5
<div class="outerdiv">6
<div class="innerdiv">7
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You can do this with good css hierarchy just apply the styles to
.outerdiv > .title > .innerdiv{
css goes here
}
and they will only affect divs in the hierarchy that you mentioned.
Simply use:
$('.innerdiv').css('border-width','10px');
It will add border-width to all divs with class 'innerdiv'.
I'm working on this site here. http://opennetsummit.wpengine.com/
The three images in the second section down trigger the bootstrap collapse function on click. I'd like them to show on hover, and hide when not hovering.
What do I need to change?
<script>
$(".paneltab1").hover(
function() {
$('#collapsePanel1').collapse('show');
}, function() {
$('#collapsePanel1').collapse('hide');
}
);
</script>
<div class="row panel-heading">
<div class="container">
<div class="col-xs-3">
<a class="paneltab1" data-toggle="collapse" href="#collapsePanel1" aria-expanded="false" aria-controls="collapsePanel1">
<div class="panel-tabs">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-rocket-icon.png">
<h3>Workshops</h3>
</div>
</a>
</div>
<div class="col-xs-3 ">
<a class="" data-toggle="collapse" href="#collapsePanel2" aria-expanded="false" aria-controls="collapsePanel2">
<div class="panel-tabs">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-circles-icon.png">
<h3>Open Networking Summit</h3>
</div>
</a>
</div>
<div class="col-xs-3 ">
<a class="" data-toggle="collapse" href="#collapsePanel3" aria-expanded="false" aria-controls="collapsePanel3">
<div class="panel-tabs">
<div>
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
<h3>Webinars</h3>
</div>
</div>
</a>
</div>
<div class="col-xs-3 ">
<div class="panel-tabs">
<div class="mid-form">
<h3>Get Updates</h3>
</div>
</div>
</div>
</div>
</div>
<div class="collapse" id="collapsePanel1">
<div class="row">
<div class="container">
<div class="col-xs-12 hompage-panel">
<div class="col-sm-4 center">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
</div>
<div class="col-sm-8">
<h2>Defy Protocol </h2>
<h1>EMBRACE {OPEN} SOFTWARE</h1>
<h3>Open Networking Summit</h3>
<hr>
<p>June 15 - 18, 2015</p>
<p>Santa Clara Convention Center</p>
More Information
</div>
</div>
</div>
</div>
</div>
<div class="collapse" id="collapsePanel2">
<div class="row">
<div class="container">
<div class="col-xs-12 hompage-panel">
<div class="col-sm-4 center">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
</div>
<div class="col-sm-8">
<h2>Panel 2 </h2>
<h1>EMBRACE {OPEN} SOFTWARE</h1>
<h3>Open Networking Summit</h3>
<hr>
<p>June 15 - 18, 2015</p>
<p>Santa Clara Convention Center</p>
More Information
</div>
</div>
</div>
</div>
</div>
<div class="collapse" id="collapsePanel3">
<div class="row">
<div class="container">
<div class="col-xs-12 hompage-panel">
<div class="col-sm-4 center">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
</div>
<div class="col-sm-8">
<h2>Panel 3 </h2>
<h1>EMBRACE {OPEN} SOFTWARE</h1>
<h3>Open Networking Summit</h3>
<hr>
<p>June 15 - 18, 2015</p>
<p>Santa Clara Convention Center</p>
More Information
</div>
</div>
</div>
</div>
You can use jquery's hover along with bootstrap's collapse javascript, something like this:
$(".panel-tabs").hover(
function() {
$('#collapsePanel3').collapse('show');
}, function() {
$('#collapsePanel3').collapse('hide');
}
);
The first function(){} is for when the mouse enters, the second for when it leaves.
More info here:
http://api.jquery.com/hover/
http://getbootstrap.com/javascript/#collapse-methods
I changed the class from "collapse" to "collapse in" on mouseover and from "collapse in" to "collapse" on mouseout using GetElementbyID and it worked fine.
document.getElementById("panelid").className = "collapse in";