Develop Reference

toggle angular css class

I am trying an toggle the class 'not-compatible':false to 'not-compatible':true using angularjs:
<div class="col status" style="margin-left: 63px;margin-right: 74px; width: 190px">
<label class="title">Radius</label>
<img src="assets/images/BOTTOM SCREEN/OPERATION BOARD/SVG/button UP enable.svg" ng-click="myFunctionUp()/>
<div id="myDiv" class="status-bar" ng-class="{'not-compatible':false,'in-progress':false} ">
<label class="number-spolier">1000<span>m</span> </label>
<span><span></span></span>
</div>
<img src="assets/images/BOTTOM SCREEN/OPERATION BOARD/SVG/button DOWN enable.svg" ng-click="myFunctionDown()/>
</div>
when the img(either first or second) is clicked to change the class to true of the div "myDiv".
Any idea?

It should be like,
In HTML:
<div class="col status" style="margin-left: 63px;margin-right: 74px; width: 190px">
<label class="title">Radius</label>
<img src="assets/images/BOTTOM SCREEN/OPERATION BOARD/SVG/button UP enable.svg" ng-click="myFunctionUp()/>
<div id="myDiv" class="status-bar" ng-class="{'not-compatible':isCompatible,'in-progress':false} ">
<label class="number-spolier">1000<span>m</span> </label>
<span><span></span></span>
</div>
<img src="assets/images/BOTTOM SCREEN/OPERATION BOARD/SVG/button DOWN enable.svg" ng-click="myFunctionDown()/>
</div>
In controller:
$scope.isCompatible = false;
$scope.myFunctionDown = function(){
$scope.isCompatible = true;
//$scope.isCompatible = !$scope.isCompatible; //Or toggle like this
}

You should set flag on your scope indicating if image has been clicked. You can add this line of code to myFunctionUp and myFunctionDown functions to set scope variable indicating that img has been clicked:
$scope.imgClicked = true;
and then just use this variable in ng-class like that:
ng-class="{'not-compatible': imgClicked}"

You can simply use a scope variable instead of false in your expression
{'not-compatible':false,'in-progress':false}
See https://plnkr.co/edit/ekIrDxH9DswG3UJzRiVT?p=preview

Try this example might help, actually you need to use the variable instead of directly setting true/false in ng-class
https://scotch.io/tutorials/the-many-ways-to-use-ngclass
http://codepen.io/sevilayha/pen/qlLED

ng-class should not have "false", but should have the name of the model's variable. For example, if MyFunctionDown() sets "classStatus = 'Fred'" then you could have something like ng-class="{'not-fred':classStatus !== 'Fred', 'is-fred':classStatus === 'Fred'}"

Javascript remove specific css value

I am trying to remove the word "Quantity" from below and I think I am close but obviously something is off since it's not working.
<div class="DetailRow" style="display: ;">
<div class="Label">
<label>Quantity</label>
With:
<script type="text/javascript">
$(document).ready(function(){
$('#text_qty_').parent().parent().remove();
$('#qty_').parent().parent().remove();
$('.QuantityInput').remove();
$('label[for="Quantity"]').css('display', 'none').remove();
});
</script>

Try doing it with pure js after adding an id.
<div class="DetailRow" style="display: ;">
<div class="Label">
<label id ="text">Quantity</label>
<script type="text/javascript">
$(document).ready(function(){
document.getElementById("text").innerHTML = "";
});
</script>

Your label needs an id. In this example, I'll use "quantity" as the id.
$('label[id="quantity"]').hide();
This will work but this will apply the style to all labels.
$('label')
Using Pure JavaScript is best though.

Try this $('label').html('');.

$('label[for="Quantity"]') will not retrieve <label>Quantity</label> since it doesn't have the attribute for. Just use $('label') or $('.Label label') and it will work.

Try this if you want to remove the label element itself:
var labels = $('label');
if( labels.text() == 'Quantity' ){
labels.remove();
}
To just remove the word Quantity without removing the label element:
labels.text('');
If you want to remove its parent:
labels.parent().remove();
Also to remove the parent's parent, the <div class="DetailRow"> use this:
labels.parent().parent().remove();
JSFiddle

You can use plain javascript and existing markup with querySelector:
var el = document.querySelector('.DetailRow .Label label');
if (el) {
// do stuff
}
If you want to remove the content, then:
el.textContent = '';
If you want to remove the element, then:
el.parentNode.removeChild(el);
and so on…

I think you can check the label value, and remove the label if the value equals to "Quantity"
Try this:
<div class="DetailRow">
<div class="Label">
<label>Quantity</label>
</div>
</div>
And the script:
$(document).ready(function(){
$(".DetailRow label:contains('Quantity')").hide();
});
http://codepen.io/Himechi90/pen/rOJYjX

Thank you Griffith! This worked perfectly. Full code for anyone trying to remove the quantity and quantity box from only some of your products on bigcommerce. Note that you need to create a separate product template and add this below %%Panel.Header%%
<script type="text/javascript">
$(document).ready(function(){
$('#text_qty_').parent().parent().remove();
$('#qty_').parent().parent().remove();
$('.QuantityInput').remove();
$('label').filter(function() { return $(this).text() === "Quantity"; }).remove();
});
</script>
Note also that your values for #text_qty_ etc may change depending on your template.
Thank you all for taking the time to help me!

Why does jQuery return null for element height?

I faced the same problem as that is mentioned by Matt but it is little different. I am trying to get height of a div but every time I get null.
HTML:
<div id="main" class="box-main " style="display:block">
<div class="box_content" style="position:absolute;top:0px;bottom:0px;height:453px;width:100%;padding-left:5px;padding-bottom:2px;">
<div style="min-width:200px;min-height:41px;padding-top:8px" id="ass-1415241823647 item-97"><div class="box">
<div class="new-try item_message" title="ram"><div class="pp"><img src="images/try.jpg" class="avatar " width="40" height="40"></div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</div>
</div>
</div>
JavaScript:
$(document).ready(function(){
alert($("#ass-1415241823647 .item_message").height());
});
I tried this too but it didn't work.
$(document).ready(function(){
alert($("#main .box_content #ass-1415241823647 .box .item_message").height());
});

ass-1415241823647 item-97 you can't have two id's remove one or try using class if u really want to

You don't seem to have any elements in your markup matching the selector #ass-1415241823647 .item_message" so it's unable to locate it.

Isn't the result of $("#ass-1415241823647 .item_message") empty jQueryObject? length 0?
.. id="ass-1415241823647 item-97">..
value of id attributes was wrong.

Try this using jquery:
$(document).ready(function(){
alert($(".item_message").css("height"));
});
Hope this helps.

Dynamically change inline style value using jquery

I'm trying to change an inline style value dynamically using jquery.
My html code:
<div class="progress progress-striped active" style="margin-bottom:1px;">
<div id="progress_bar" class="bar bar-success" style="width: 50%"></div>
</div>
I'm trying dynamically increase the width of the progress bar with a variable let's say var amount:
style="width: var amount"
Could someone help me out a bit?

I would use .animate ... See below:
FIDDLE
$("#but").click(function(){
var yourValue = "50%"
$('.progressbar').animate({ width: yourValue }, 10000);
});

You can use .css() to get/set css style value:
$('#progress_bar').css('width' , 'value_here');

You can use .addClass and .removeClass to add and remove CSS class respectively.
$( "progress_bar" ).addClass( "classWithNewCSS" );
$( "progress_bar" ).removeClass( "classWithNewCSS" );
thus, in real time, it adds and removes this CSS, applying the respective changes.

More info on the .CSS method.
http://api.jquery.com/css/
$('#progress_bar').css({
'background-color':'#FFF',
'width': variable
});

Jquery: parse div blocks and add id(1,2,3,4,5)

I'm trying to make jquery parse list of div blocks and add id to each div one by one with numbers like 1,2,3,4,5 and so.
For example, here is the list of div blocks:
<div class="my-blocks">
<div class="start"></div>
<div class="start"></div>
<div class="start"></div>
<div class="start"></div>
</div>
There can be any amount of div blocks with class "start". Final result must be like this:
<div class="my-blocks">
<div id="1" class="start"></div>
<div id="2" class="start"></div>
<div id="3" class="start"></div>
<div id="4" class="start"></div>
</div>
How can I do that? I just don't really understand where I can start to reach this functionality.

You can use .each() to iterate over child divs and then use index+1 to set it as id value.try this:
$('.my-blocks div').each(function(){
$(this).attr('id',$(this).index()+1);
});
Working Demo

You can do:
$('.my-blocks .start').each(function(i) {
$(this).attr('id', i+1);
});
Also note that number is not valid id, you can use div-1, div-2... instead.
Fiddle Demo

You need to add an alphabetical prefix for the ids, Since setting an id as a numeric value is not acceptable in standards below html5. so that your code would achieve backward compatibility.
Try to use the receiver function of .attr(),
$('.my-blocks .start').attr('id', function(i,_) {
return 'id-' + (i+1);
});
DEMO

You must take care that id starting with number is not allowed until html 4. So if you not working on html5 then you should add some prefix to id.
try each():
$('div.start').each(function(index, element){
$(this).attr('id',index+1);
});
Here is working demo.

Using jQuery 'id' property, loop through each block:
$(function(){
$.each($('.start'), function(i,e){
e.id = i+1;
});
});
JSFiddle here http://jsfiddle.net/PU2T4/

And one more (DEMO):
$('.start').attr('id', function() { return $(this).index()+1; });