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
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");
}
});
});
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);
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/
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
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];
}
});