Using the package, Angular-flash and having issues adding custom animations to the showing and hiding of an alert.
From the docs
If you want to use animations, include ngAnimate module. You can then
use regular Angular animation technique for applying your own
transitions.
.alert {...}
.alert.ng-enter, .alert.ng-enter.ng-enter-active {...}
.alert.ng-leave, .alert.ng-leave.ng-leave-active {...}
I feel like I've tried all possible combinations but struggle to get the in . out effects.
My HTML
<flash-message>
<div>{{ flash.text }}</div>
</flash-message>
<button ng-click="showFlash()">PRESS ME</button>
Controller
$scope.showFlash = function() {
var message = '<strong>Hello!</strong> ';
var id = Flash.create('info', message, 4000, false);
};
Just to test my CSS animation is working I just added an animation to the alert class. This provides the show animation only.
.alert {
animation: 1.5s zoomIn ease;
}
I need to be able to attach it to the "Alert Show Event" and then attach a zoom out to the "Alert Hide Event", allowing a specific show and hide effect.
I've tried these in multiple combinations but struggle to find what class to associate with the show / hide animations.
.alertIn,
.alertOut
.alert.ng-hide-add-active
.alert.ng-hide-remove-active
Thanks
I developed a flash message package and uploaded it in npmjs.com, i think the package will help you,
Package Name: Flash-Text
author: VamshiDureddy
Related
I am working on an Augmented reality scene using Aframe and AR.js. I am currently rendering obj models when the marker is detected. My requirement is to be able to click on individual models upon rendering and also static objects (buttons) . For some reason click event is not triggered properly on aframe entities when I test it on mobile devices , very rarely it detects the touch but it works fine when I test it on a desktop using a webcam. This is my approach -
AFRAME.registerComponent('cursor-listener', {
init: function () {
this.el.addEventListener('click', function (evt) {
console.log('I was clicked at: ', evt.detail.intersection.point);
});
}
});
</script>
</head>
<body>
<a-scene embedded arjs='trackingMethod: best; debugUIEnabled: false;'>
<a-marker id="marker" preset='hiro' cursor="rayOrigin: mouse">
<a-entity material=" src: url(box.png) " class="collidable" cursor-listener position="0 -1 0"></a-entity>
</a-marker>
<a-camera-static>
//button a child of the camera.
<a-entity id="red" material="color: red" class="collidable" geometry="primitive: box" cursor-listener position="0 0 -4" scale="0.3 0.3 0.3"></a-entity>
</a-camera-static>
</a-scene>
</body>
</html>
I have tried this https://github.com/jeromeetienne/AR.js/issues/416#issuecomment-425078800
solution, it make it better, just not accurate enough, the click is detected when clicked outside the object.
Is there anything any way to fix this?
Thanks.
What you might be looking for is dropping the idea of handling the click with a gaze-like cursor and go for a plain mouse/touch click like explained here.
I'm using the autocomplete editor of HOT, but needed to have my own template of the option-list. I've been able to accomplish that, by removing the default display and replacing it with my own while doing a lazy load of its content. But I need to perform specific tasks on each of the options being clicked.
The issue is that I cannot find a way to have my <a ng-click='doSomething()'> or <a onclick = 'doSomething()'> tags to find my "doSomething" function.
I've tried the extend prototype of the autocomplete instance, have put my function out there on my controller to no avail. Is there any way I can insert a delegate function inside this editor that could be triggered from inside my custom-made template? (Using angularjs, HOT version 0.34)
Dropdown options cannot interpret HTML instead of Headers.
To perform action when an option is selected you can use Handsontable callback : AfterChange or BeforeChange
Here you can find all HOT callbacks https://docs.handsontable.com/0.34.0/tutorial-using-callbacks.html
This JSFiddle can help you http://jsfiddle.net/fsvakoLa/
beforeChange: function(source, changes){
console.log(source, changes)
},
afterChange: function(source, changes){
console.log(source, changes);
if(!source) return;
if(source[0][1] == 0){//if ocurs on col 0
let newsource = optionsWBS[source[0][3]];
cols[1] = {
type : 'dropdown',
source: newsource,
strict: false
};
hot.updateSettings({columns: cols});
hot.render();
};
}
Thanks, I actually needed actions specific to each area being clicked. What I did to make it work was this: while inserting the items for the list, I created the element and bound it to the function right away: liElement = document.createElement('li') .... liElement.onclick = doSomething(){} .... got it working this way ..
I am working with angularjs 1.6, leaflet and mapbox. I am trying to recreate a box whose value changes based on which polygon you are hovering over in an angularjs way. The behaviour I want to recreate is in this example
http://leafletjs.com/examples/choropleth/
You can see the value in the box in the top right of the map changes based on which polygon you are hovering over. When I try to recreate it in an angular way, the view does not update but I can see the value in my component updating.
html:
<div class="data">{{vm.polygonValue}}</div>
Controller (same as the highlight feature in the example):
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 3,
color: '#666',
fillOpacity: 0.5
});
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
}
addValue(layer.feature.properties);
}
function addValue(props){
vm.polygonValue = props.value;
}
All runs in the controller and I can see the vm.polygonValue change when you hover over a polygon but the view doesn't change. Can someone help? Wondering is it because the value changes too frequently or something and angular cant handle it?
Probably your function is triggered outside of the angular digest cycle, to notify angular about changes you need to execute it within $scope.$apply function.
Something like $scope.$apply(() => addValue(layer.feature.properties)) should work. You can find out more about $apply in the docs: https://code.angularjs.org/1.6.9/docs/api/ng/type/$rootScope.Scope#$apply
I have defined kendo tooltip in following way:
<i class="fa fa-info-circle ico-tooltip" kendo-tooltip k-content="model.Description"></i>
Initially the content is ok, but when model.Description is changed and the site is not reloaded the k-content shows the old value.
After reload site by F5 there is new value, but this is not what I want to achieve.
It is possible to somehow refresh this tooltip or workaround this issue?
I had a similar issue and I debugged through Kendo's code and following solution works, in my case I wanted to show only upto 22 characters of text from my model and show full text in the tooltip, here is example code
This sample below is using Angular's 1.5 component
<div kendo-tooltip="$ctrl.selectedItemTooltip" k-content="$ctrl.selectedItemText">{{$ctrl.selectedItemText | limitTo:22}}</div>
and in JS
function fetchFromServer(){
$http.get('/myService').then(function(response){
ctrl.selectedItemText = response.data.model.text;
ctrl.selectedItemTooltip.options.content = ctrl.selectedItemText
ctrl.selectedItemTooltip.refresh();
});
}
in the tooltip options object (when you initialize the tooltip) you set function for the hide event (check documentation ) and in this function you could call refresh function
`
var tooltip = $("#container").kendoTooltip({
hide: function() {
tooltip.refresh();
}
})
`
i think this will do the trick
Using Bootstrap and Angularjs I'd like to create a button that doesn't ever appear to be "active". I'd like the button to darken slightly when the mouse is over it, and I'd like it to darken further when it's clicked. When the mouse leaves the button, however, I'd like it to return to its original appearance.
Semantically, I'm using the button to "reset" part of my app. I want to execute some code when it's clicked. After it's been pressed, though, it doesn't make sense for the button to remain in a "depressed" state.
Here's a live example.
Any ideas?
Alternatively you could use the ng-mouseenter and ng-mosueleave directives.
For example:
<div ng-app="ButtonApp">
<div ng-controller="MainCtrl">
<button ng-class="buttonClass"
ng-mouseenter="onMouseEnter()"
ng-mouseleave="onMouseLeave()"> Click Me!
</div>
</div>
And in your controller:
var app = angular.module('ButtonApp',[]);
app.controller('MainCtrl', ['$scope',function($scope){
var defaultButtonClass = ['btn','btn-foxtrot'];
$scope.buttonClass = defaultButtonClass;
$scope.onMouseEnter = function(){
$scope.buttonClass = ['btn','btn-bravo'];
};
$scope.onMouseLeave = function() {
$scope.buttonClass = defaultButtonClass;
}
}]);
You can see my JSFiddle.
To generate the button colors you could use something like Beautiful Buttons for
Twitter Bootstrappers.
I'd give it another class, say btn-reset and add the following CSS.
// the order of these two is also important
.btn-reset:hover{
background-color: Dark !important;
}
.btn-reset:active{
background-color: Darkest !important;
}
// you need this to reset it after it's been clicked and released
.btn-reset:focus{
background-color: Normal !important;
}
It's working here http://plnkr.co/edit/QVChtJ8w70HXmyAaVY4A?p=preview
The issue is that the :focus pseudo class has a darker colour than the standard button so after it's been clicked it still has focus so still has the darker colour, if you want to stick with the standard colours you can just add a new selector for the :focus pseudo class.