Angular animations: on click - javascript

I have a problem animating some elements in my Angular application.
There is a grid composed of cells (generated with a ng-repeat).
What I want to do is create a simple animation: on click, the cell should disappear (fadeOut effect for instance) and reappear after a while.
I've managed to do a fadeOut effect following this tutorial
Here is the code that manages the cells:
<div class="col col-20 cell" style="background-image:url('img/gray.png')">
<img class="cell-img" ng-src="{{cells[$index].getSrc()}}" width="100%" ng-click="click(cells[$index])" cell-click/>
</div>
<div class="col col-20 cell" style="background-image:url('img/gray.png')">
<img class="cell-img" ng-src="{{cells[$index + 1].getSrc()}}" width="100%" ng-click="click(cells[$index + 1])" cell-click/>
</div>
<div class="col col-20 cell" style="background-image:url('img/gray.png')">
<img class="cell-img" ng-src="{{cells[$index + 2].getSrc()}}" width="100%" ng-click="click(cells[$index + 2])" cell-click/>
</div>
<div class="col col-20 cell" style="background-image:url('img/gray.png')">
<img class="cell-img" ng-src="{{cells[$index + 3].getSrc()}}" width="100%" ng-click="click(cells[$index + 3])" cell-click/>
</div>
<div class="col col-20 cell" style="background-image:url('img/gray.png')">
<img class="cell-img" ng-src="{{cells[$index + 4].getSrc()}}" width="100%" ng-click="click(cells[$index + 4])" cell-click/>
</div>
</div>
app.controller("Control", function($scope, $interval, ...){
$scope.click = function(cell){
if($scope.gameStarted){
if(cell.isActive){
if(colorOk){
// ...
}
else{
// ...
}
}
}
}
}

You can use $timeout to make the cell reappear after a certain time after you hide it.
Something like:
$timeout(function () {
//code to make the cell appear/show the cell (maybe by removing ng-hide class)
}, 1000);

Related

Image filter Navigation

I have all the code and seems okay to me but when I click on the navigation links the link is directed to index.html or the landing project. How do I make the links filter the images?
This is the Javascript and html
$(document).ready(function() {
$(".button").click(function() {
var name = $(this).attr("data-filter");
if (name == "all") {
$(".filter").show("2000");
} else {
$(".filter").not("." + name).hide("2000");
$(".filter").filter("." + name).show("2000");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="portfolio">
<div style="text-align: center">
<div class="navigation">
ALL
ONE
TWO
THREE
</div>
<div class="ImageContainer">
<div class="filter one">
<img src="img/beach.jpg" width="400px" height="250px">
</div>
<div class="filter one">
<img src="img/Windows.jpg" width="400px" height="250px">
</div>
I expected my images to filter but they navigation links are not working
You need to prevent the default action of the link and also change your numbers to numbers (remove the quotes around the 2000)
$(document).ready(function() {
$(".button").click(function(e) { // pass the event back into the function
e.preventDefault(); // prevent the link action
var name = $(this).attr("data-filter");
if (name == "all") {
$(".filter").show(2000); // remove quotes
} else {
$(".filter").not("." + name).hide(2000);
$(".filter").filter("." + name).show(2000);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="portfolio">
<div style="text-align: center">
<div class="navigation">
ALL
ONE
TWO
THREE
</div>
<div class="ImageContainer">
<div class="filter one">
<img src="img/beach.jpg" width="400px" height="250px">
</div>
<div class="filter one">
<img src="img/Windows.jpg" width="400px" height="250px">
</div>

Add figcaption name to h2

I need to add chosen figcaption to h2.
Here is a code
<div id="custom_form">
<h2>Cars</h2>
<div class="models">
<div class="sections" onclick="buyclick1()">
<img src="2.png" width="200px" ;>
<figcaption>GX</figcaption>
</div>
<div class="sections" onclick="buyclick1()">
<img src=" 3.png " width="200px ">
<figcaption>GT</figcaption>
</div>
</div>
</div>
How can I add figcaption name to h2, consider that it shoud depends on what person click on?
It should look like in online shop where you toggle between categories and subcategories of a product (# Cars>GT>Another categorie).
You can try the following way:
var t = document.querySelector('h2').textContent;
function buyclick1(el){
var h2El = document.querySelector('h2');
h2El.textContent = t;
var caption = el.children[1].textContent;
h2El.textContent += ' >> ' + caption;
}
<div id="custom_form">
<h2>Cars</h2>
<div class="models">
<div class="sections" onclick="buyclick1(this)">
<img src="2.png" width="200px";>
<figcaption>GX</figcaption>
</div>
<div class="sections" onclick="buyclick1(this)">
<img src="3.png" width="200px">
<figcaption>GT</figcaption>
</div>
</div>
</div>

Filter users by data-attribute Jquery

I am trying to filter users by its data attribute , I have main div called user-append which contains users that I get from ajax get request , there can be 3 users or 100 users, its dynamical , this is my div with one user for the moment
<div id="user-append">
<div class="fc-event draggable-user" data-profesion="'+user.profesion+'" id="user_'+user.id+'" style="z-index: 9999;">
<div class="container-fluid">
<input type="hidden" value="'+user.id+'" id="user_'+ user.id + '_value" class="userId">
<div class="row" style="justify-content: center;">
<div class="col-xs-3 avatar-col">
<div class="innerAvatarUserLeft">
<img src="'+getUserImage(user.avatar)+'" width="100%" style="margin: 0 auto;">
</div>
</div>
<div class="col-xs-9 data-col">
<p class="fullName dataText">'+user.fullName+'</p>
<p class="usr_Gender dataText">Male</p>
<div style="position: relative">
<li class="availableUnavailable"></li>
<li class="usr_profesion dataText">AVAILABLE</li>
</div>
<p class="user_id" style="float:right;margin: 3px">'+user.employee_id+'</p>
</div>
</div>
</div>
</div>
</div>
as you can see I have data-profesion attribute from which I am trying to filter users depend on the profession that they have , I get the ajax request like this
$.ajax({
url: "/rest/users",
success: function (users) {
var options = [];
$user = $("#append_users");
$.each(users, function (i, user) {
options.push({
'profession': user.prof.Profession,
'gender': user.prof.Gender
});
userArr.push({
'id': user.id,
'firstName': user.prof.FirstName,
'lastName': user.prof.LastName,
'fullName': user.prof.FirstName + ' ' + user.profile.LastName,
'email': user.email,
'avatar': user.prof.Photo,
'profesion': user.prof.Profession
});
$('#filterByProfession').html('');
$('#filterByGender').html(''); // FIRST CLEAR IT
$.each(options, function (k, v) {
if (v.profession !== null) {
$('#filterByProfession').append('<option>' + v.profession + '</option>');
}
if (v.gender !== null) {
$('#filterByGender').append('<option>' + v.gender + '</option>');
}
});
});
});
and now I am trying to filter the users by its data-profesion, on change of my select option which I populate from the ajax get request , It should show only the users that contain that data-profesion value , something like this
$('#filterByProfession').change(function () {
var filterVal = $(this).val();
var userProfVal = $(".fc-event").attr("data-profesion");
if (filterVal !== userProfVal) {
}
});
You can use a CSS selector to find those users, and then hide them:
$('#filterByProfession').change(function () {
// first hide ALL users
$('.draggable-user').hide()
// then filter out the ones with the correct profession:
// (you need to escape the used quote)
.filter('[data-profesion="' + $(this).val().replace(/"/g, '\\"') + '"]')
// ... and show those
.show();
});
You're trying to get the userProfVal throughout a className selector which can return more than one element.
var userProfVal = $(".fc-event").attr("data-profesion");
^
Use the jQuery function .data() to get data attributes.
Look at this code snippet using the .each to loop over all elements returned by this selector .fc-event:
$('#filterByProfession').change(function() {
var filterVal = $(this).val();
$(".fc-event").hide().each(function() {
if ($(this).data("profesion") === filterVal) {
$(this).show();
}
});
});
Example with static data
$('#filterByProfession').change(function() {
var filterVal = $(this).val();
$(".fc-event").hide().each(function() {
if ($(this).data("profesion") === filterVal) {
$(this).show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='filterByProfession'>
<option>-----</option>
<option>Developer</option>
<option>Cloud computing</option>
</select>
<div id="user-append">
<div class="fc-event draggable-user" data-profesion="Developer" id="user_1" style="z-index: 9999;">
<div class="container-fluid">
<input type="hidden" value="1" id="user_1_value" class="userId">
<div class="row" style="justify-content: center;">
<div class="col-xs-3 avatar-col">
<div class="innerAvatarUserLeft">
<img src="'+getUserImage(user.avatar)+'" style="margin: 0 auto;">
</div>
</div>
<div class="col-xs-9 data-col">
Developer
<p class="fullName dataText">Ele</p>
<p class="usr_Gender dataText">Male</p>
<div style="position: relative">
<li class="availableUnavailable"></li>
<li class="usr_profesion dataText">AVAILABLE</li>
</div>
<p class="user_id" style="float:right;margin: 3px">11</p>
</div>
</div>
</div>
</div>
</div>
<div id="user-append">
<div class="fc-event draggable-user" data-profesion="Cloud computing" id="user_2" style="z-index: 9999;">
<div class="container-fluid">
<input type="hidden" value="2" id="user_2_value" class="userId">
<div class="row" style="justify-content: center;">
<div class="col-xs-3 avatar-col">
<div class="innerAvatarUserLeft">
<img src="'+getUserImage(user.avatar)+'" style="margin: 0 auto;">
</div>
</div>
<div class="col-xs-9 data-col">
Cloud computing
<p class="fullName dataText">Enri</p>
<p class="usr_Gender dataText">Male</p>
<div style="position: relative">
<li class="availableUnavailable"></li>
<li class="usr_profesion dataText">AVAILABLE</li>
</div>
<p class="user_id" style="float:right;margin: 3px">11</p>
</div>
</div>
</div>
</div>
</div>
See? the sections are being hidden according to the selected option.
Try using this
$(".fc-event[data-profesion='" + filterVal + "']").show();
$(".fc-event[data-profesion!='" + filterVal + "']").hide();

angular.js , templatedata in angular

var imageData = region[0].images;
alert(imageData.length);
templeteData = '<div class="col-sm-12 bootstrap-no-padding" >\
<div class="col-xs-4 col-sm-4 col-md-4 bootstrap-no-padding" style="height:250px">\
<div class="borderAll black-carousel black-carousel-fixHW" uib-carousel no-pause="true" active="active" interval="5000" ng-if="imageData.length > 0" no-wrap="noWrapSlides">\
<div uib-slide ng-repeat="image in imageData" index="image.id" class="col-md-12">\
<div class="image-thumbnail-content GridPositionRelative cursor-pointer">\
<image style="height:100%;top: 0px; width:100%" class="image fallback-image GridPositionRelative" ng-src="{{image.imageBase64StringFormat}}"/>\
</div>\
</div>\
</div>\
</div>\
<div class="col-xs-8 col-sm-8 col-md-8 bootstrap-no-padding" >' + regionDescription + '</div>\
</div>'
in imageData is an array containing images as [0],[1].. etc
my problem is that the images are not getting displayed... I don't know if ng- does not work here.. can anyone help me
imageData must be a scope variable of angular to bind to the template.
So instead of declaring as variable using var you should declare it like
$scope.imageData = region[0].images
And make sure you have injected $scope if you are using controller

reactjs, loop through an item and if condition on markup

I am working on a reactjs component. I have 3 items, that I am looping through - but I only wish to show a button, under the first item. I am getting a syntax error.
<div className='row grid__row--offset--50'>
<div className='small-55 medium-58 large-58 small-centered columns background--white--small border__transparent--top'>
{
lang.howTiles[0].items.map(function (item, index) {
return (
<div key={index}>
{index}
<div className='small-60 columns grid__row--offset--30 show-for-small-only'> </div>
<div className='small-45 medium-20 small-centered medium-uncentered columns'>
<div className='row'>
<div className='small-60 medium-45 small-centered columns'>
<div className='relative-container'>
<img className='centered' src={HowImage1} style={{maxWidth: '50%', marginLeft: '25%'}} />
<h3 className='text--bold text--center'><font><font>Project</font></font></h3>
<p className='text--center text--font-size-14'><font><font>Write out your project and show it to a hand-picked group of experts</font></font></p>
</div>
</div>
</div>
{
if(index==0){
<div className='grid__row--offset--40 row'>
<div className='small-40 columns small-centered'>
<a className='text--white text--center text--font-size-14 button medium radius secondary' href={lang.howTiles[0].button.url}><font><font>{lang.howTiles[0].button.title}</font></font></a>
<a href='http://localhost/slack'><img alt='Add to Slack' height='40' width='139' src='https://platform.slack-edge.com/img/add_to_slack.png' srcSet='https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/add_to_slack#2x.png 2x' /></a>
</div>
</div>
}
}
</div>
</div>
)
})
}
<div className='medium-60 columns grid__row--offset--30'> </div>
</div>
<div className='row grid__row--offset--80'> </div>
</div>
We can't directly use if-else/switch statement inside JSX, use either ternary operator or call a function from JSX and use if-else/switch inside that.
Use this:
{
index == 0 ?
<div className='grid__row--offset--40 row'>
<div className='small-40 columns small-centered'>
<a className='text--white text--center text--font-size-14 button medium radius secondary' href={lang.howTiles[0].button.url}><font><font>{lang.howTiles[0].button.title}</font></font></a>
<a href='http://localhost/slack'><img alt='Add to Slack' height='40' width='139' src='https://platform.slack-edge.com/img/add_to_slack.png' srcSet='https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/add_to_slack#2x.png 2x' /></a>
</div>
</div>
: null
}
Update:
Another possible solution is call a function from render method and use the if condition inside that, like this:
{
this._checkCondition()
}
_checkCondition(index){
if(index == 0){
return (
<div className='grid__row--offset--40 row'>
<div className='small-40 columns small-centered'>
<a className='text--white text--center text--font-size-14 button medium radius secondary' href={lang.howTiles[0].button.url}><font><font>{lang.howTiles[0].button.title}</font></font></a>
<a href='http://localhost/slack'><img alt='Add to Slack' height='40' width='139' src='https://platform.slack-edge.com/img/add_to_slack.png' srcSet='https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/add_to_slack#2x.png 2x' /></a>
</div>
</div>
)
}
}
For more details why we can't use if-else in JSX check the DOC.
Or you can try other approach. If index==false all between () will be rendered. Remember - javascript has dynamic typing
{!index &&
(<div className='grid__row--offset--40 row'>
<div className='small-40 columns small-centered'>
<a className='text--white text--center text--font-size-14 button medium radius secondary' href={lang.howTiles[0].button.url}><font><font>{lang.howTiles[0].button.title}</font></font></a>
<a href='http://localhost/slack'><img alt='Add to Slack' height='40' width='139' src='https://platform.slack-edge.com/img/add_to_slack.png' srcSet='https://platform.slack-edge.com/img/add_to_slack.png 1x, https://platform.slack-edge.com/img/add_to_slack#2x.png 2x' /></a>
</div>
</div>)}

Categories