CODEWITHSUNDEEP
jquerycssangularjs
UltraSonja
UltraSonja

Reputation: 891

jQuery: Manipulating CSS

I am trying to change the style of a button (which is really just a div). I can do it in CSS with .classname:active, but the button only changes style while it is being clicked; it doesn't maintain the style changes after the click is released. So, I decided to use jQuery to manipulate the CSS. It is worth noting that I am also using Bootstrap and Angular in my application.

HTML

<div class="subcontainer">
    <div class="center" data-container="body" popover-template="'popover-template.html'"> 
        {{instance}}
    </div>
</div>

jQuery

$(document).ready(function() {
    $(".subcontainer").click(function() {
        $(this).css("border", "1px inset gray");
    });
});

I have also tried using $(".subcontainer").on("click", function () { ... });, but to no avail. I looked at jQuery UI but I don't think it has a quick-fix solution to what I'm trying to achieve, so I'd like to stick with plain jQuery.

EDIT:

The code above works on all elements that aren't nested inside an ng-repeat. I'm trying to solve why it isn't working for those elements inside of an ng-repeat.

See https://stackoverflow.com/questions/31972784/injecting-jquery-into-angularjs-directive if you are trying to use inject jQuery into an AngularJS directive.

Upvotes: 0

Views: 103

Answers (4)

UltraSonja
UltraSonja

Reputation: 891

You can change properties of a CSS class with AngularJS and CSS, no jQuery needed. See this for details. Note that you don't even need a controller like the OP has.

<div ng-class="{'gray-inset-border': style}">
    <div ng-click="style=!style">
        Content
    </div>
</div>

Upvotes: 0

Laky
Laky

Reputation: 632

try it like this;

html

<div class="subcontainer">
    <div class="center" data-container="body" popover-template="'popover-template.html'"> 
        BUTTON
    </div>
</div>

js using jquery

$( ".subcontainer" ).click(function() {

    $(this).addClass("green");

});

css 

.subcontainer
{
    background-color:red;
    width:120px;
    height:auto;
    display:block;
}
.green
{
   background-color:green; 
}
.center
{
    padding:10px;
    text-align:center;
}

Here's the fiddle link

In the example I just change the button colour, but you can configure the dynamically setting class to have any style values as you like.

Upvotes: 0

li bing zhao
li bing zhao

Reputation: 1418

When you use Jquery with angular, the source code in your index page have to be Jquery first then angular like below:

<script src ="bower_components/jquery/dist/jquery.js"></script>
<script src ="bower_components/angular/angular.js"></script>

You need to use the $(".subcontainer") to angular.element('.subcontainer'). if not,you may have warning or error,when run "grunt serve".

hope it helps.

Upvotes: 0

nurdyguy
nurdyguy

Reputation: 2945

The problem is the this pointer. Try this intead:

$(".subcontainer").click(function(e) {
    $(e.target).css("border", "1px inset gray");
});

This will pass the general event information into e, then you can get the target of the event using e.target.

EDIT: In Woodrow's comment above, you could do the same but use '.addClass('isactive')' instead of the direct css manipulation. The main benefit here is that it is easier to remove later using '.removeClass('isactive')'

Upvotes: 1

Related Questions