I'm trying to do a toggleClass onClick in AngularJs 1.5. Is there any possibility to do that? For example, if you click on a div it'll change a background color.
You can use ng-class which is made for this very purpose.
ng-class is used like <div ng-class={'class_you_want_to_apply': some_boolean_variable}></div>
If you want to add more classes you can do so by added commas after each 'some_boolean_variable'
More docs at:
https://docs.angularjs.org/api/ng/directive/ngClass
Related
I have html of slider with with js and css in working condition, now i have to implement Joomla banners in that slider is it possible or right way ? if not than guide me how to do this or another method
Yes, is possible. In this case you need add your custom code in your template, and the custom code via override.
First try to add the HTML and content for example in one Custom HTML module for test:
Adding JavaScript and CSS to the page (add the css in your main css file)https://docs.joomla.org/J3.x:Adding_JavaScript_and_CSS_to_the_page
By default the component banners has a single call at the same time, you'll have to modify the php code and include, for example a cycle to recover more banners or similar.
Here you can find more info:
Understanding Output Overrides.
Create an override.
I spent the last 5 hours trying to get this animation to work with no luck. I wanted to create a cool animation whenver the user click on a button, the idea is to display a list of ul elements in a flip animation, pretty much like what http://lab.hakim.se/scroll-effects/mobile.html is doing (if you selected flip from the gear icon and changed chrome device mode to a mobile device).
Im using ngAnimate along with Angular and Ionic, I created the snippet here http://play.ionic.io/app/4ae65754fc64 (try to click the Add to Cart button). I want to display each li item as if they are flip and cascading whenever they are displayed. For some reason all the animation classed are ignored.
Ok, I think I achieved what you were wanting to achieve. I provided you two demos below.
But first of all the ng-animate directive is not supported anymore in AngularJS >= 1.2. And for ng-show based animations you have to use the ng-hide-add, ng-hide-remove CSS classes not the CSS classes described in the ngRepeat documentation.
The ionic demo (first link below) is basicly just a mockup of your code and is not perfect by any means.
The codepen demo is a bit more modified example and generic example. I used <ion-list> and <ion-item> instead of <ul> and <li>.
Hopefully this gets you in the right direction when implementing your final solution.
Ionic demo: http://play.ionic.io/app/3c0e90238fe8
Codepen demo (more generic): http://codepen.io/thepio/pen/KMPeZo
I was wondering if the tooltip like this:
tooltip from material-ui
that occurs on icon can be possible onHover of a div?
Or do I have to create it by hand?
I tried this:
tooltip div with reactjs
but none of the 2 solutions is currently working.
can be possible onHover of a div? Or do I have to create it by hand?
You have to create it of course. It is unclear what you mean by onHover, if you want you can use onMouseEnter and onMouseLeave to create relatively positioned tooltip.
Alternatively it is super simple to use a simple CSS tooltip : http://kushagragour.in/lab/hint/ driven by data- attributes (supported natively by react).
I'm trying to use Angular Material color intention classes like md-primary on normal HTML elements as below:
<span class="md-primary">This text is in primary color.</span>
But this is not working. I assume that it is because during rendering, Angular applies color intention classes only to the ngMaterial directives.
Am I correct in this explanation? And if so, is there a workaround for this, apart from creating my own CSS classes?
The class color only will work on the Material elements, but there's a work around:
Just pick the color hex from the Google Material Site http://www.google.com/design/spec/style/color.html#color-color-palette
Sample:
<span style="color: #2196F3"> Material Blue Color</span>
There are CSS/LESS palettes around, if you don't want to pick all these colors. http://zavoloklom.github.io/material-design-color-palette/
I am working on a responsive website. My site uses Bootstrap 3.1 and AngularJS. Bootstrap has a class called "visible-xs". This class basically says let something be visible on small screens and hidden on larger screens. It does this by changing the CSS display property value between none and block. Currently, I have a div that looks like the following:
<span id="smallContent" class="visible-xs">Mobile Content</span>
I need to do some stuff programmatically in my controller when smallContent changes from visible to hidden and vice-versa. My question is, how do I watch for changes on the display property of smallContent? I've noticed the $watch method on the scope (http://docs.angularjs.org/api/ng/type/$rootScope.Scope). However, this seems to watch for changes to a property in the scope, not for changes to a property in the DOM.
Is there a way to do what I'm trying? If so, how?
Thank you!
You don't need javascript watchers to do what you want. You can, but it would be kind of hacky and potentially bad on performance.
Another point is that "responsiveness" should be handled (a maximum) by HTML/CSS only. If you start having JS different for each resolutions, it's no good.
What you could do :
<span id="smallContent" class="visible-xs">Mobile Content</span>
<span id="smallContent" class="hidden-xs">Not Mobile Content</span>
Keep in mind that you can also simulate media-query in JS with Modernizr :
if (Modernizr.mq('only all and (min-width: 768px)') ) {
}
That can be usefull (you can alos add this to a watcher but, well my answer was primarily CSS-based and you should stick to CSS solutions when possible)