I have a question for toggle, I wrote a function which when I hover some image then that image was change and click then div will display and other image click:hover acting is same close display before selected
this is html code
<div class="bs-example" data-example-id="simple-thumbnails">
<div class="row">
<div class="col-xs-6 col-md-4 thumbnail">
<img class="intro_ezer"
src="/img/intro_ezer_main.png"
data-holder-rendered="true"display:block;">
</div>
<div class="col-xs-6 col-md-4 thumbnail">
<img class="intro_coloris"
src="/img/intro_coloris_main.png"
data-holder-rendered="true"display:block;">
</div>
<div class="col-xs-6 col-md-4 thumbnail">
<img class="intro_galaxia"
src="/img/intro_galaxia_main.png"
data-holder-rendered="true"display:block;">
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-3 intro_ezer_detail intro">
<img class="intro_margot_main"
src="/img/intro_ezer.jpg">
</div>
<div class="col-xs-12 col-md-3 intro_coloris_detail intro">
<img class="intro_nanobuble"
src="/img/intro_ezer.jpg">
</div>
<div class="col-xs-12 col-md-3 intro_galaxia_detail intro">
<img class="intro_teatoxy"
src="/img/intro_ezer.jpg">
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4">
<img
class="intro_margot" src="/img/intro_margot_main.png"
data-holder-rendered="true"display:block;">
</div>
<div class="col-xs-6 col-md-4">
<img
class="intro_nanobuble"
src="/img/intro_nanobuble_main.png"
data-holder-rendered="true"display:block;">
</div>
<div class="col-xs-6 col-md-4">
<img class="intro_teatoxy"
src="/img/intro_teatoxy_main.png"
data-holder-rendered="true"display:block;">
</div>
</div>
<div class="row detail">
<div class="col-xs-12 col-md-3 intro">
<img src="/img/intro_ezer.jpg">
</div>
<div class="col-xs-12 col-md-3 intro_nanobuble_detail intro">
<img src="/img/intro_ezer.jpg">
</div>
<div class="col-xs-12 col-md-3 intro_teatoxy_detail intro">
<img src="/img/intro_ezer.jpg">
</div>
</div>
</div>
javascript
var className = "";
var toggleImg = "";
$('div').find('img').hover(function() {
className = $(this).attr('class');
this.src = '/img/' + className + '_hover.png';
}, function() {
this.src = '/img/' + className + '_main.png';
}).click(function(e) {
toggleImg = className + "_detail";
e.preventDefault(); $('.intro').hide()
$("."+className+"_detail").show();
})
How can I do?
You should use .each
Check the example below.
HTML :
<div>
<img alt="chrome" src="https://lh3.ggpht.com/O0aW5qsyCkR2i7Bu-jUU1b5BWA_NygJ6ui4MgaAvL7gfqvVWqkOBscDaq4pn-vkwByUx=w300">
</div>
<div>
<img alt="firefox" src="https://www.mozilla.org/media/img/firefox/firefox-256.e2c1fc556816.jpg">
</div>
JS :
$('div img').each(function() {
$(this).click(function() {
alert($(this).attr('alt'));
});
});
Related
I have a problem with owl carousel and till now I don't have any ideas how to fix it.
So on the image 1 you can see the normal behaviour of the slider. On the second one you will see the extended functionality of it. The idea is very simple, when user click on the element, he should expand it, but when the element is expanded all other element goes to 2 rows and I don't want to happen.
Image 1
Image 2
also Source code of one element
<div class="element box-shadow">
<div class="child">
<div class="row">
<div class="col-xs-12 col-md-8">
<span>05.</span>
<h3>Graphic Designer</h3>
<p class="inventive">Inventive Studio</p>
<p class="view-more">View more <img src="assets/images/view-more.svg" /></p>
</div>
<div class="col-xs-12 col-md-4 portfolio-image" >
<img src="assets/images/inventive-small-img.png" />
</div>
</div>
</div>
<div class="parent hidden">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="row">
<div class="col-xs-12 col-md-8">
<div class="row " style="margin-bottom: 15px;" >
<div class="col-xs-12 col-md-3">
<img src="assets/images/inventive-small-img.png" style="width:34px" class="rounded-circle">
</div>
<div class="col-xs-12 col-md-9 text no-padding" >
<h3>Graphic Designer</h3>
<p class="inventive">Inventive Studio</p>
</div>
</div>
</div>
<div class="col-xs-12 col-md-4 social-el" style="padding-left:0;">
<div class="stars">
<img class="mr-2" src="assets/images/full_star.svg" />
<img class="mr-2" src="assets/images/full_star.svg" />
<img class="mr-2" src="assets/images/half_star.svg" />
<img class="mr-2" src="assets/images/empty_star.svg" />
<img src="assets/images/empty_star.svg" />
</div>
</div>
</div>
<img src="assets/images/inventive-studio-img.png" class="img-fluid">
<div class="content">
<p >Designing and producing catalogs, sales sheets, proposals, scenario illustrations, brochures, posters, custom displays for trade shows and in-house exhibits and all others items.</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<a class="view-less" href="#"><img src="assets/images/view-more.svg"/> View Less</a>
</div>
<div class="col-xs-12 col-md-6">
<div class="stars">
<img src="assets/images/Facebook.svg"/>
<img class="mr-10" src="assets/images/twitter.svg"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
also will share and jquery code
$(".owl-carousel").owlCarousel({
margin:10,
loop: true,
autoWidth: true,
items:3,
rewind: true,
autoplay: true,
responsiveClass:true,
});
$('.work').each(function(i, el) {
$parent = $(el);
$('.element', $parent).each(function(i, item) {
$element = $(item)
$element.on('click', function(e) {
$current = $(this)
console.log($current)
if ($('.parent', $current).hasClass('hidden')) {
$('.parent', $current).removeClass('hidden');
$current.addClass('expand-element');
$current.css('border-radius', 10)
$('.child', $current).addClass('hidden');
} else {
$current.removeClass('expand-element');
$('.parent', $current).removeClass('visible').addClass('hidden');
$current.css('border-radius', 20)
$('.child', $current).removeClass('hidden');
}
})
})
})
I try to create a reward card, basically I have a div with 10 images with same id and what I want to achieve is that every time user click a button, images in the div will replace by a new images.
so far with the code below, I only achieve first image replaced than it stops and nothing else happen
<div class="container">
<h1>Reward Program</h1>
<div class="section" id="card">
<div class="row">
<div class="col-lg-4 col-sm-3" id="tut">
<img src="images/mail.png" id="stamp" alt="">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" id="stamp" alt="">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" id="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" id="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" id="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" id="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" id="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" id="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" id="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" id="stamp">
</div>
</div>
</div>
</div>
<button value="show Check" onclick="showCheck()" class="btn btn-dark btn-lg">Buy now</button>
var counter = 0,
checked = ["images/check.png", "images/check1.png", "images/check2.png", "images/check3.png", "images/check4.png", "images/check5.png", "images/check6.png", "images/check7.png", "images/check8.png", "images/check9.png"];
showCheck = function () {
document.getElementById("stamp").src = checked[counter];
counter++;
if (counter >= checked.length) {
counter = 0;
}
};
You can only have one element ID on a website (each ID has to be unique, otherwise you will get an error), so it's best to change those IDs to classes.
You don't need a loop after all, as you're not changing all the images with a single click of the button, but rather, one at a time, so just keep clicking the button.
You can remove the alt tag on the images and the imges[counter].alt = checked[counter] in the code. I just put it there so you can see what's happening. Run the code snippet to see it working:
var counter = 0;
var checked = ["images/check.png", "images/check1.png", "images/check2.png", "images/check3.png", "images/check4.png", "images/check5.png", "images/check6.png", "images/check7.png", "images/check8.png", "images/check9.png"];
function showCheck() {
var imges = document.querySelectorAll(".stamp")
imges[counter].src = checked[counter]
imges[counter].alt = checked[counter]
counter++
if (counter >= checked.length) {
counter = 0;
}
};
<div class="row">
<div class="col-lg-4 col-sm-3" id="tut">
<img src="images/mail.png" alt="mail" class="stamp" alt="">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" alt="mail" class="stamp" alt="">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" alt="mail" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" alt="mail" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" alt="mail" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" alt="mail" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" alt="mail" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" alt="mail" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" alt="mail" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" alt="mail" class="stamp">
</div>
</div>
<button value="show Check" onclick="showCheck()" class="btn btn-dark btn-lg">Buy now</button>
document.getElementById("tut").src = checked[counter];
First of all it looks like you are setting src attribute of the <div>.
If you want to replace the image you are supposed the set the src attribute of the <img> inside the <div>.
Also the id attribute in supposed to be unique for each html element.
If you want several elements to be referred to by a single attribute value use class attribute instead.
I have slightly tweaked your code. This should solve your problem.
<div class="container">
<h1>Reward Program</h1>
<div class="section" id="card">
<div class="row">
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" class="stamp" alt="">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" class="stamp" alt="">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" class="stamp">
</div>
</div>
</div>
</div>
<button value="show Check" onclick="showCheck()" class="btn btn-dark btn-lg">Buy now</button>
var counter = 0,
var checked = ["images/check.png", "images/check1.png", "images/check2.png", "images/check3.png", "images/check4.png", "images/check5.png", "images/check6.png", "images/check7.png", "images/check8.png", "images/check9.png"];
function showCheck() {
document.getElementsByClassName("stamp").forEach(img=>{
img.src=checked[counter++];
});
if (counter >= checked.length) {
counter = 0;
}
}
This problem is you are replacing src of only one element. You need to use a loop to replace src of all the elements.
Below is the working snippet of the function:
showCheck = function () {
$("img[id*='stamp']").each(function(){
this.src=checked[counter];
});
counter++;
if(counter >= checked.length) {
counter = 0;
}
};
Below is the HTML followed by JavaScript file called filter.js.
I am developing a gallery page on my website and i believe i am missing some selector id or something because when i check the page, none of the pictures change and none of the categories work. please can someone help me see what i'm missing. Thank You
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
<script src="js/filter.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"
id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!--Start about area -->
<div class="about_area">
<div class="container">
<div class="row">
<div class="gallery col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h1 class="gallery-title">Gallery</h1>
</div>
<div align="center">
<button class="btn btn-default filter-button" data-filter="all">All</button>
<button class="btn btn-default filter-button" data-filter="hdpe">HDPE Pipes</button>
<button class="btn btn-default filter-button" data-filter="sprinkle">Sprinkle Pipes</button>
<button class="btn btn-default filter-button" data-filter="spray">Spray Nozzle</button>
<button class="btn btn-default filter-button" data-filter="irrigation">Irrigation
Pipes</button>
</div>
<br/>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<!--end about area -->
This is the javascript below
$(document).ready(function(){
$(".filter-button").click(function(){
var value = $(this).attr('data-filter');
if(value == "all")
{
// $('.filter').removeClass('hidden');
$('.filter').show('1000');
}else{
// $('.filter[filter-item="'+value+'"]').removeClass('hidden');
// $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
$(".filter").not('.'+value).hide('3000');
$('.filter').filter('.'+value).show('3000');
}
});
if ($(".filter-button").removeClass("active")) {
$(this).removeClass("active");
}
$(this).addClass("active");
});
"Can anyone Spot Error?" There is None atleast not in the code you posted , just Make sure you have the bootstrap and jquery working. The Rest of it seems to be working fine, i have changed the images so that you could see that the code is working
$(document).ready(function() {
$(".filter-button").click(function() {
var value = $(this).attr("data-filter");
if (value == "all") {
// $('.filter').removeClass('hidden');
$(".filter").show("1000");
} else {
// $('.filter[filter-item="'+value+'"]').removeClass('hidden');
// $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
$(".filter")
.not("." + value)
.hide("3000");
$(".filter")
.filter("." + value)
.show("3000");
}
});
if ($(".filter-button").removeClass("active")) {
$(this).removeClass("active");
}
$(this).addClass("active");
});
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
<style>
img {
width: 365px;
height: 365px;
}
</style>
</head>
<body>
<div class="about_area">
<div class="container">
<div class="row">
<div class="gallery col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h1 class="gallery-title">Gallery</h1>
</div>
<div align="center">
<button class="btn btn-default filter-button" data-filter="all">
All
</button>
<button class="btn btn-default filter-button" data-filter="hdpe">
HDPE Pipes
</button>
<button
class="btn btn-default filter-button"
data-filter="sprinkle"
>
Sprinkle Pipes
</button>
<button class="btn btn-default filter-button" data-filter="spray">
Spray Nozzle
</button>
<button
class="btn btn-default filter-button"
data-filter="irrigation"
>
Irrigation Pipes
</button>
</div>
<br />
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"
>
<img
src="https://www.apollopipes.com/media/product/18068_hdpe.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle"
>
<img
src="https://5.imimg.com/data5/VT/SC/MY-8859326/hdpe-sprinkler-pipe-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"
>
<img
src="https://www.fastflowpipes.com/wp-content/uploads/2014/10/19737_HDPE-PIPES.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"
>
<img
src="https://apollo-singapore.akamaized.net/v1/files/xbjlgpzdkcfh3-PK/image;s=850x0"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray"
>
<img
src="https://5.imimg.com/data5/LH/MW/MY-3212000/airless-spray-pipe-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"
>
<img
src="https://5.imimg.com/data5/CX/SG/MY-24086146/agricultural-drip-irrigation-pipes-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray"
>
<img
src="https://5.imimg.com/data5/LH/MW/MY-3212000/airless-spray-pipe-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"
>
<img
src="https://5.imimg.com/data5/CX/SG/MY-24086146/agricultural-drip-irrigation-pipes-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"
>
<img
src="https://5.imimg.com/data5/CX/SG/MY-24086146/agricultural-drip-irrigation-pipes-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"
>
<img
src="https://www.apollopipes.com/media/product/18068_hdpe.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray"
>
<img
src="https://5.imimg.com/data5/LH/MW/MY-3212000/airless-spray-pipe-500x500.jpg/"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle"
>
<img
src="https://5.imimg.com/data5/VT/SC/MY-8859326/hdpe-sprinkler-pipe-500x500.jpg"
class="img-responsive"
/>
</div>
</div>
</div>
</div>
<!--end about area -->
<!--The JS File -->
<script src="./index.js"></script>
</body>
</html>
$(document).ready(function() {
$(".filter-button").click(function() {
var value = $(this).attr("data-filter");
if (value == "all") {
// $('.filter').removeClass('hidden');
$(".filter").show("1000");
} else {
// $('.filter[filter-item="'+value+'"]').removeClass('hidden');
// $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
$(".filter")
.not("." + value)
.hide("3000");
$(".filter")
.filter("." + value)
.show("3000");
}
});
if ($(".filter-button").removeClass("active")) {
$(this).removeClass("active");
}
$(this).addClass("active");
});
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
<style>
img {
width: 365px;
height: 365px;
}
</style>
</head>
<body>
<div class="about_area">
<div class="container">
<div class="row">
<div class="gallery col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h1 class="gallery-title">Gallery</h1>
</div>
<div align="center">
<button class="btn btn-default filter-button" data-filter="all">
All
</button>
<button class="btn btn-default filter-button" data-filter="hdpe">
HDPE Pipes
</button>
<button
class="btn btn-default filter-button"
data-filter="sprinkle"
>
Sprinkle Pipes
</button>
<button class="btn btn-default filter-button" data-filter="spray">
Spray Nozzle
</button>
<button
class="btn btn-default filter-button"
data-filter="irrigation"
>
Irrigation Pipes
</button>
</div>
<br />
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"
>
<img
src="https://www.apollopipes.com/media/product/18068_hdpe.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle"
>
<img
src="https://5.imimg.com/data5/VT/SC/MY-8859326/hdpe-sprinkler-pipe-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"
>
<img
src="https://www.fastflowpipes.com/wp-content/uploads/2014/10/19737_HDPE-PIPES.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"
>
<img
src="https://apollo-singapore.akamaized.net/v1/files/xbjlgpzdkcfh3-PK/image;s=850x0"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray"
>
<img
src="https://5.imimg.com/data5/LH/MW/MY-3212000/airless-spray-pipe-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"
>
<img
src="https://5.imimg.com/data5/CX/SG/MY-24086146/agricultural-drip-irrigation-pipes-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray"
>
<img
src="https://5.imimg.com/data5/LH/MW/MY-3212000/airless-spray-pipe-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"
>
<img
src="https://5.imimg.com/data5/CX/SG/MY-24086146/agricultural-drip-irrigation-pipes-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"
>
<img
src="https://5.imimg.com/data5/CX/SG/MY-24086146/agricultural-drip-irrigation-pipes-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"
>
<img
src="https://www.apollopipes.com/media/product/18068_hdpe.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray"
>
<img
src="https://5.imimg.com/data5/LH/MW/MY-3212000/airless-spray-pipe-500x500.jpg/"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle"
>
<img
src="https://5.imimg.com/data5/VT/SC/MY-8859326/hdpe-sprinkler-pipe-500x500.jpg"
class="img-responsive"
/>
</div>
</div>
</div>
</div>
<!--end about area -->
<!--The JS File -->
<script src="./index.js"></script>
</body>
</html>
how to remove functionality of "ALL" button i want to show only rest categories instead of all. by default all images should now show when run the code.
I would like to target only the classes "Front" and "Back" of the "Flip-tile" that I am currently hovering over. How do you solve this with javascript, currently it is toggling them all at the same time.
The HTML:
<div class="flip-tile">
<div class="front">
<div class="project-tile primary-color col-md-4 col-xs-12">
<img class="tile-img" src="../static/img/first.png">
<div class="tile-text">
<h4><span class="light">Front side</span></h4>
</div>
</div>
</div>
<div class="back" style="display:none;">
<div class="project-tile secondary-color col-md-4 col-xs-12">
<div class="tile-text">
<h4><span class="light">Back side</span></h4>
</div>
</div>
</div>
</div>
<div class="flip-tile">
<div class="front">
<div class="project-tile primary-color col-md-4 col-xs-12">
<img class="tile-img" src="../static/img/first.png">
<div class="tile-text">
<h4><span class="light">Front side</span></h4>
</div>
</div>
</div>
<div class="back" style="display:none;">
<div class="project-tile secondary-color col-md-4 col-xs-12">
<div class="tile-text">
<h4><span class="light">Backside</span></h4>
</div>
</div>
</div>
</div>
The Javascript:
$(".flip-tile").hover(function() {
$(".front").hide()
$(".back").show()},
function() {
$(".back").hide()
$(".front").show()
});
It's so easy using find() on jQuery, but you can make it on easiest way with CSS.
Javascript:
$(".flip-tile").hover(function() {
$(this).find(".front").hide();
$(this).find(".back").show();
},
function() {
$(this).find(".back").hide();
$(this).find(".front").show();
}
);
CSS solution
.flip-title .front {
display: block;
}
.flip-title .back {
display: none;
}
.flip-title:hover .front {
display: none;
}
.flip-title:hover .back {
display: block;
}
Use $(this).find(...).
$(".flip-tile").hover(function() {
$(this).find(".front").hide()
$(this).find(".back").show()},
function() {
$(this).find(".back").hide()
$(this).find(".front").show()
});
Please take a look on https://api.jquery.com/class-selector/
I.e.
<script>
$( ".myclass.otherclass" ).css( "border", "13px solid red" );
</script>
The example will apply the border style to any .myclass.otherclass items along the HTML
good luck!
Try this:-
$(".flip-tile").hover(function() {
$(this).find(".front").hide()
$(this).find(".back").show()},
function() {
$(this).find(".back").hide()
$(this).find(".front").show()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flip-tile">
<div class="front">
<div class="project-tile primary-color col-md-4 col-xs-12">
<img class="tile-img" src="../static/img/first.png">
<div class="tile-text">
<h4><span class="light">Front side</span></h4>
</div>
</div>
</div>
<div class="back" style="display:none;">
<div class="project-tile secondary-color col-md-4 col-xs-12">
<div class="tile-text">
<h4><span class="light">Back side</span></h4>
</div>
</div>
</div>
</div>
<div class="flip-tile">
<div class="front">
<div class="project-tile primary-color col-md-4 col-xs-12">
<img class="tile-img" src="../static/img/first.png">
<div class="tile-text">
<h4><span class="light">Front side</span></h4>
</div>
</div>
</div>
<div class="back" style="display:none;">
<div class="project-tile secondary-color col-md-4 col-xs-12">
<div class="tile-text">
<h4><span class="light">Backside</span></h4>
</div>
</div>
</div>
</div>
I'm trying to create a tile layout with bootstrap. Here is the website that I would like to try to copy: link
I kind of achieved this by using columns but using margins and paddings will break them. Aforementioned website uses some kind of script to automatically set their position value (e.g., position:absolute;top:0;left:248px). How is this done?
Here is what I have: jsfiddle
<div class="col-lg-4">
<div class="row">
<div class="col-lg-12 metro-1">
<img src="https://placehold.it/600x600/313236/000000" style="width:100%;">
<div class="top-text-block">
<div class="top-text-block-inner">
check out our<br>hottest winit
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 metro-2">
<div class="row upper-metro">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<img src="https://placehold.it/300x300/ffffff/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<img src="https://placehold.it/300x300/23AE8F/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
<div class="row lower-metro">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 lower-metro-inner">
<img src="https://placehold.it/600x300/DEDCE1/000000" style="width:100%;">
<div class="center-text-block">
some text goes here
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 metro-3">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="col-lg-12">
<img src="https://placehold.it/300x300/5B2988/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-12">
<img src="https://placehold.it/300x300/C64001/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 right-metro">
<img src="https://placehold.it/300x600/017B39/000000" style="width:100%;">
<div class="center-text-block">
some text goes here
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="col-lg-12 metro-4">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="col-lg-12">
<img src="https://placehold.it/300x300/5535B1/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-12">
<img src="https://placehold.it/300x300/7EC0BF/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="col-lg-12">
<img src="https://placehold.it/300x300/E4A706/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
<div class="col-lg-12">
<img src="https://placehold.it/300x300/925D63/000000" style="width:100%;">
<a href="#" class="block-layer">
<div class="block-layer-inner">
</div>
</a>
<div class="bottom-text-block">
<div class="block-name">
Text
</div>
<div class="block-price">
Price
</div>
</div>
</div>
</div>
</div>
</div>
</div>
It was called Mansory layout. I didn't know what it was called but now I got it. Funny how things are so easy when you actually know what to search for. Haha!