Toggle ng-class - javascript

I'm trying to toggle class "category-active" to an active category tab using ng-class and ng-click. Nothing seems to happen when I click the tabs. Not sure what I'm doing wrong. Please help.
HTML:
<body ng-app="app">
<div class="wrap" ng-controller="ctrl">
<h1>Bakery Menu</h1>
<div class="content">
<div class="categories">
<ul>
<li ng-class="{'category-active' : active}">
All
</li>
<li ng-class="{'category-active' : active}" ng-repeat="menu in menus">
<a href="" ng-repeat="(key,val) in menu" href="" ng-click="active = !active; categoryList(key)">{{menus}}
</a>
</li>
</ul>
</div>
</div>
</div>
</body>
JS:
angular.module('bakeryMenuApp')
.controller('mainCtrl', function($scope, dataService) {
dataService.getMenus(function(response) {
$scope.menus = response.data.menus;
$scope.category = 'all';
$scope.categoryList = function(value) {
$scope.category = value;
}
});
})
JSON:
{
"menus":[
{
"brownies":[
{
"name":"Baker's Choice Bars Assortment",
"price":"45",
"description":"A beautiful and delicious assortment of Magnolia Bakery’s double fudge brownies, chocolate chunk blondies and magic cookie bars.",
"image_url":"https://pantograph0.goldbely.com/s364/uploads/product_image/image/8346/bakers-choice-bars-assortment.1ddd25a1f59a89a1de2d0583dab50000.jpg",
"is_vegan":false,
"is_gluten_free":false
}
]
},
{
"cakes":[
{
"name":"Raseberry Lemon Cake",
"price":"50",
"description":"Vanilla crème fraîche cake layered with raspberry Swiss meringue buttercream and lemon curd filling, covered with raspberry buttercream.",
"image_url":"http://www.empirecake.com/_main_site/wp-content/uploads/2014/12/Rasberry_Lemon_01_final_drkr-600.jpg",
"is_vegan":false,
"is_gluten_free":false
}
]
}
]
}

I think it had to do with ng-repeat and scope. I changed the scope and used directive to solve it.
<ul>
<li ng-init="selected === 'all'" ng-class="{'category-active':selected==='all'}">
<a sibling href="" ng-click="selected = 'all'; categoryList('all')">All</a>
</li>
<li ng-init="active = false" ng-repeat="menu in menus">
<a sibling href="" ng-repeat="(key,val) in menu" href="" ng-click="categoryList(key)">{{key}}
</a>
</li>
</ul>
JS:
angular.module('bakeryMenuApp')
.directive('sibling', function () {
return {
link: function(scope, element, attrs) {
element.bind('click', function() {
element.parent().parent().children().removeClass('category-active');
element.parent().addClass('category-active');
})
},
}
});

You logic seems wrong. Try this:
<li ng-class="{'category-active':selected==='all'}">
All
</li>
<li ng-class="{'category-active':selected===menu}" ng-repeat="menu in menus">
<a href="" ng-repeat="(key,val) in menu" href="" ng-click="selected=menu; categoryList(key)">{{menus}}
</a>
</li>

Related

Bi-directional highlighting of elements with same class

I have 2 lists of items. One is an ordinary <ul> and the other is a grid of images wrapped in <div>s.
I am looking to highlight the item hovered on both lists that will work in both directions.
So if I hover over <li>Apple, both the <li>Apple & <div>Apple get highlighted. And this should also work in the other direction, if I hover over the <div>Apple, both the <div>Apple and <li>Apple is highlighted.
Notes:
I am able to add the unique class name to any element. Either the <li> & <div> or the <a> within.
Highlighting can be either as an .active class or inline styling.
Similar to the below question but works in both directions:
Jquery 'Highlight' element with the same class
<ul>
<li class="app-hover-select">
<a class="item-1" href="">Apples</a>
</li>
<li class="app-hover-select">
<a class="item-2" href="">Pears</a>
</li>
<li class="app-hover-select">
<a class="item-3" href="">Bananas</a>
</li>
<li class="app-hover-select">
<a class="item-4" href="">Pineapples</a>
</li>
</ul>
<div class="wrapper">
<div class="app-hover-select">
<a class="item-1" href="">
<img scr="">
Apples
</a>
</div>
<div class="app-hover-select">
<a class="item-2" href="">
<img scr="">
Pears
</a>
</div>
<div class="app-hover-select">
<a class="item-3" href="">
<img scr="">
Bananas
</a>
</div>
<div class="app-hover-select">
<a class="item-4" href="">
<img scr="">
Pineapples
</a>
</div>
</div>
My current jQuery with current HTML:
jQuery('.app-hover-select > a').hover(function() {
var appClass = jQuery(this).attr("class");
jQuery(appClass).toggleClass('active');
});
My logic is:
On hover of .app-hover-select > a
var appClass = Get the class
Add class active to all elements with the class appClass
In case you want this:
Try this-
jQuery(".app-hover-select > a").hover(function () {
const listOfItems = this.parentElement.parentElement;
const listItem = this.parentElement;
const i = Array.from(listOfItems.children).indexOf(listItem);
jQuery("ul .app-hover-select").each((_i, el) => {
if (_i === i) {
el.classList.add("active");
} else {
el.classList.remove("active");
}
});
jQuery(".wrapper .app-hover-select").each((_i, el) => {
if (_i === i) {
el.classList.add("active");
} else {
el.classList.remove("active");
}
});
});

I want to add delay to my menu when pictures are changing. How is it possible?

These are my HTML and jQuery codes. When nav and its children become hover, I would like to change the pictures of menu with delay. Can you guide me ?
<!-- header --
<nav class="nav">
<ul>
<li>
<a href="" data-index="1">
Home
</a>
</li>
<li>
<a href="" data-index="2">
About Us
</a>
</li>
<li>
<a href="" data-index="3">
Services
</a>
</li>
<li>
<a href="" data-index="4">
Shop
</a>
</li>
<li>
<a href="" data-index="5">
Our Teams
</a>
</li>
<li>
<a href="" data-index="6">
Blog
</a>
</li>
<li>
<a href="" data-index="7">
Contact Us
</a>
</li>
</ul>
</nav>
These are my HTML and jQuery codes. When nav and its children become hover, I would like to change the pictures of menu with delay. Can you guide me ?
jQuery
// menu toggler click event
$(".menu-toggler").click(function() {
$(this).toggleClass("menu-toggler-close");
$(".nav").fadeToggle();
});
$(".nav").click(function() {
$(".menu-toggler").removeClass("menu-toggler-close");
$(".nav").fadeOut();
});
$(".nav > ul").click(function(e) {
e.stopPropagation();
});
$(".nav > ul > li > a").hover(
function() {
var dataIndex = $(this).data("index");
$(".nav").css(
"background",
"url('images/nav" + dataIndex + ".webp') center center / cover"
);
},
function() {
$(".nav").css("background", "rgba(0, 0, 0, 0.8)");
},
You can use setTimeout() method to delay your code.
setTimeout(function()
{
$(".nav").css(
"background",
"url('images/nav" + dataIndex + ".webp') center center / cover"
);
}, 1000);

Update DropDown - Using Jquery and AngularJS

How can I dynamically update this dropdown, so that by clicking another button, through ng-click () I can change and update to the <li><a data-action="100">100</a>
<ul class="dropdown-menu pull-right" role="menu">
<li aria-selected="true" class="active">
<a data-action="10" class="dropdown-item dropdown-item-button">10</a>
</li>
<li aria-selected="false">
<a data-action="25" class="dropdown-item dropdown-item-button">25</a>
</li>
<li aria-selected="false">
<a data-action="50" class="dropdown-item dropdown-item-button">50</a>
</li>
<li aria-selected="false">
<a data-action="100" class="dropdown-item dropdown-item-button">100</a>
</li>
</ul>
You can create a collection of objects in your controller and manipulate them with functions.
<div ng-app ng-controller="ddlController">
<ul class="dropdown-menu pull-right" role="menu">
<li ng-repeat="option in options" aria-selected="isSelected(option)" ng-class="{'active': isSelected(option)}">
<a data-action="{{option.action}}" class="dropdown-item dropdown-item-button" ng-click="select(option)">{{option.action}}"</a>
</li>
</ul>
<button ng-click="select100()">Select 100</button>
</div>
Controller:
function ddlController($scope) {
$scope.options = [{
action: 10
}, {
action: 25
}, {
action: 50
}, {
action: 100
}];
$scope.selected = $scope.options[0];
$scope.isSelected = function(option) {
if (option.action === $scope.selected.action) {
return true;
}
return false;
};
$scope.select = function(option) {
$scope.selected = option;
};
$scope.select100 = function() {
$scope.selected = $scope.options.find(o => o.action === 100);
};
}
or check this fiddle:
https://jsfiddle.net/VictorSDK/40wdtavp/

AngularJS Filter By Category

I'm trying to display menu by category. The name of each category is the name of the key of an array of menu items, such as "brownies", "cakes."
This is what I am referencing, but something seems to be off:
filter list of items when clicking category link
html:
<section class="choices">
<div class="categories">
<ul>
<li ng-repeat="menu in fullMenu">
<a ng-repeat="(key,val) in menu" href="" ng-click="categoryFilters.category = {{key}}">{{key}}
</a>
</li>
</ul>
</div>
</section>
<section class="category" ng-repeat="menu in fullMenu | filter: categoryFilters">
<div ng-repeat="items in menu">
<ul>
<li ng-repeat="item in items">
<img src="{{item.image_url}}">
<h3>{{item.name}}</h3>
<p>{{item.description}}</p>
<p><span>$</span>{{item.price}}</p>
</li>
</ul>
</div>
</section>
JS:
angular.module('bakeryMenuApp')
.controller('mainCtrl', function($scope, dataService) {
dataService.getMenus(function(response) {
$scope.fullMenu = response.data.menus;
$scope.categoryFilters = {}
});
})
JSON:
{
"menus":[
{
"brownies":[
{
"name":"Baker's Choice Bars Assortment",
"price":"45",
"description":"A beautiful and delicious assortment of Magnolia Bakery’s double fudge brownies, chocolate chunk blondies and magic cookie bars.",
"image_url":"https://pantograph0.goldbely.com/s364/uploads/product_image/image/8346/bakers-choice-bars-assortment.1ddd25a1f59a89a1de2d0583dab50000.jpg",
"is_vegan":false,
"is_gluten_free":false
}
]
},
{
"cakes":[
{
"name":"Raseberry Lemon Cake",
"price":"50",
"description":"Vanilla crème fraîche cake layered with raspberry Swiss meringue buttercream and lemon curd filling, covered with raspberry buttercream.",
"image_url":"http://www.empirecake.com/_main_site/wp-content/uploads/2014/12/Rasberry_Lemon_01_final_drkr-600.jpg",
"is_vegan":false,
"is_gluten_free":false
}
]
}
]
}
you can achieve it by checking the condition in a proper way
Controller && HTML
var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
$scope.category = '';
$scope.categoryList = function(value) {
$scope.category = value;
}
$scope.menus = [{
"brownies": [{
"name": "Baker's Choice Bars Assortment",
"price": "45",
"description": "A beautiful and delicious assortment of Magnolia Bakery’s double fudge brownies, chocolate chunk blondies and magic cookie bars.",
"image_url": "https://pantograph0.goldbely.com/s364/uploads/product_image/image/8346/bakers-choice-bars-assortment.1ddd25a1f59a89a1de2d0583dab50000.jpg",
"is_vegan": false,
"is_gluten_free": false
}]
}, {
"cakes": [{
"name": "Raseberry Lemon Cake",
"price": "50",
"description": "Vanilla crème fraîche cake layered with raspberry Swiss meringue buttercream and lemon curd filling, covered with raspberry buttercream.",
"image_url": "http://www.empirecake.com/_main_site/wp-content/uploads/2014/12/Rasberry_Lemon_01_final_drkr-600.jpg",
"is_vegan": false,
"is_gluten_free": false
}]
}]
});
form.ng-pristine {
background-color: lightblue;
}
form.ng-dirty {
background-color: pink;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller="ctrl">
<section class="choices">
<div class="categories">
<ul>
<li ng-repeat="menu in menus">
<a ng-repeat="(key,val) in menu" href="" ng-click="categoryList(key)">{{key}}
</a>
</li>
</ul>
</div>
</section>
<section class="category" ng-repeat="menu in menus">
<div ng-repeat="(key, items) in menu">
<ul>
<li ng-repeat="item in items" ng-show="category == key">
<div>
<img src="{{item.image_url}}">
<h3>{{item.name}}</h3>
<p>{{item.description}}</p>
<p><span>$</span>{{item.price}}</p>
</div>
</li>
</ul>
</div>
You should use custom filter to filter by object key and use a function to set category by click.
can try like this
Html:
<section class="choices">
<div class="categories">
<ul>
<li ng-repeat="menu in fullMenu">
<a ng-repeat="(key,val) in menu" href="" ng-click="setFilterCategory(key)">{{key}}
</a>
</li>
</ul>
</div>
</section>
<section class="category" ng-repeat="menu in fullMenu | filter: filterByCategory">
<div ng-repeat="items in menu">
<ul>
<li ng-repeat="item in items">
<img src="{{item.image_url}}">
<h3>{{item.name}}</h3>
<p>{{item.description}}</p>
<p>
<span>$</span> {{item.price}}
</p>
</li>
</ul>
</div>
</section>
and controller:
$scope.selectedCategory = '';
$scope.setFilterCategory = function(value) {
$scope.selectedCategory = value;
};
$scope.filterByCategory = function(item) {
if ($scope.selectedCategory)
return $scope.selectedCategory === Object.keys(item)[0];
else
return item;
};
PLUNKER DEMO

jQuery: disable click during animation

So I am making a little quiz, with a I want to disable the click for everything inside #qWrap while the animation is operating, thus preventing spamming clicks.
I tried to use .is(':animated') but to no effect. Any ideas?
HTML:
<div id="qWrap">
<ul id="qBox">
<!--Q1-->
<li id="q1" class="qContainer">
<ul class="qAnswers">
<li class="qQuestion">
<h3>What are italics?</h3>
</li>
<li>
<a href="#q2" class="mums">
<h3>Slanted cut of a type</h3>
</a>
</li>
<li>
<a href="#q2" class="such">
<h3>A group of italian-designed typefaces</h3>
</a>
</li>
<li>
<a href="#q2" class="usch">
<h3>An other word for the !-sign</h3>
</a>
</li>
</ul>
</li>
<!--Q2-->
<li id="q2" class="qContainer">
<ul class="qAnswers">
<li class="qQuestion">
<h3>Who designed Comic Sans?</h3>
</li>
<li>
<a href="#q3" class="usch">
<h3>Mathew Carter</h3>
</a>
</li>
<li>
<a href="#q3" class="usch">
<h3>David Carson</h3>
</a>
</li>
<li>
<a href="#q3" class="mums">
<h3>Vincent Connare</h3>
</a>
</li>
</ul>
</li>
<!--Q3-->
<li id="q3" class="qContainer">
<ul class="qAnswers">
<li class="qQuestion">
<h3>What does Helvetica mean?</h3>
</li>
<li>
<a href="#q4" class="usch">
<h3>From Austria</h3>
</a>
</li>
<li>
<a href="#q4" class="usch">
<h3>From Germany</h3>
</a>
</li>
<li>
<a href="#q4" class="mums">
<h3>From Switzerland</h3>
</a>
</li>
</ul>
</li>
</li>
</ul>
</div>
JS:
$('.qAnswers li a').bind('click', function(event) {
$(this).parent().addClass('selected');
$(this).closest('.qAnswers').find("li:not(.selected, .qQuestion)").delay(200).addClass('notSelected');
var $anchor = $(this);
//preventing click within #qWrap
if ($('#qWrap').is(':animated')) {
$('#qWrap').unbind('click');
}
//firing the animation
$('#qWrap').stop(true, true).delay(800).animate({
scrollLeft: $($anchor.attr('href')).position().left
}, 2000, function() {
nextCount();
});
stopTimer();
addData();
event.preventDefault();
});
Your JS code should look like this:
$('.qAnswers li a').bind('click', function(event) {
event.preventDefault();
//preventing click within #qWrap
if ($('#qWrap').is(':animated')) {
return;
}
$(this).parent().addClass('selected');
$(this).closest('.qAnswers').find("li:not(.selected, .qQuestion)").delay(200).addClass('notSelected');
var $anchor = $(this);
//firing the animation
$('#qWrap').stop(true, true).delay(800).animate({
scrollLeft: $($anchor.attr('href')).position().left
}, 2000, function() {
nextCount();
});
stopTimer();
addData();
});
The code $('#qWrap').is(':animated') is not an event that will trigger when the element is animating, it's a normal check. I moved your event.preventDefault(); to the top also; figured you want to do that regardless. You might need to move around some other things also.
$('[where you click]').click(
function(){
if(!$('[what animates]').is(':animated')){
$('[what animates]').[your_animation];
}
});

Categories

Resources