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.
Related
here is the image of my codeI'm building a Twitter like app and i'm trying to build the 'Like' menu at the bottom of every tweet.
at the moment the 'Like' is a button and i want to change it's color once pressed.
the obvious problem is that all the other tweets 'likes' buttons are changing too..
i've tried everything i can using useState hooks and nothing worked..
any ideas?
What I would do is, I would store the liked info inside the item. So when you add like, you can change item.liked = true or item.liked = false
And once you do that you can style based on the item's liked field:
<button style={{backgroundColor: item.liked ? 'red' : ''}} ...
I am using React and Semantic UI for my website and I'm looking to create a modal popup to provide some action items on the page.
Currently, with Semantic's Modal, you must choose between three dimmer options (Default, inverted and blurring). In my case, I want the pop-up to appear, but I don't want ANY overlay. The page behind the model should appear as normal. Strangely, this isn't easy/obvious to implement.
On my page, I have the following example model code.
<Modal dimmer="inverted" size='mini' open={this.state.modalopen} onClose={this.onClose}>
<Modal.Header>Select a Photo</Modal.Header>
<Modal.Content image>
<Modal.Description>
<p>Some contents.</p>
</Modal.Description>
</Modal.Content>
</Modal>
The three options (default,inverted and blur) obviously don't work.
I have tried using styling to set the background color to transparent and other optoins, but nothing seems to work.
<Modal style={{backgroundColor: "transparent"}} dimmer="inverted" size='mini' open={this.state.modalopen} onClose={this.onClose}>
I know there must be an easy solution here..what is it?
Thx for your help.
Is used to be possible to set dimmer={false}, but this is deprecated (see link below) according to the documentation, and you will need to use styling in order to make it transparent, so your solution is close to what you need to do. If you inspect the rendered Modal, you'll see that you need to override the background-color of the .ui.dimmer css class. You should be able to do that in your component's stylesheet.
https://github.com/Semantic-Org/Semantic-UI-React/pull/2882
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!
In my Angular app I have a button where I apply a CSS style depending on the $index from the ng-repeat.
However whats happening is on page load the buttons style appears as the default (which is class button) for a second before applying the actual style I want (which is customColour{{$index}}).
<button type="button" ng-click="superAction($index)"
class="small button customColour{{$index}}">
</button>
I have confirmed that it must be down to the delay in getting the $index value having spent the last 4 hours playing around with the CSS files (ensuring things like my custom style appears at the top of my css file etc).
So any ideas/suggestions I can try would be appreciated.
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>