This is my html code:
<div class="w-grid-list">
<article class="product_cat-19">
<div class="w-grid-item-h">
<a class="w-grid-item-anchor" href="#"></a>
<div class="w-vwrapper">
<div class="w-post-elm">
<a href="">
title1
</a>
</div>
<div class="w-post-elm">
<span class="w-post-elm-before">color code : </span>
<span class="sku">228</span>
</div>
<div class="w-html">color</div>
</div>
</div>
</article>
<article class="product_cat-19">
<div class="w-grid-item-h">
<a class="w-grid-item-anchor" href="#"></a>
<div class="w-vwrapper">
<div class="w-post-elm">
<a href="">
title2
</a>
</div>
<div class="w-post-elm">
<span class="w-post-elm-before">color code : </span>
<span class="sku">229</span>
</div>
<div class="w-html">color</div>
</div>
</div>
</article>
</div>
<div class="owl-stage">
<div class="owl-item active" style="width: 204px;">
<article class="product_cat-18">
<div class="w-grid-item-h">
<div class="w-hwrapper">
<div class="w-vwrapper">
<div class="w-post-elm">
</div>
<h2 class="w-post-elm">
title of product1
</h2>
<div class="w-post-elm">
<span class="Price-amount">140<span class="Price-currencySymbol">$</span></span>
</div>
</div>
</div>
</div>
</article>
</div>
<div class="owl-item active" style="width: 204px;">
<article class="product_cat-19">
<div class="w-grid-item-h">
<div class="w-hwrapper">
<div class="w-vwrapper">
<div class="w-post-elm">
</div>
<h2 class="w-post-elm">
title of product2
</h2>
<div class="w-post-elm">
<span class="Price-amount">120<span class="Price-currencySymbol">$</span></span>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
And I want to hide(style display:none) Div Element just with "owl-item" class which it has "article" tag with "product_cat-19" class.
my JavaScript code:
<script>
// get the heading from the first article
const product_cat_19 = document.querySelector('.product_cat-19');
// get its parent, the current article
const currentArticle = product_cat_19.parentNode.style.display='none';
</script>
this code can not hide "owl-item" class. but hide div with "w-grid-list" class.
is there any way to do this with css only or js need?
I searched on Google and found only solutions to solve this problem with JavaScript that didn't work properly.
any one can help me to edit my code?
You can grab the element, both, with JavaScript & CSS like so:
JavaScript:
const el = document.querySelectorAll('.owl-item .product_cat-19');
el[0].style.display = 'none';
CSS:
.owl-item > .product_cat-19 {
display: none;
}
querySelector() will match only for the first occurance it finds. You need querySelectorAll() to go through all elements and then check if the parents has (or not) the class you look for :
example : https://codepen.io/gc-nomade/pen/YzXQeyN
for (let e of document.querySelectorAll('.product_cat-19')) {
var dady = e.parentNode;
if (dady.classList.contains("owl-item")) {
dady.style.display = "none";
}
}
<div class="w-grid-list">
<article class="product_cat-19">
<div class="w-grid-item-h">
<a class="w-grid-item-anchor" href="#"></a>
<div class="w-vwrapper">
<div class="w-post-elm">
<a href="">
title1
</a>
</div>
<div class="w-post-elm">
<span class="w-post-elm-before">color code : </span>
<span class="sku">228</span>
</div>
<div class="w-html">color</div>
</div>
</div>
</article>
<article class="product_cat-19">
<div class="w-grid-item-h">
<a class="w-grid-item-anchor" href="#"></a>
<div class="w-vwrapper">
<div class="w-post-elm">
<a href="">
title2
</a>
</div>
<div class="w-post-elm">
<span class="w-post-elm-before">color code : </span>
<span class="sku">229</span>
</div>
<div class="w-html">color</div>
</div>
</div>
</article>
</div>
<div class="owl-stage">
<div class="owl-item active" style="width: 204px;">
<article class="product_cat-18">
<div class="w-grid-item-h">
<div class="w-hwrapper">
<div class="w-vwrapper">
<div class="w-post-elm">
</div>
<h2 class="w-post-elm">
title of product1
</h2>
<div class="w-post-elm">
<span class="Price-amount">140<span class="Price-currencySymbol">$</span></span>
</div>
</div>
</div>
</div>
</article>
</div>
<!-- will be hidden -->
<div class="owl-item active" style="width: 204px;">
<!-- because of this child -->
<article class="product_cat-19">
<div class="w-grid-item-h">
<div class="w-hwrapper">
<div class="w-vwrapper">
<div class="w-post-elm">
</div>
<h2 class="w-post-elm">
title of product2
</h2>
<div class="w-post-elm">
<span class="Price-amount">120<span class="Price-currencySymbol">$</span></span>
</div>
</div>
</div>
</div>
</article>
</div>
</div>
product2 's parent is hidden, if this is what you looked for. there can be many, it will hide every .owl-item holding a direct child with the class .product_cat-19.
if you want to hide any parent container if it has not the .w-grid-list ,
same way check the class then if(okay){leave it} else { hide it}
for (let e of document.querySelectorAll('.product_cat-19')) {
var dady = e.parentNode;
if (dady.classList.contains("w-grid-list")) {}
else {
dady.style.display="none";
}
}
<div class="w-grid-list">
<article class="product_cat-19">
<div class="w-grid-item-h">
<a class="w-grid-item-anchor" href="#"></a>
<div class="w-vwrapper">
<div class="w-post-elm">
<a href="">
title1
</a>
</div>
<div class="w-post-elm">
<span class="w-post-elm-before">color code : </span>
<span class="sku">228</span>
</div>
<div class="w-html">color</div>
</div>
</div>
</article>
<article class="product_cat-19">
<div class="w-grid-item-h">
<a class="w-grid-item-anchor" href="#"></a>
<div class="w-vwrapper">
<div class="w-post-elm">
<a href="">
title2
</a>
</div>
<div class="w-post-elm">
<span class="w-post-elm-before">color code : </span>
<span class="sku">229</span>
</div>
<div class="w-html">color</div>
</div>
</div>
</article>
</div>
<div class="owl-stage">
<div class="owl-item active" style="width: 204px;">
<article class="product_cat-18">
<div class="w-grid-item-h">
<div class="w-hwrapper">
<div class="w-vwrapper">
<div class="w-post-elm">
</div>
<h2 class="w-post-elm">
title of product1
</h2>
<div class="w-post-elm">
<span class="Price-amount">140<span class="Price-currencySymbol">$</span></span>
</div>
</div>
</div>
</div>
</article>
</div>
<!-- will be hidden -->
<div class="owl-item active" style="width: 204px;">
<!-- because of this child -->
<article class="product_cat-19">
<div class="w-grid-item-h">
<div class="w-hwrapper">
<div class="w-vwrapper">
<div class="w-post-elm">
</div>
<h2 class="w-post-elm">
title of product2
</h2>
<div class="w-post-elm">
<span class="Price-amount">120<span class="Price-currencySymbol">$</span></span>
</div>
</div>
</div>
</div>
</article>
</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>
I'm new to this section. I'm using a wordpress homepage and use wpbakery for creating my content.
My specific problem is that I have an accordion but cannot open it automatically.
That's what I did: created an accordion with different tabs. I wanna use a link like test.com\accordion#tab2 open the side and automatically the right tab2 of the accordion. Anyone know the code of JS I could use to solve this?
<div class="wpb_column vc_main_column vc_column_container vc_col-sm-12 typo-default">
<div class="vc_column-inner ">
<div class="wpb_wrapper">
<div class="vc_tta-container" data-vc-action="collapse">
<div class="vc_general vc_tta vc_tta-tabs vc_tta-color-grey vc_tta-style-classic vc_tta-shape-rounded vc_tta-spacing-1 vc_tta-tabs-position-top vc_tta-controls-align-left">
<div class="vc_tta-tabs-container">
<ul class="vc_tta-tabs-list">
<li class="vc_tta-tab vc_active" data-vc-tab="">
<a href="#tabid1" data-vc-tabs="" data-vc-container=".vc_tta">
<span class="vc_tta-title-text">Tab 1</span>
</a>
</li>
<li class="vc_tta-tab" data-vc-tab="">
<a href="#tabid2" data-vc-tabs="" data-vc-container=".vc_tta">
<span class="vc_tta-title-text">Tab 2</span>
</a>
</li>
<li class="vc_tta-tab" data-vc-tab="">
<a href="#tabid3" data-vc-tabs="" data-vc-container=".vc_tta">
<span class="vc_tta-title-text">Tab 3</span>
</a>
</li>
</ul>
</div>
<div class="vc_tta-panels-container">
<div class="vc_tta-panels">
<div class="vc_tta-panel vc_active" id="tabid1" data-vc-content=".vc_tta-panel-body">
<div class="vc_tta-panel-heading">
<h4 class="vc_tta-panel-title">
<a href="#tabid1" data-vc-accordion="" data-vc-container=".vc_tta-container">
<span class="vc_tta-title-text">Tab 1</span>
</a>
</h4>
</div>
<div class="vc_tta-panel-body" style="">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>text1</p>
</div>
</div>
</div>
</div>
<div class="vc_tta-panel" id="tabid2" data-vc-content=".vc_tta-panel-body">
<div class="vc_tta-panel-heading">
<h4 class="vc_tta-panel-title">
<a href="#tabid2" data-vc-accordion="" data-vc-container=".vc_tta-container">
<span class="vc_tta-title-text">Tab 2</span>
</a>
</h4>
</div>
<div class="vc_tta-panel-body" style="">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>text2</p>
</div>
</div>
</div>
</div>
<div class="vc_tta-panel" id="tabid3" data-vc-content=".vc_tta-panel-body">
<div class="vc_tta-panel-heading">
<h4 class="vc_tta-panel-title">
<a href="#tabid3" data-vc-accordion="" data-vc-container=".vc_tta-container">
<span class="vc_tta-title-text">Tab 3</span>
</a>
</h4>
</div>
<div class="vc_tta-panel-body" style="height: 0px;">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>text3</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I'm trying to create an automatic text change (testimonials like ont click and scroll down please to see changing testimonials
<div class="col-sm-12">
<a href="clients">
<div class="box">
<p>Testimonial 1</p>
</div>
<div class="author">Pete</div>
</a>
</div>
<div class="col-sm-12">
<a href="clients">
<div class="box">
<p>Testimonial 2</p>
</div>
<div class="author">Fiona</div>
</a>
</div>
<div class="col-sm-12">
<a href="clients">
<div class="box">
<p>Testimonial 3</p>
</div>
<div class="author">Helen</div>
</a>
</div>
<div class="col-sm-12">
<a href="clients">
<div class="box">
<p>Testimonial 4</p>
</div>
<div class="author">Laura</div>
</a>
</div>
I need each testimonial to show for few seconds and then change to another one so only one is shown at time. I'm not a good programmer and was trying to find this on google but I didn't. Thank you for help.
Try this
<div class="testimonial">
<a href="clients">
<div class="box">
<p>Testimonial 1</p>
</div>
<div class="author">Pete</div>
</a>
</div>
<div class="testimonial">
<a href="clients">
<div class="box">
<p>Testimonial 2</p>
</div>
<div class="author">Fiona</div>
</a>
</div>
<div class="testimonial">
<a href="clients">
<div class="box">
<p>Testimonial 3</p>
</div>
<div class="author">Helen</div>
</a>
</div>
<div class="testimonial">
<a href="clients">
<div class="box">
<p>Testimonial 4</p>
</div>
<div class="author">Laura</div>
</a>
</div>
and jquery:
var divs = $('div[class^="testimonial"]').hide(),
i = 0;
(function cycle() {
divs.eq(i).fadeIn(400)
.delay(1000)
.fadeOut(400, cycle);
i = ++i % divs.length;
})();
>> working example <<
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 recently installed "FullPage.js" to my site. I figured out how to get the slides working but the sections won't for some reason. Can't seem to find anything in the console.
<div class="section" id="section1">
<div class="slide active">
<div class="wrapper">
<span class="line"></span>
<div class="title">HOME</div>
<span class="line2"></span>
<div class="post">
<h1>Hey I'm <strong>Matt Hunzinger</strong></h1><br>
<p>I like making flat designs that <strong>elevate</strong> my client's businesses<br><br><span class="toSlide" data-index="3">Contact Me</span></p> <br> <hr> <br> <br> <br> <br> <br>
<div class="grid">
<span class="toSlide" data-index="2">
<div class="hex" id="about">
<li>About Me</li>
<img src="about.png">
</div>
</span>
<span class="toSlide" data-index="3">
<div class="hex" id="contact">
<img src="email.png">
</div>
</span>
<span class="toSlide" data-index="4">
<div class="hex" id="about">
<li>Work</li>
<img src="about.png">
</div>
</span>
<br>
</div>
</div>
</div>
</div>
</div>
<div class="section" id="section2">
<div class="slide">
<h1> hello all</h1>
</div>
</div>
JS
$(document).ready(function () {
$.fn.fullpage({
resize: false
});
});