I want to animate whole bunch of cards in with javascript and hide them when they press a button a data filter. what would be the best way in doing this?
I was thinking of using hide() and show() but zooms the content out and looks bad, I would like to do more of a sorting fade in and out but want to clear the grid and fade items in nicely.
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button-group">
<button class="button category-button" data-filter="all" type="button">
All
</button>
<button class="button category-button" data-filter="attraction" type="button">
attraction
</button>
<button class="button category-button" data-filter="bar-pub" type="button">
bar-pub
</button>
<button class="button category-button" data-filter="theater" type="button">
theater
</button>
</div>
<div class="grid-container">
<div class="grid-x grid-padding-x small-up-2 medium-up-3">
<div class="cell">
<div class="card">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
<h4>This is a row of cards.</h4>
<p>This row of cards is embedded in an X-Y Block Grid.</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
</div>
</div>
</div>
</div>
I think this is what you're after?
This assumes each card is a type of category like your filter buttons.
Notice the new data-type added to the cards and the typo on theatre.
To achieve the fade effect, we use jQuery's fadeOut() and fadeIn() methods. You can view more information about jQuery effects here.
//when a button is clicked
$('.button-group button').on('click', function(){
//store the category of the clicked button
var category = $(this).attr('data-filter');
//Loop through all `.card` elements
$('.card').each(function(){
//If the current card in this loop has the same category as the button and it's not the 'all' button then hide it, otherwise fade all cards back in.
if($(this).attr('data-type') != category && category != 'all') {
$(this).fadeOut();
} else {
$(this).fadeIn()
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/js/foundation.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css" rel="stylesheet"/>
<div class="button-group">
<button class="button category-button" data-filter="all" type="button">
All
</button>
<button class="button category-button" data-filter="attraction" type="button">
attraction
</button>
<button class="button category-button" data-filter="bar-pub" type="button">
bar-pub
</button>
<button class="button category-button" data-filter="theatre" type="button">
theater
</button>
</div>
<div class="grid-container">
<div class="grid-x grid-padding-x small-up-2 medium-up-3">
<div class="cell">
<div data-type="bar-pub" class="card">
<img src="https://placehold.it/100x100">
<div class="card-section">
<h4>I'm the bar/pub type</h4>
<p>This row of cards is embedded in an X-Y Block Grid.</p>
</div>
</div>
</div>
<div class="cell">
<div data-type="attraction" class="card">
<img src="https://placehold.it/100x100">
<div class="card-section">
<h4>I'm the attraction type</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
</div>
</div>
<div class="cell">
<div data-type="theatre" class="card">
<img src="https://placehold.it/100x100">
<div class="card-section">
<h4>I'm the theatre type</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
</div>
</div>
</div>
</div>
You'll wanna apply the data attributes set on your buttons to the corresponding card and from there just query the card based on its' value:
$(function() {
$('.category-button').on('click', function() {
const filter = this.dataset.filter;
const $filteredCard = $(`.card[data-filter="${filter}"]`);
if (filter === 'all') {
$('.card').stop().fadeIn();
} else {
$filteredCard.stop().fadeIn();
$('.card').not($filteredCard).stop().fadeOut();
}
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="button-group">
<button class="button category-button" data-filter="all" type="button">
All
</button>
<button class="button category-button" data-filter="attraction" type="button">
attraction
</button>
<button class="button category-button" data-filter="bar-pub" type="button">
bar-pub
</button>
<button class="button category-button" data-filter="theater" type="button">
theater
</button>
</div>
<div class="grid-container">
<div class="grid-x grid-padding-x small-up-2 medium-up-3">
<div class="cell">
<div class="card" data-filter="attraction">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
<h4>This is a row of cards.</h4>
<p>This row of cards is embedded in an X-Y Block Grid.</p>
</div>
</div>
</div>
<div class="cell">
<div class="card" data-filter="bar-pub">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
</div>
</div>
<div class="cell">
<div class="card" data-filter="theater">
<img src="assets/img/generic/rectangle-1.jpg">
<div class="card-section">
<h4>This is a card.</h4>
<p>It has an easy to override visual style, and is appropriately subdued.</p>
</div>
</div>
</div>
</div>
</div>
Related
In php im used to iterate bootstrap buttons echoing variables inside elements ids, something like
<button id="btn<? echo $i; ?>"/>
i do that for the element id, data-bs-target, aria-controls, and aria-labelledby when i use accordion buttons, however i don't know how to pass the prop inside those element's attributes.
Here's what i had in mind for the component
<script setup>
defineProps(['id','company','dates','position','desc'])
</script>
<template>
<div class="experience">
<div class="accordion-item">
<h2 class="accordion-header" id="heading{{id}}">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{id}}" aria-expanded="false" aria-controls="collapse{{id}}">
<div class="col-3"> {{company}} </div>
<div class="col-5"> {{dates}} </div>
<div class="col-3"> {{position}} </div>
</button>
</h2>
<div id="collapse{{id}}" class="accordion-collapse collapse" aria-labelledby="heading{{id}}" data-bs-parent="#accordionExample" style="">
<div class="accordion-body">
<p> {{desc}} </p>
</div>
</div>
</div>
</div>
</template>
<style scoped>
</style>
You can use dynamic attribute by add a colon before : or v-bind:, And use template string to concat the static string with dynamic id
For example
:id="`heading-${id}`"
<script setup>
defineProps(['id','company','dates','position','desc'])
</script>
<template>
<div class="experience">
<div class="accordion-item">
<h2 class="accordion-header" :id="`heading-${id}`">
<button class="accordion-button" type="button" data-bs-toggle="collapse" :data-bs-target="`#collapse-${id}`" aria-expanded="false" :aria-controls="`collapse-${id}`">
<div class="col-3"> {{company}} </div>
<div class="col-5"> {{dates}} </div>
<div class="col-3"> {{position}} </div>
</button>
</h2>
<div :id="`collapse-${id}`" class="accordion-collapse collapse" :aria-labelledby="`heading-${id}`" data-bs-parent="#accordionExample" style="">
<div class="accordion-body">
<p> {{desc}} </p>
</div>
</div>
</div>
</div>
</template>
<style scoped>
</style>
Fore more details you can have a look at Attribute Binding in Vue docs
Is there any option/s needed so the icons inside nested grid will be clickable?
I have an icon on the parent grid and it's working fine, but when it comes to the icons inside nested grid, nothing happens.
<div class="grid-stack parent-grid">
<div class="grid-stack-item wid-item" data-gs-x="0" data-gs-y="0" data-gs-no-move="true">
<div class="grid-stack-item-content wid-item-content">
<div class="widget-container">
<div class="widget-title">
<span id="wid-title">WIDGET TITLE</span>
<span class="widget-icon icon-enlarge"></span>
<span class="widget-icon icon-bin"></span>
</div>
<div class="widget-body">
<div class="grid-stack widget-component">
<div class='grid-stack-item wid-component-item'>
<div class='grid-stack-item-content'>
<div class='widget-title'>
<span class='widget-icon icon-bin'></span>
</div>
<div class='widget-body'>
<label>Widget 1</label> <br />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(".icon-bin").click(function (e) {
alert("ASD");
});
</script>
I have 4 images which allows users to select only 1 image out of 4.
When the user clicks on any image, the clicked image along with other 3 images should be disabled and the same user has to again click on the 'clicked' image to enable the image.
Basically i need to make the images look like its Clickable (with some borders or something..), Then onclick of image say 'A' the user gets a message (as shown from the when_i_click_carrom()), post which all the images (B,C,D) should be disabled (for that user only), and same user has to click on disabled image 'A' to enable it.
NOTE: Only the Image A should be disabled for the current user and other users, but other images B,C,D should be clickable for other users, until the current user enables the image A
...
<script>
var when_i_click_carrom = function(){
alert('You selected Carrom!');
}
</script>
...
<div class="container">
<div class="grid_layout_row">
<div class="col-md-6">
<div class="sidebar"><img src="images/carrom.jpg" alt="carrom" class="img-responsive" onclick="when_i_click_carrom();"/></div>
</div>
<div class="col-md-6">
<div class="sidebar"><img src="images/foosball.jpg" alt="foosball" class="img-responsive"></div>
</div>
<div class="col-md-6">
<div class="sidebar"><img src="images/table-tennis.jpg" alt="table-tennis" class="img-responsive"></div>
</div>
<div class="col-md-6">
<div class="sidebar"><img src="images/chess.jpg" alt="chess" class="img-responsive"></div>
</div>
</div>
</div>
Try with querySelectorAll .Img not have a default disable attribute .So try with class
document.querySelectorAll('.img-responsive').forEach(function(a) {
a.addEventListener('click', function() {
this.disabled = this.disabled == true ? false : true;
this.classList.toggle('disable')
//console.log(this.disabled)
})
})
.disable {
opacity: 0.5;
}
<div class="container">
<div class="grid_layout_row">
<div class="col-md-6">
<div class="sidebar"><img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="carrom" class="img-responsive"></div>
</div>
<div class="col-md-6">
<div class="sidebar"><img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="foosball" class="img-responsive"></div>
</div>
<div class="col-md-6">
<div class="sidebar"><img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="table-tennis" class="img-responsive"></div>
</div>
<div class="col-md-6">
<div class="sidebar"><img src="https://www.w3schools.com/tags/img_pulpit.jpg" alt="chess" class="img-responsive"></div>
</div>
</div>
</div>
You can check it out over here.
jQuery(".sidebar").click(function(){
if(jQuery(".sidebar").hasClass("disabled")){
jQuery(".sidebar").removeClass("disabled");
}else{
jQuery(".sidebar").addClass("disabled");
}
});
https://jsfiddle.net/ott5wanq/4/
Since you are using bootstrap, you can use image buttons and use disabled class for all items when one of them clicked. I created an example :
HTML :
<div class="container">
<div class="grid_layout_row">
<div class="col-md-6">
<div class="sidebar"><button type="button" id="btn1" class="btn btn-primary myBtn" onclick="imgClicked()">
<img src="http://lorempixel.com/400/200/sports/1" alt="carrom" class="img-responsive">
</button></div>
</div>
<div class="col-md-6">
<div class="sidebar"><button type="button" id="btn2" class="btn btn-primary myBtn" onclick="imgClicked()" >
<img src="http://lorempixel.com/400/200/sports/2" alt="carrom" class="img-responsive">
</button></div>
</div>
<div class="col-md-6">
<div class="sidebar"><button type="button" id="btn3" class="btn btn-primary myBtn" onclick="imgClicked()">
<img src="http://lorempixel.com/400/200/sports/3" alt="carrom" class="img-responsive">
</button></div>
</div>
<div class="col-md-6">
<div class="sidebar"><button type="button" id="btn4" class="btn btn-primary myBtn" onclick="imgClicked()">
<img src="http://lorempixel.com/400/200/sports/5" alt="carrom" class="img-responsive">
</button></div>
</div>
</div>
Script ( using Jquery ) :
function imgClicked (){
$('.myBtn').addClass('disabled');
}
https://jsfiddle.net/emilvr/80u0pbyw/2/
My page is basically split in two parts:
<div *ngIf="initState">
<div class="ui accordion">
<div class="title">
<i class="dropdown icon"></i>
Title
</div>
<div class="content">
{{ someText }}
</div>
</div>
<button class="ui button" (click)="notInitialAnymore();">Click</button>
</div>
<div *ngIf="!initState">
<div class="ui accordion">
<div class="title">
<i class="dropdown icon"></i>
Another title
</div>
<div class="content">
{{ someOtherText }}
</div>
</div>
</div>
The point is that the accordion in initalState works fine, but the one in not initial state not - no reaction on a click on that element. In my case it is easy to make a work-around, but how should I do it without a work-around? How can I make the second accordion call:
<script language='javascript'>
$(document).ready(function(){
$('.ui.accordion').accordion();
});
</script>
Use [hidden] attribute, when you use *ngIf the element is not created in the dom so jQuery can not init the accordion on it.
<div [hidden]="!initState">
<div class="ui accordion">
<div class="title">
<i class="dropdown icon"></i>
Title
</div>
<div class="content">
{{ someText }}
</div>
</div>
<button class="ui button" (click)="notInitialAnymore();">Click</button>
</div>
<div [hidden]="initState">
<div class="ui accordion">
<div class="title">
<i class="dropdown icon"></i>
Another title
</div>
<div class="content">
{{ someOtherText }}
</div>
</div>
</div>
I have the following code in my JSP file
<div class="row-fluid">
<div style="text-align: left;" class="span3 row-fluid">
<label><spring:message code="alert.channels.outbound.lines"></spring:message>: </label>
</div>
<div class = "span3">
<div class="textbox">
<div class="textVal">${alertStatusForm.outboundLines}</div>
<div class="pencil span3 ">
<img src="/static/img/pencil.png" alt="Edit">
</div>
<div class="save span3">
<img src="/static/img/disk.png" alt="Save">
</div>
<div class="close span3">
<img src="/static/img/Cross.png" alt="Close">
</div>
</div>
</div>
</div>
Now I have to use the font-awesome in place of pencil.png , disk.png and Cross.png .
I have the following codes for the above pencil , disk and Cross as
Pencil = icon-pencil ()
disk = icon-save ()
Cross = icon-remove ()
from the website http://fortawesome.github.io/Font-Awesome/cheatsheet/
Please let me know how to use the above codes in place of
You can write like this by change to <i> tag instead of <img>
<div class="row-fluid">
<div style="text-align: left;" class="span3 row-fluid">
<label><spring:message code="alert.channels.outbound.lines"></spring:message>: </label>
</div>
<div class = "span3">
<div class="textbox">
<div class="textVal">${alertStatusForm.outboundLines}</div>
<div class="pencil span3 ">
<i class="icon-edit"></i>
</div>
<div class="save span3">
<i class= "icon-save"></i>
</div>
<div class="close span3">
<i class= "icon-folder-close"></i>
</div>
</div>
</div>
</div>
Besure that you have link with font awsome css or
add this link in your layout or views
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
You need to change the <IMG> tags with the following:
<i class="icon-pencil"></i>
Setting appropriate class on the <i> element.