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)
Related
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 need to figure out how I can have different views(html+css) for a component. A lot of people say that it's better to have multiple components for each for each of those views and then use a service to interact but my case is as follow:
I have a controller with a view that is basically a layout. Say my layout has 3 panes on top and one pane in the bottom. Now I have button in my view to change the layout to two panes on top and two panes on the bottom. So basically my data does not change. Its just a change in the html and css.
also if the first layout is filled with some data I dont want to change it or reinitialize it when changing the layout since the change is only a change on layout not the data.
I have difficulty figuring out how I can achieve this in angular2. Any ideas?
so you want to add html and css or just change the actual template?
If you just want to change the actual html , i personally suggest that you use states instead of different views. And based on the states move the html around. I had the same issue myself and i solved it by rethinking the layout and ended in finding a simpler layout structure.
Hope this helps.
Enjoy coding.
You can have two views in one template and switch between them by setting a flat:
<div *ngIf="firstLayout">
<!-- first layout -->
</div>
<div *ngIf="!firstLayout">
<!-- first layout -->
</div>
I'm trying to prevent my carousel from stopping when the mouse is over the slides. I've tried to add pause=false in the uib-carousel directive as I have read somewhere else however that doesn't work. I'm also inspecting the element but can't really find where can I set that option (if that's possible).
I have also seen people adding to the .carousel class the pause=false and then I tried to add to add the CSS without success as well.
Any ideas?
I would first confirm ngAnimate is not interfering with the carousel in any way. To accomplish this, simply follow the instructions in this post: ngAnimate breaks existing ui.bootstrap.carousel
I've just checked https://github.com/angular-ui/bootstrap/blob/master/src/carousel/carousel.js and looks like there is an attribute for that directive called "no-pause". I will give that a go!
I have a number of collapse directives in an app and i'd like to be able to individually switch their animation on and off (to 'force' them open or closed), depending on specific state. I've looked at the source and can't see where i'd be able to hook into the directive to achieve this. Or am i missing something obvious?
The only solution i can see at the moment, is duplicating the whole directive and modifying the link function to allow for a second attribute to be watched that would determine if animation is used or not.
AFAIK, the angular animation is based on CSS transition, so you could disable animations by add some CSS properties to the element.
May be define a noanimate class like this:
.noanimate {
transition: none !important;
}
then you could add/remove the noanimate class to the element when you want to disable/enable the animation.
Hope this helps.
I'm new to AngularJS and I'm learning it independently.
I read about ng-if using the official AngularJS website.
I got an exercise which I need to scan a color, and if the color is white (#fff in hex), I should change the span's background-color to black (#000 in hex).
This is what I've tried JSbin.
I involved Javascript because I don't know how to deal with CSS on Angular and I think that's they reason why the code is not working as expected.
Sorry for being ignorant.
Thanks in advance.
You don't use inline JS (onclick) when you have ng-click (or at all, for that matter). I suggest you take a step back and make sure you understand what's going on, and not just put in random bits of code in hope they would give you what you want.
Here's an updated demo.
First, I removed the onClick. then I changed the function to be included in the scope as that's the only way things you put in things like ng-click can find those functions. Last, I changed added a backgroundColor variable to be set to the desired color when the button is clicked, and changed the style attribute of the output element to have a background-color rather than color like you had.
Also, I don't see how ng-if has anything to do with this.