Watching a CSS property change from Bootstrap in AngularJS -
i working on responsive website. site uses bootstrap 3.1 , angularjs. bootstrap has class called "visible-xs". class says let visible on small screens , hidden on larger screens. changing css display
property value between none
, block
. currently, have div looks following:
<span id="smallcontent" class="visible-xs">mobile content</span>
i need stuff programmatically in controller when smallcontent
changes visible hidden , vice-versa. question is, how watch changes on display
property of smallcontent
? i've noticed $watch method on scope (http://docs.angularjs.org/api/ng/type/$rootscope.scope). however, seems watch changes property in scope, not changes property in dom.
is there way i'm trying? if so, how?
thank you!
you don't need javascript watchers want. can, kind of hacky , potentially bad on performance.
another point "responsiveness" should handled (a maximum) html/css only. if start having js different each resolutions, it's no good.
what :
<span id="smallcontent" class="visible-xs">mobile content</span> <span id="smallcontent" class="hidden-xs">not mobile content</span>
keep in mind can simulate media-query in js modernizr :
if (modernizr.mq('only , (min-width: 768px)') ) { }
that can usefull (you can alos add watcher but, answer css-based , should stick css solutions when possible)
Comments
Post a Comment