I have a progress bar that is outputted from a webapp program like this:
<div id="diskUsageProgressBar">
<div class="green-bar" style=" width: 1%;">
</div>
</div>
And I have added to the page a much nicer bar like this:
<div class="progress xs">
<div class="progress-bar progress-bar-red diskusgbar" style="width: 1%;"></div>
</div>
How could I use javascript (or JQuery) to copy the width value from the first one and paste it into the second one on page load?
Thanks for the help!
jQuery javascript:
$('.progress.xss .diskusgbar').css('width',
$('#diskUsageProgressBar .green-bar').css('width')
);
Like this:
$(function(){
$('.progress-bar-red').attr('style',$('.green-bar').attr('style'));
})
If you want to only copy the width then you can use native .width() method of jquery to get/set value:
$('.progress-bar').width($('.green-bar').width());
use this
$('.progress-bar').width($('.green-bar').width());
First, as said in Is it possible to listen to a "style change" event?
(function() {
var ev = new $.Event('style'),
orig = $.fn.css;
$.fn.css = function() {
orig.apply(this, arguments);
$(this).trigger(ev);
}
})();
And then bind it:
$('#diskUsageProgressBar > .green-bar').bind('style', function(e) {
$('.progress.xs > .diskusgbar').css('width',
$('#diskUsageProgressBar > .green-bar').css('width')
);
});
Hope it works. Maybe tricky and not so symple if the first bar is in another iframe.
Related
Can I use ng-class to display text in addition to a temporary class on my div?
Here's my code.
HTML:
<button ng-click="setBulkMode()"
<div class="filter-nav-bar" ng-class="{'filter-nav-bar-bulk-mode': bulkMode}">
JS:
$scope.setBulkMode = function() {
if(!$scope.bulkMode) {
$scope.bulkMode = true;
} else {
$scope.bulkMode = false;
}
};
Whenever I'm setting bulkMode to true, on my ng-class I'd like to display some text as well. So something like...
<div class="filter-nav-bar" ng-class="{'filter-nav-bar-bulk-mode': bulkMode 'Bulk Mode On'">
But I'm not quite sure how to do that. Any ideas?
Try the following:
<div class="filter-nav-bar" ng-class="{'filter-nav-bar-bulk-mode': bulkMode">
<span ng-show="bulkMode">Bulk Mode On</span>
And you dont need that function to set, you can do this easily in the view:
<button ng-click="bulkMode = !bulkMode">
Separate it. Create a new div with the ng-if directive to show it conditionally:
<div ng-if="bulkMode">Bulk Mode On</div>
And also, you can better write your function (personally I would rename it to toggleBulkMode):
$scope.setBulkMode = function() {
$scope.bulkMode = !$scope.bulkMode;
};
I have a header on my page, and block with boxes. That boxes represents my projects. When I click on one of them it is suppose to change my header background.
<div class="row">
<div class="job-one one-half column" onclick="headerProjBackground()">
<p>First</p>
</div>
<div class="job-two one-half column" onclick="headerProjBackground()">
<p>Second</p>
</div>
</div>
And my function:
function headerProjBackground(){
if($(this).hasClass('job-one')){
console.log('Hi!');
$('header').css('background-image': 'url(css/images/first-thing.png)');
}
if($(this).hasClass('job-one')){
console.log('Hello!');
$('header').css('background-image': 'url(css/images/second-thing.png)');
}
}
But it is not working. It can't understand my (this). There are no errors in the console. So this is logical mistake.
Onlcick attribute in Javascript by default Runs under Window, that means "this" object in the the function will always be window and as it doesn't have any class associated with it, so it will always give false in both if statement.
Refer below updated code snippet -
$('.jSelector').click(function(){
if($(this).hasClass('job-one')){
console.log('First Clicked!');
}
if($(this).hasClass('job-two')){
console.log('Second Clicked!');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="job-one one-half column jSelector">
<p>First</p>
</div>
<div class="job-two one-half column jSelector">
<p>Second</p>
</div>
</div>
Hope this helps!!
Outside of the onclick attribute, this is no longer defined. You can fix this in (at least) two ways.
Alt 1: Pass this as a parameter:
<div class="job-one one-half column" onclick="headerProjBackground(this)">
function headerProjBackground(clicked) {
//Replace this with clicked in the code of the function.
Alt 2: Do the event binding with jQuery instead of with HTML attributes:
<div class="job-one one-half column backgroundchanger">
$(".backgroundchanger").click(function() {
//Put the same code as for headerProjBackground() in your question.
//Here you can use the this keyword.
});
And some further thoughts: The way you have coded this is not very good if you want it compact (and clear). So lets try to improve it some! If you go with Alt 2 you could use a custom data- attribute to shorten the code:
<div class="one-half column" data-background="css/images/first-thing.png">
//If something that has the data-background attribute is clicked.
$('[data-background]').click(function() {
//Get the value from the data-background attribute, and use that as background image.
var background = $(this).attr('data-background');
$('header').css('background-image': 'url(' + background + ')');
});
Or, if you use Alt 1, you could just pass the desired background url as a parameter instead of this.
You can remove the onclick attribute on your divs and add the following, also the .css method has two parameters with comma between them.
<script type="text/javascript">
// once the dom is ready
$(document).ready(function() {
// check if any of the divs with column class is clicked
$('.column').click(function() {
// trigger the function and pass the (this) which is the object for the div clicked
headerProjBackground(this);
});
});
// element passed will be worked on in the function
function headerProjBackground(element){
if($(element).hasClass('job-one')){
console.log('Hi!');
$('header').css('background', '#000');
}
if($(element).hasClass('job-two')){
console.log('Hello!');
$('header').css('background', '#DDD');
}
}
</script>
Im fairly new to javascript and I just can't figure this out despite my attempt in researching. How do I track the change of a input within a div and trigger an append to an outside div? My code goes as follow:
Append h3 with "Pending" once ".image-value" input has a change in value
<!-- APPEND <h3> -->
<h3>Best Overall Costume<div class="pending">Pending</div></h3>
<div>
<div class="select-form">
<img src="images/vote.jpg" data-value="image_value">
<img src="images/vote.jpg" data-value="image_value2">
<img src="images/vote.jpg" data-value="image_value3">
<img src="images/vote.jpg" data-value="image_value4">
<img src="images/vote.jpg" data-value="image_value5">
<!-- Track the change of this input -->
<input type="hidden" class="image-value" name="selected_image" value="">
</div>
</div>
I tried this:
function changeStatus(statusValue) {
$("input",".select-form").val(statusValue).trigger("change");
}
$("input",".select-form").change(function(){
if (!$(this).val()){
$("<div class='pending'>Pending</div>").appendTo($("h3").prev($(this)));
}
});
But that didn't seem to work. Any ideas?
place an empty div where you want your new div and give it an id i.e(<div id='myDiv'><div>) and then append what you want like this.
$( "#myDiv" ).append( "<div class='pending'>Pending</div>" );
You can also check Append Explained
for more explanations.
Thanks.
I've done a couple things here... First, I'm not sure why you had it all in a named function. When you're using event listeners that often isn't necessary.
Then, I don't know what the val check was for, so I reversed it.
Finally, I'm using one(), which only runs once. This case seemed to call for that.
$('.select-form').one('change', 'input', function () {
if ( $(this).val() ) { alert('asdgf');
$("<div class='pending'>Pending</div>")
.appendTo($(this).parent().prev('h3'));
}
});
Fiddle
try this:
$("input",".select-form").on("change", function(){
var $this = $(this);
if (!$this.val()){
var elem = $('<h3>Best Overall Costume<div class="pending">Pending</div></h3>');
$this.parent().parent().before(elem);
}
});
you can also place a check, that if the pending div is already added, not to add it again.
Of course this solution assumes that there are no other nested divs between the target div(before which you want to append) and the input control
Is there any jQuery event that fires when a class is added to some object, which can tell me what is the element's content?
let me explain using an example.
Let's say I have a series of divs, all having the same class but different content.
<div class="block">content a</div>
<div class="block">content b</div>
<div class="block">content c</div>
<div class="block">content d</div>
At some moment, one of them will get an additional class, let's say selected:
<div class="block">content a</div>
<div class="block">content b</div>
<div class="block selected">content c</div>
<div class="block">content d</div>
I can't know whitch one id the selected one. So I want to run a function when one of these items gets the selected class and I want that function to receive the content of the selected element.
$('.block').on('event?', function(content){
//content is equal to "content c"
});
Is there something like that available in jQuery? Can I create one?
I have a plugin for you.
Insert this into you script:
//#Author Karl-André Gagnon
$.hook = function(){
var arg = Array.prototype.slice.call(arguments)
$.each(arg, function(){
var fn = this
if(!$.fn['hooked'+fn]){
$.fn['hooked'+fn] = $.fn[fn];
$.fn[fn] = (function(){
this['hooked'+fn].apply(this, arguments);
this.trigger(fn, arguments);
})
}
})
}
Then activate it like that:
$.hook('addClass');
This will add an "event launcher" on add class.
Then bind it on you block :
$('.block').on('addClass', function(e,a){ //e == events a == first arguments when calling addClass()
if(a === "selected"){//Just a validation
//Your code
}
})
You can get its text using this:
$('element').text();
This will provide you with the text of the element!
For you, this would be
$('.selected').text();
Now you can show it as an alert, or write it somewhere or use it as a variable! It will have the value of
content c
Or what ever the value the element would provide you with!
For more: http://api.jquery.com/text/
function test(someClass){
var content;
if($('.block').hasClass(someClass)) {
content = $('.' + someClass).html();
}
}
Then you call the function with the class of your wish as a parameter: test('classname');
I've been struggling between using C# and Html to make a windows 8 app. But I decided to use Html because of certain functions. But I've been having trouble getting which Listview Item/Element/Child is selected if any. This is what I have in my Html:
<div id="shapeListItem" data-win-control="WinJS.Binding.Template" style="display: none;">
<div style="width: 100px; height: 100px;">
<img src="#" style="width: 100px; height: 100px;" data-win-bind="src: picture" />
</div>
</div>
<div id="shapes" data-win-control="WinJS.UI.ListView" data-win-options="{itemDataSource : shapeTemplate.itemList.dataSource,
itemTemplate: select('#shapeListItem'),
tapBehavior: 'toggleSelect',
selectionMode: 'single'}">
</div>
And my Javascript:
WinJS.Utilities.ready(function () { init(); });
function init() {
var shapes = document.getElementById("shapes").winControl;
//shapes.selected ???
}
I don't remember what all I've tried but I never got it to work.
I just want to get which item is selected and get the image uri from it. Or I could add another title or something to my data bindings, which appears to be working fine by the way. Thanks for looking at what I've got, if you have any other suggestions or methods for anything else it would be appreciated. Or if I need to post more code I'll do that.
Thanks again,
Stephen
EDIT:
Ohh I've also tried adding a "onitemInvoke : 'handler'" but that came up with an error.
Documentation: http://msdn.microsoft.com/en-us/library/windows/apps/br211852.aspx
Try:
function init() {
var shapes = document.getElementById("shapes").winControl;
// gets an array of the indices:
var selectedIndices = shapes.selection.getIndices();
}
A trick I have for you is to do:
function init() {
var shapes = document.getElementById("shapes").winControl;
debugger;
// gets an array of the indices:
var selectedIndices = shapes.selection.getIndices();
}
Then add "shapes" to the watch window - You will be able to see the APIs.