javascript - Angular toggle background-image -

-

i want change background-image of element when click it.

right have:

<div class="item-center text-center" toggle-class="active cable">    <div class="quiz-background"></div>   <p class="size1 quiz-text">cable</p> </div>

css:

.quiz-background {   width: 80%;   min-height: 100px;   background-image: url(images/ofertas/cable_darkblue.png);   background-position: center center;   background-size: cover;   background-repeat: no-repeat;   margin: auto;   top: 20px;   position: relative; }  .cable .quiz-background {   background-image: url(images/ofertas/cable_lightblue.png); }

directive toggle-class:

'use strict';  angular.module('libertyprapp') .directive('toggleclass', function() {   return {     restrict: 'ea',     link: function(scope, elem, attrs) {       elem.bind('click', function() {         elem.toggleclass(attrs.toggleclass);       });     }   } });

right now, background image toggles because i'm toggling class second background. want able inline styling style="background-image: url(...)"and able change inline background style.

is there way angular?

thanks!

edit

here's i've done far, works i'm not if it's best way:

<div class="item-center text-center circle-image-quiz" toggle-class="active cable">    <div class="quiz-background" style="background-image: url(images/ofertas/cable_darkblue.png);"></div>   <p class="size1 quiz-text">cable</p> </div>

and css:

.quiz-background {   width: 80%;   min-height: 100px;   background-position: center center;   background-size: cover;   background-repeat: no-repeat;   margin: auto;   top: 20px;   position: relative; }  .cable .quiz-background {   background-image: url(images/ofertas/cable_white.png)!important; }

this way toggles class background image overwriting inline styled one.

i've done cause i'll have more 1 of these elements uses different background images when clicked , not clicked.

you can setup in controller $scope.toggledactive , can use ng-class change background switching classes, whatever. toggledactive changed true or false based upon button click.


Comments

Post a Comment

Popular posts from this blog

Capture and play voice with Asterisk ARI -

-
there channel ari demo in wich can control channel state: ring, answer, play silence, play tone or audio-file ( https://github.com/asterisk/ari-examples/tree/master/channel-state , https://wiki.asterisk.org/wiki/display/ast/ari+and+channels%3a+manipulating+channel+state ) possible receive chunks (parts, buffers, etc.) of call voice (which created remote subscriber) or write chunks of voice, example array of bytes (not file) in audio format (alaw, ulow etc). you can use asterisk eagi interface voice data. other option use record or mixmonitor app record channel(channel have put stasis allow dialplan control ari) "write chunks of voice" can done application playback also can create own application using c/c++, compile asterisk , result want. no, can't redirect voice directly using ari.
Read more

c - Unrecognised emulation mode: elf_i386 on MinGW32 -

-
i'm trying make kernel, , cannot link c output assembly. ld . i'm getting error: unrecognized emulation mode: elf_i386 i'm using windows 10 professional mingw32 , msys. code using: link.ld /* * link.ld */ output_format(elf32-i386) entry(start) sections { . = 0x100000; .text : { *(.text) } .data : { *(.data) } .bss : { *(.bss) } } kernel.c /* * kernel.c */ void kmain(void) { const char *str = "my first kernel"; char *vidptr = (char*)0xb8000; //video mem begins here. unsigned int = 0; unsigned int j = 0; /* loops clears screen * there 25 lines each of 80 columns; each element takes 2 bytes */ while(j < 80 * 25 * 2) { /* blank character */ vidptr[j] = ' '; /* attribute-byte - light grey on black screen */ vidptr[j+1] = 0x07; j = j + 2; } j = 0; /* loop writes string video memory */ while(str[j] != '\0') { /...
Read more

magic numbers - Java's checkstyle, MagicNumberCheck -

-
i using checkstyle reportings source-code. question magicnumbercheck . i using date/(org.joda.)datetime in source code this: datetime datetime = new datetime(2013, 2, 27, 23, 0): datetime.plushours(57); is there way suppress magicnumbercheck notifications if magic number within date or datetime? you can use suppressioncommentfilter check this. configure properties values (in checkstyle configuration file) <module name="suppressioncommentfilter"> <property name="offcommentformat" value="check\:off\: ([\w\|]+)"/> <property name="oncommentformat" value="check\:on\: ([\w\|]+)"/> <property name="checkformat" value="$1"/> </module> now required lines, can like //check:off: magicnumber datetime datetime = new datetime(2013, 2, 27, 23, 0): datetime.plushours(57); //check:on: magicnumber this suppress magicnumber checks , rest checks work here. you can su...
Read more