Hello I am facing problem to make Li as Active tab, I already add hover effect but How to add Active tab?. I user Angular's ng-show and ng-hide to change icon in li. Here is my code
<li ng-mouseenter="show = true" ng-mouseleave="show = false" id="home">
<img src="images/home.png" ng-hide="show" class="whiteClass" />
<img src="images/home_h.png" ng-show="show" class="blackClass"/>
</li>
How can i make it as active tab using ng-click??
Thanks in advance
Update :
<li ng-mouseenter="liMouaeEnter()" ng-mouseleave="liMouseLeave()" id="issuesLi" ng-click="navbarclick($event , issueTab)">
<img src="images/issues.png" ng-class="{'active': !isActive, 'inactive': isActive}"/>
<img src="images/issues_h.png" ng-class="{'active': isActive, 'inactive': !isActive}"/>
</li>
Here jS file on controller
var navClickBool = false;
$scope.liMouaeEnter = function(){
$scope.isActive = false;
this.isActive = true;
navClickBool = false
}
$scope.navbarclick = function(event , template){
$scope.isActive = false;
this.isActive = true;
navClickBool = true
}
$scope.liMouseLeave = function(){
if(navClickBool){
return
}
this.isActive = false;
}
If you need to toggle a class on an element, not only show/hide it, you can use ng-class instead of ng-hide/ng-show. ng-class automatically adds/removes a class based on the truth value of a $scope variable. You can toggle that truth value on ng-click (that automatically binds the onClick event to the DOM node, just like on-mouseenter binds onMouseenter).
<div ng-init="isActive = false">
<div ng-click="isActive = !isActive " ng-class="{'active': isActive}">
<em>Foo</em>
</div>
</div>
You now only have to write the .active { } CSS rule.
Also, you can add multiple rules on ng-class
ng-class="{'active': isActive, 'inactive': !isActive}"
and this will work as expected (switching between the two classes).
Note that I'm using ng-init to initialize my Boolean to false. You can also initialize it directly in the controller ($scope.isActive = false;).
Related
OK, I have a custom template I am using where i have several accordions containing lists where the user can click on the option and it becomes active. However I cannot access the parent scope in the controller to change remove the active class from the previously clicked item.
Basically what I want is when a user clicks on a list item, it becomes active and the other items become inactive.
Here is the plunker: http://plnkr.co/edit/d5kHjH?p=preview
Here is the pertinent code:
.run(function(formlyConfig) {
formlyConfig.setType({
name: 'label',
template: `<div ng-init= "active = false">
<a li class="list-group-item small" ng-click="addActive(); active = !active" ng-class="{'active': active === true}"><span class="glyphicon glyphicon-chevron-right"></span> {{to.label}}</li></a>
</div>`,
controller: function($scope) {
$scope.addActive = function() {
$(this).parent().children().removeClass("active");
$(this).addClass("active");
$scope.model.PROC = $scope.to.label;
console.log($scope.model.PROC);
};
}
});
})
I want to be able to add the inactive class to the previously created items, which are being called from an ng-repeat from here in the HTML:
<uib-accordion close-others="true">
<ul class="list-group">
<div uib-accordion-group="" class="panel-primary" ng-repeat="accordion in vm.accordions" active="accordion.active" is-open="isopen">
<uib-accordion-heading ng-click="isopen=!isopen">
<span class="label label-info pull-left">{{accordion.label}}</span>
{{accordion.title}}
</uib-accordion-heading>
<formly-form model="accordion.form.model" fields="accordion.form.fields" form="vm.form" options="accordion.form.options"></formly-form>
</div>
</ul>
</uib-accordion>
The formly-form line is where the template item are being added in on by one
So I've been building a site based off a template I found online, a would appreciate any help getting it to function how I want it to. Currently its set up with filters that allow you to sort through multiple thumbnails. However I want the links that currently act as "filters" to instead replace the div where all the thumbnails show up.
I've searched around here looking at jQuery, to replace div content, including replacing the contents of the div, and hiding divs and showing them on click. Nothing I seem to do works though.
Ideally, I'd wrap the current UL in a div named "designprojects" and then when I click a filter that div gets replaced with a new one that has project info in it.
Here is the current HTML and Javascript that the site uses to make the filters function:
filter = function() {
if ($('#projects').length > 0) {
var $container = $('#projects');
$container.imagesLoaded(function() {
$container.isotope({
// options
animationEngine: 'best-available',
itemSelector: '.item-thumbs',
layoutMode: 'fitRows'
});
});
// filter items when filter link is clicked
var $optionSets = $('#options .option-set'),
$optionLinks = $optionSets.find('a');
$optionLinks.click(function() {
var $this = $(this);
// don't proceed if already selected
if ($this.hasClass('selected')) {
return false;
}
var $optionSet = $this.parents('.option-set');
$optionSet.find('.selected').removeClass('selected');
$this.addClass('selected');
// make option object dynamically, i.e. { filter: '.my-filter-class' }
var options = {},
key = $optionSet.attr('data-option-key'),
value = $this.attr('data-option-value');
// parse 'false' as false boolean
value = value === 'false' ? false : value;
options[key] = value;
if (key === 'layoutMode' && typeof changeLayoutMode === 'function') {
// changes in layout modes need extra logic
changeLayoutMode($this, options)
} else {
// otherwise, apply new options
$container.isotope(options);
}
return false;
});
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Portfolio Projects -->
<div class="row">
<div class="span3">
<!-- Filter -->
<nav id="options" class="work-nav">
<ul id="filters" class="option-set" data-option-key="filter">
<li class="type-work">Projects</li>
<li>All Projects</li>
<li>Starbucks CSR Project</li>
</ul>
</nav>
<!-- End Filter -->
</div>
<div class="span9">
<div class="row">
<section id="projects">
<ul class="thumbs">
<!-- Item Project and Filter Name -->
<li class="item-thumbs span3 StarbucksCSR">
<!-- Fancybox - Gallery Enabled - Title - Full Image -->
<a class="hover-wrap fancybox" data-fancybox-group="gallery" title="Project Title" href="_include/img/work/full/url.jpg">
<span class="overlay-img"></span>
<span class="overlay-img-thumb font-icon-plus"></span>
</a>
<!-- Thumb Image and Description -->
<img src="_include/img/work/thumbs/url.jpg" alt="Project info">
</li>
<!-- End Item Project -->
</ul>
</section>
</div>
</div>
</div>
<!-- End Portfolio Projects -->
To recap, when I click "All Projects" I want to see thumbnails that I can click and make full screen (current function, also want this to be the default).
When I click a project name, I want the div that holds all the thumbnails to be replaced with a paragraph about the project, and additonal thumbnails that can be clicked to extend to full screen.
My current progress can be seen at www.codyshipman.com
Look in the jQuery's .html() function. If you want to replace content of a <div> element, pass the new content as parameter to the .html(newContentAsString) function, for that <div> element. Look at the documentation for more info.
I want to be able to click some part of page to not have it call the hideAll function
app.controller('NotificationController', function($scope, $http) {
$scope.visible = true;
$scope.changeStatus = function(){
$scope.visible = !$scope.visible;
};
$scope.hideAll= function(){
$scope.visible=false;
};
});
Here is a link showing this:
Press
I want it so that when press on page this block I don't want to trigger the blur
<div class="notifications js-notifications" ng-init="visible=false" ng-show="visible">
....
</div>
Any idea how I make this work?
EDIT:
Full html:
<li id="notifications" ng-app="notifications" ng-controller="NotificationController as notification">
<a href="#" ng-disabled="checked" ng-click="changeStatus()" ng-blur="hideAll()" class="button-default show-notifications js-show-notifications active">
<i class="fa fa-bell-o" style="font-size: 17px;">
<div class="notifications-count js-count" data-count="<% notys.length %>"><% notys.length %></div>
</i>
</a>
<div class="notifications js-notifications" ng-init="visible=false" ng-show="visible">
<h3>Notifications</h3>
<ul class="notifications-list">
<li class="item no-data">You don't have notifications</li>
<li ng-repeat="x in notys" class="item js-item" data-id="<% x.id %>">
<a href="<% x.project_id %>" class="notification-link">
<div class="details">
<span class="title">New group created: <b> <% x.subject %> </b>. New project assigned to you <b> <% x.body %> </b></span>
<span class="date"><% x.created_at %></span>
</div>
</a>
</li>
</ul>
Show all notifications
</div>
</li>
You might need a custom blur directive to handle events on a separate notification container. Something along these lines:
directive('customBlur', function(){
return {
restrict: 'A',
scope: {
'customBlur': '='
},
link: function(scope, element, attr) {
element.on('click', function(event){
var targetAttr = angular.element(event.target).attr('custom-blur')
if (typeof targetAttr !== 'undefined' && scope.customBlur) {
scope.$apply(function(){
scope.customBlur = false;
});
}
});
}
}});
Here is a working plukner
Description given in W3 specification docs,
blur
The blur event occurs when an element loses focus either via the pointing device or by tabbing navigation. This event is valid for the following elements:
LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.
Bubbles: No
Cancelable: No
Context Info: None
It will give you unpredictable output for other tags. If you have noticed, div tag doesn't capture focus hence no blur event.
But if you want to use event like blur, you can create custom directive which can be combinations of these four events DOMFocusOut, DOMFocusIn, mouseenter or mouseover, mouseleave.
Im using ng-class to apply the class active when collapseSidebar is set to true revealing my sidebar.
<div class="row full-height row-offcanvas row-offcanvas-left" ng-class="{active: collapseSidebar}">
<div id="sidebar" class="col-sm-4 col-md-3 col-lg-3 col-xl-2 sidebar-offcanvas">
</div>
js
$scope.collapseSidebar = false;
$scope.select = function(thing)
{
$scope.selectedThing = (thing !== $scope.selectedThing) ? thing : null;
$scope.collapseSidebar = true;
};
However the sidebar can be hidden in other ways (click a menu icon in the top left) removing the class active. When I call select(thing) I was hoping that ng-class would be re-evaluated and the class 'active' would be re-applied, however this does not happen, I have tried setting it to false and then straight back to true which also didn't work.
How can I get ng-class to re-evaluate collapseSidebar and apply 'active' even if the value is the same as be
Have you tried:
ng-class="{'active': collapseSidebar}"
(The active class name is wrapped by the "'" characters)
hi this is my code snippet:
<div class="showtimes" data-bind="visible: showHide">
<div data-bind="template: { name: 'movie-grouped-showtimes-template', data: $data }"></div>
</div>
I want to toggle showHide off and on using the following:
<a class="icon arrow" data-bind="click: $parent.showtimes">
can't I just set up a variable showHide in my view Model, like the following:
self.showHide = ko.observable(false) ... Hide
showHide(true); ... show
and can I set it using the click : $parent.showtimes, like in the following:
<a class="icon arrow" data-bind="click: $parent.showtimes"></a>
You just have to set a function in the viewmodel that binds to the button's click (or modify an existing one, like showTimes in this case) to toggle the value of showHide.
Here's a simple example: http://jsfiddle.net/EfrainReyes/LNzDL/
var vm = {
showHide: ko.observable(false),
toggle: function() {
this.showHide( !this.showHide() );
}
};
ko.applyBindings(vm);
I didn't add any other elements to the example because the question seems to be targeted more towards showing/hiding the div.