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");
Related
I want the addToCartBar show when the mouse enters the any of the grid-items , it should appear on that grid item only, however it is just working on the first one. What am i doing wrong.
Here is the necessary ejs code
<div class="main-cont">
<div class="grid-container">
<div class="grid-item grid-item-1">
<div class="add-to-cart">ADD TO CART</div>
<div class="item-img">
<img src="/NikeTiempo.png" alt="">
</div>
<div class="card-text">
<h5>Category</h5>
<h3 class="product-name">Product Name</h3>
<h3 class="price">$200</h3>
</div>
</div>
<div class="grid-item grid-item-2">
<div class="add-to-cart">ADD TO CART</div>
<div class="item-img">
<img class="rotated-img" src="/AdidasAce.png" alt="">
</div>
<div class="card-text">
<h5>Category</h5>
<h3 class="product-name">Product Name</h3>
<h3 class="price">$200</h3>
</div>
</div>
<div class="grid-item grid-item-3">
<div class="add-to-cart">ADD TO CART</div>
<div class="item-img">
<img src="/NikeTiempo.png" alt="">
</div>
<div class="card-text small-card-text">
<h5>Category</h5>
<h3 class="product-name">Product Name</h3>
<h3 class="price">$200</h3>
</div>
</div>
<div class="grid-item grid-item-4">
<div class="add-to-cart">ADD TO CART</div>
<div class="item-img">
<img src="/NikeTiempo.png" alt="">
</div>
<div class="card-text small-card-text">
<h5>Category</h5>
<h3 class="product-name">Product Name</h3>
<h3 class="price">$200</h3>
</div>
</div>
<div class="grid-item grid-item-5">
<div class="add-to-cart">ADD TO CART</div>
<div class="item-img">
<img src="/NikeTiempo.png" alt="">
</div>
<div class="card-text small-card-text">
<h5>Category</h5>
<h3 class="product-name">Product Name</h3>
<h3 class="price">$200</h3>
</div>
</div>
<div class="grid-item grid-item-6">
<div class="add-to-cart">ADD TO CART</div>
<div class="item-img">
<img src="/NikeTiempo.png" alt="">
</div>
<div class="card-text small-card-text">
<h5>Category</h5>
<h3 class="product-name">Product Name</h3>
<h3 class="price">$200</h3>
</div>
</div>
</div>
</div>
Here is the JS for it
// //Hover Effect On Grid-Item
let cardItems = document.querySelectorAll('.grid-item');
let addToCartBar = document.querySelector('.add-to-cart')
for (let cardItem of cardItems) {
cardItem.addEventListener('mouseenter' , () => {
addToCartBar.style.display = "flex"
})
}
I know that the above code loops through the array of cardItems and for each one, it applies the function so I have no idea what I am doing wrong. Any help is appreciated. Thank you.
The problem is that you actually change the display property of the first card item's button every time because of let addToCartBar = document.querySelector('.add-to-cart'). This will traverse the dom and grab the first matching element. In order to achieve what you want you have to query inside each cardItem like below:
// //Hover Effect On Grid-Item
let cardItems = document.querySelectorAll('.grid-item');
for (let cardItem of cardItems) {
cardItem.addEventListener('mouseenter' , () => {
let addToCartBar = cardItem.querySelector('.add-to-cart')
addToCartBar.style.display = "flex"
})
}
For the posted code i believe this answers you question:
The Document method querySelector() returns the first Element within the document that matches the specified selector, or group of selectors. If no matches are found, null is returned.
So you are applying the event listeners callback to a single element, you can select multiple elements with the .querySelectorAll() .
As well you can use the hover css selector which will simplify your code.
You can create a separate css file and link it into your js file or add the snipet directly into your javascript code.
.add-to-card:hover {
//add wanted behaviour here
}
You can read more about css selectors here
I am working on a website in which I want to place next and previous buttons on images so that its easy for the users to navigate through the images.
The php code which I have used with carousel classes are:
<div class="text-center border-right px-0">
<div id="owl_item_images" class="owl-carousel owl-theme">
<?php
if(isset($data['item']->media))
{
foreach ($data['item']->media as $media)
{
echo '<div class="item">
<div class="item_image_wrapper mx-auto">
<img class="item_images_carousel" src="'.$media->url.'">
</div>
</div>';
//'.$media->url.';
}
}
?>
</div>
</div>
The HTML code rendered at the front end is:
<div id="owl_item_images" class="owl-carousel owl-theme owl-loaded owl-drag">
<div class="owl-stage-outer owl-height" style="height: 350px;">
<div class="owl-stage" style="transform: translate3d(-7677px, 0px, 0px); transition: 1.5s; width: 8530px;">
<div class="owl-item">
<div class="item">
<div class="item_image_wrapper mx-auto">
<img class="item_images_carousel" src=".jpg">
</div>
</div>
</div>
<div class="owl-item">
---
</div>
<div class="owl-item">
---
</div>
<div class="owl-item">
---
</div>
<div class="owl-item active" style="width: 853px;">
<div class="item">
<div class="item_image_wrapper mx-auto">
<img class="item_images_carousel" src=".jpg">
</div>
</div>
</div>
</div>
</div>
<div class="owl-nav disabled">
<div class="owl-prev">prev</div>
<div class="owl-next">next</div>
</div>
<div class="owl-dots">
<div class="owl-dot"><span></span></div>
<div class="owl-dot"><span></span></div>
<div class="owl-dot"><span></span></div>
-
-
-
-
<div class="owl-dot active"><span></span></div>
</div>
</div>
Problem Statement:
I am wondering what changes I should do in the PHP code (as html code is rendered at the front end) above so that previous/next buttons are visible.
UPDATE:
On removing display none I can see next and previous buttons but I am wondering still how I can hide next and previous buttons from a single image.
<div class="owl-nav disabled">
<div class="owl-prev">prev</div>
<div class="owl-next">next</div>
</div>
.owl-carousel .owl-dots.disabled, .owl-carousel .owl-nav.disabled {
/* display: none; */
}
For owl carousel navigation is disabled by default. We have to enable it while initializing the carousel.
$(document).ready(function(){
$(".owl-carousel").owlCarousel({
nav : true;
});
});
You can refer this link for additional options
The owl-carousel will automatically disable the owl-prev and owl-next if there is only one item in the list.
So first verify that you have more than one item in the list. Try examples with increasing numbers of items and see when/if owl-prev and owl-next appear. There is logic in the library to disable the control under certain circumstances.
Otherwise look to link below that suggests ways to change the owl library class to avoid the problem under certain circumstances.
https://github.com/OwlCarousel2/OwlCarousel2/issues/1809
Not sure if i fully understand your question but maybe remove "disabled" from here:
<div class="owl-nav disabled">
In my mixitup, i am doing a basic filter but when i click one of the filter buttons, filtered items comes and disappears after a second. I can see in firebug, it adds “fail” class to the container of these items. But i can’t see what kind of error is that.
In codepen: http://codepen.io/anon/pen/PPOgwr
Here is my HTML for filter buttons:
<div class="row row-centered filter-section">
<div class="col-md-7 col-centered">
<ul class="filter">
<li>Hepsi</li>
<li>/</li>
<li>Basılı İş</li>
<li>/</li>
<li>Kurumsal Kimlik</li>
<li>/</li>
<li>İlan</li>
<li>/</li>
<li>Ambalaj</li>
<li>/</li>
<li>Stand</li>
<li>/</li>
<li>Film</li>
</ul>
</div>
</div>
Here is the container:
<div class="row grid" id="grid">
<div class="col-md-3 col-sm-6 margin-bottom-30 mix basili">
<div class="position-relative">
<a href="" id="silver1">
<img class="img-responsive" src="isler/silver/silver1.jpg" alt="portfolio">
<div class="overlay">
<div class="portfolio-title text-center">
<h4 class="font-nixie">SILVER DÖKÜM DEMİR KATALOG</h4>
</div>
</div> <!-- /overlay -->
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 margin-bottom-30 mix basili">
<div class="position-relative">
<a href="" id="silver2">
<img class="img-responsive" src="isler/silver/silver3.jpg" alt="portfolio">
<div class="overlay">
<div class="portfolio-title text-center">
<h4 class="font-nixie">SILVER DÖKÜM DEMİR KATALOG</h4>
</div>
</div> <!-- /overlay -->
</a>
</div>
</div>
<div class="col-md-3 col-sm-6 margin-bottom-30 mix ilan">
<div class="position-relative">
<a href="" id="silver3">
<img class="img-responsive" src="isler/silver/silver4.jpg" alt="portfolio">
<div class="overlay">
<div class="portfolio-title text-center">
<h4 class="font-nixie">SILVER DÖKÜM DEMİR KATALOG</h4>
</div>
</div> <!-- /overlay -->
</a>
</div>
</div>
</div>
JS code:
$('#grid').mixItUp();
$('.filter-section').on( 'click', 'a.filter', function() {
var filterValue = $(this).attr('data-filter');
$('#grid').mixItUp('filter', filterValue, false);
$('#grid').on('mixFail', function(e, state){
console.log(state);
});
});
I need your helps
It's probably a bit late to give you an answer on this, but I ran into a similar problem and as part of that I managed to sort yours, too.
To cut it short, your issue is that you applied the 'filter' class on the <ul> as well as the <li> tags. Removing the class from <ul> in the CodePen you provided solves the issue - although messes up your layout.
Hope this helps.
I want to display rows of employee images and, on hover, have a further description box pop up next to the image containing the person's name/biography.
I know hide/show div on hover can be used to achieve this effect, but I'm unsure as to how it will effect the row/col layout.
Any help would be appreciated.
HTML:
<div class="row">
<div class="col-xs-3">
<div class="thumbnail">
<img>
</div>
<div class="thumbnail">
<img>
</div>
<div class="thumbnail">
<img>
</div>
<div class="thumbnail">
<img>
</div>
</div>
<div class="col-xs-3">
<div class="thumbnail">
<img>
</div>
<div class="thumbnail">
<img>
</div>
<div class="thumbnail">
<img>
</div>
<div class="thumbnail">
<img>
</div>
</div>
<div class="col-xs-3">
<div class="thumbnail">
<img>
</div>
<div class="thumbnail">
<img>
</div>
<div class="thumbnail">
<img>
</div>
<div class="thumbnail">
<img>
</div>
</div>
</div>
I believe what you're looking for is a Popover which should lay on top of the existing grid and not interfere with the placement of your images.
You can trigger it to fire on hover by setting a data attribute on each popover like this:
data-trigger="hover"
or by passing it into the initializer like this:
.popover({ trigger: "hover" })
Demo in Stack Snippets:
$('[data-toggle="popover"]').popover({
placement: "auto",
trigger: "hover"
})
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<div class="row">
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://i.imgur.com/wq83mXh.jpg" data-toggle="popover"
title="Mark Otto" data-content="3,972 commits / 496,347 ++ / 484,436 --" >
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://i.imgur.com/RLuBL13.png" data-toggle="popover"
title="Chris Rebert"data-content="1,114 commits / 33,796 ++ / 46,366 --">
</div>
</div>
<div class="col-xs-4">
<div class="thumbnail">
<img src="http://i.imgur.com/UP58UYq.jpg" data-toggle="popover"
title="fat" data-content="805 commits / 143,748 ++ / 100,852 --">
</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.