I want to add star button on navigation bar and when user press on this, the button show selected icon and next time is press it show unselected.
I tried it by using ionic-on and ionic-off but I can't make it.
The icon-on and icon-off attributes only apply to tabs I think. You can use ng-class like you see here. Based on the value of your $scope.starred property, it will show a star or the outline of a star.
<span class="icon" ng-class="{'ion-ios-star': starred, 'ion-ios-star-outline': !starred}"></span>
Related
I also want to when I click on the background and there are other pressable things/buttons on this background, they are not being pressed unless the state is back to when it is un-blurred (basically: only the blurred background can be pressed when the screen is blurred). If you need an example look at twitter mobile: when you click on the post (+) button, it blurs the background but when clicked back it un-blurs it. (Must work for IOS and Android).
I think you need this..
In CSS create 2 classes - First one with the blur and second one without.
In React create 2 functions - 1 onclick for the blur-button and 1 onclick for the close button. These functions should change the class of body.
$('.button').click(function(){
$('body').addClass('blur'); });
So I have a button on my template, with a tooltip that gives some extra information about the button. I would like the tooltip to appear when the mouse hovers over the button, and then disappear when the button is clicked. Clicking the button loads a separate view.
Currently I have it so the tooltip appears on hover, but then the problem is that the tooltip sticks around after the button has been clicked. Since the button is no longer part of the current view, the tooltip jumps to the top corner of the screen for a few seconds before disappearing. I'd like it to disappear the moment the button is clicked.
So far I've tried two things to solve the problem, neither of which have worked:
I tried wrapping the JS function which opens a new view in $timeout, hoping that the tooltip would disappear before the new view loads.
I tried changing the tooltip-trigger to 'click', but now the tooltip won't appear when the mouse is hovering over it. It will appear once the button is clicked, and stay there until the view is re-loaded.
Here is my code, which includes the two failed attempts mentioned above:
Test.html:
<a class="the-button" ng-click="loadNewView($event)"
uib-tooltip-html="getToolTipInfo($event)"
tooltip-trigger="'click'"
>
Click Me!
</a>
Test.js:
ctrl.loadNewView = function($event) {
$timeout(function($event) { //timeout
SystemViews.openNewView(ctrl.newView);
});
};
Is it possible to have separate triggers for a tooltip like this? If not, what is another way that I can make sure the tooltip disappears before the new view is loaded?
Thank you very much in advance for any wisdom you'd be willing to impart.
The simplest solution is to hide the tooltip before changing view.
If your tooltip is triggered by a click on your anchor, you can emulate a click in your loadNewFunction function to hide it.
Test.html:
<a id="the-button" ng-click="loadNewView($event)" uib-tooltip-html="getToolTipInfo($event)" tooltip-trigger="'click'">Click Me!</a>
Test.js
ctrl.loadNewView = function($event) {
angular.element('#the-button').trigger('click');
SystemViews.openNewView(ctrl.newView);
};
Maybe this answer can interest you since it's about a very similar question.
I found the solution (for me, at least). I learned that you can have multiple triggers if you separate them by space. For my solution, I used the value:
tooltip-trigger='mouseenter click'.
That way it always turns on when I mouse-over, and turns off when I click.
Test.html:
<a class="the-button" ng-click="loadNewView($event)"
uib-tooltip-html="getToolTipInfo()"
tooltip-trigger="'mouseenter click'
>
Click Me!
</a>
Test.js:
ctrl.loadNewView = function() {
SystemViews.openNewView(ctrl.newView);
};
Hope someone else finds this helpful!
I have an Ext.panel.panel which is collapsible. Now, I need to give the collapsible toggle button an itemId so I can simulate clicks for this component in the automated tests. I can give an itemId to the panel itself but I can't see any way to give one to its toggle button:
You don't have to simulate clicks. You can call collapse on the panel :)
In angular.js, I'm trying to apply a set of classes based on the value of a variable on $scope. But when I set a pair of space-delimited classes, ng-class seems to be removing any that are already present (and it doesn't put them back).
See the Fiddle here: http://jsfiddle.net/fLf0fenj/
Try clicking any of the gray buttons. An icon will appear. It's one from Font Awesome, and the class is fa fa-whatever. Now click another of the gray buttons. The icon should turn into another Font Awesome icon, but instead of that element having two classes (fa fa-something-else), it just has the fa-something-else, so it looks like a square.
If you instead click a gray button, and then the green button, it's all fine. Because that green button uses a glyphicons icon, and so the class names are all being switched out each time.
How do I get around this behavior?
Try
ng-class="statusIcon()"
And here's a working fiddle
I'm new to AngularJS, and I want to make simple animation like PrestaShop shows when user click "Add to cart" button on the product.
I found nice article about animations in AngularJS, but there is a few methods of doing that...
Suppose I have a grid list of products with photos for each of them and button with text "Add to cart". When user click on it the photo should be "cloned", opacity should be 0.5 and this photo should slide position to cart which is on the top of the site.
I have one concept:
Photos in ng-repeat can be rendered twice, where one of them is like hidden "behind the second" and the mentioned "clone" with animate should take affect of them, but how to make it in AngularJS manner? (if this is good idea)
If you don't need to support old browsers, instead of rendering the photo twice, try something like this;
Set a CSS to change the opacity, say:
.opaque {
opacity: 0.5;
/* and maybe other browser specific opacity settings */
}
And in your HTML:
<img src="...." ng-class="{opaque:isOpaque}" />
<button type="button" ng-click="isOpaque=true">Add to cart</button>
As you can see, the ng-class on the <img> is set to 'opaque', which will only be activated if isOpaque === true. The 'Add to cart' button will then set isOpaque to true when clicked.
The rest is just to prepare your controller as usual.
Hope this helps.