I have a problem. I am trying to create an animation, changing the color of several layers with a timeout between painted.
$scope.StartMovementsAnimation = function()
{
angular.forEach($scope.GameMovements, function(movement){
if (movement == "Green")
{
$scope.Green = true;
}
else (movement == "Orange")
{
$scope.Orange = true;
}
});
}
The problem I have is that I do not know how to stop or delay the flow loop. I'm pretty lost. I tried with $ timeout, sleep etc but does not work.
Any solution?
thanks
Don't use forEach. Use $timeout to repeat as many as the number of items in your GameMovements array.
Take a look at the following example. It is going to change className field from orange to green and vice versa till the variable left's value reaches 0.
$scope.className = "orange";
$scope.count = 0;
$scope.startAnimation = function() {
var left = 10
var ticker = function() {
if (left % 2 === 0)
$scope.className = 'orange'
else
$scope.className = 'green'
left -= 1
if (left > 0) {
$timeout(ticker, 1000)
}
}
$timeout(ticker, 1000)
}
Related
I have a checkbox that adds +2 if the user checks it. I need it to only do this one time. Right now the user can constantly add plus 2 which is not what I need. I need it to add it only once. (factors.Delivery is the ng-model)
I also need it to remove the --2 and stop if the checkmark is removed, but right now, it keeps subtracting.
Any help would be appreciated
Even disabling the check after clicking would be good, but it wont disable after clicking only before.
$scope.factors.Delivery = 0;
$scope.increment = function() {
if ($scope.factors.Delivery >= 0) {
$scope.factors.Delivery+=2;
} else {
$scope.factors.Delivery-=2;
}
};
2 is greater than or equal to 0. It sounds like the only acceptable values are 2 and 0 based on your post. I would suggest:
$scope.factors.Delivery = 0;
$scope.increment = function() {
if ($scope.factors.Delivery == 0) {
$scope.factors.Delivery=2;
} else {
$scope.factors.Delivery=0;
}
};`
or using your code, you can disable the checkbox with something like this:
ng-disabled="clickedOnce" on the checkbox and the modifications below.
$scope.factors.Delivery = 0;
$scope.clickedOnce = false;
$scope.increment = function() {
$scope.clickedOnce = true;
if ($scope.factors.Delivery >= 0) {
$scope.factors.Delivery+=2;
} else {
$scope.factors.Delivery-=2;
}
};
i am new here and I am also a beginner in Swift!
I am trying to create an UIImageView to swipe left and right, when i get to the last image the app crash, the same crash happen if i am in the first image and try to swipe to the right!
What i wanna do is when my array of Images reaches the last image send me back to the First image in a loop, can anyone help me please?
Thank you in advance!!!
Here is my code;
func swiped(gesture: UIGestureRecognizer) {
CATransaction.begin()
CATransaction.setAnimationDuration(animationDuration)
CATransaction.setCompletionBlock {
let delay = dispatch_time(DISPATCH_TIME_NOW, Int64(self.switchingInterval * NSTimeInterval(NSEC_PER_SEC)))
dispatch_after(delay, dispatch_get_main_queue()) {
}
}
let transition = CATransition()
transition.type = kCATransitionFade
chracters.layer.addAnimation(transition, forKey: kCATransition)
CATransaction.commit()
if let swipeGesture = gesture as? UISwipeGestureRecognizer {
switch swipeGesture.direction {
case UISwipeGestureRecognizerDirection.Right :
print("User swiped right")
// decrease index
imageIndex -= 1
// check if index is in range
if swipePosition > imageList.count-1{
// Do Nothing
} else {
swipePosition += 1
}
chracters.image = UIImage(named: imageList[imageIndex])
case UISwipeGestureRecognizerDirection.Left:
print("User swiped Left")
// increase index first
imageIndex += 1
// check if index is in range
if swipePosition == 0 {
//Do Nothing
} else {
swipePosition -= 1
}
chracters.image = UIImage(named: imageList[imageIndex])
default:
break;
//stops the code
}
}
}
First your condition seems to be amiguous, you can use swipePosition itself instead of imageIndex. Secondly your chracters.image should inside the if/else block. Below is the updated snippet. If you want to use imageIndex you can change it accordingly. Also added the code to switch from last image to first image and first image to last.
if swipePosition > imageList.count-1{
swipePosition = 0
chracters.image = UIImage(named:imageList[swipePosition]
} else {
chracters.image = UIImage(named:imageList[swipePosition]
swipePosition += 1
}
case UISwipeGestureRecognizerDirection.Left:
print("User swiped Left")
// check if index is in range
if swipePosition == 0 {
swipePosition = imageList.count-1
chracters.image = UIImage(named:imageList[swipePosition]
} else {
chracters.image = UIImage(named:imageList[swipePosition]
swipePosition -= 1
}
I got a count down timer script.. I'm going to use it for a online examination.. But now the problem is it is resetting while refreshing the page...
Any idea to prevent the resetting the time and continue without any problem if they refresh the page too?
here is the code
<script>
var mins;
var secs;
function cd() {
mins = 1 * m("2"); // change minutes here
secs = 0 + s(":01"); // change seconds here (always add an additional second to your total)
redo();
}
function m(obj) {
for(var i = 0; i < obj.length; i++) {
if(obj.substring(i, i + 1) == ":")
break;
}
return(obj.substring(0, i));
}
function s(obj) {
for(var i = 0; i < obj.length; i++) {
if(obj.substring(i, i + 1) == ":")
break;
}
return(obj.substring(i + 1, obj.length));
}
function dis(mins,secs) {
var disp;
if(mins <= 9) {
disp = " 0";
} else {
disp = " ";
}
disp += mins + ":";
if(secs <= 9) {
disp += "0" + secs;
} else {
disp += secs;
}
return(disp);
}
function redo() {
secs--;
if(secs == -1) {
secs = 59;
mins--;
}
document.getElementById("disp").innerHTML=dis(mins,secs); // setup additional displays here.
if((mins == 0) && (secs == 0)) {
window.alert("Time is up. Press OK to continue."); // change timeout message as required
// window.location = "yourpage.htm" // redirects to specified page once timer ends and ok button is pressed
} else {
cd = setTimeout("redo()",1000);
}
}
function init() {
cd();
}
window.onload = init;
</script>
If the page is refreshed, all you javascript code is re-executed. This is normal behaviour.
If you absolutely need to continue where you left, you can use the local storage API (only available in modern browsers) to store the time (every second you update the value).
When the page is loaded, you can then check if the value exists in Local storage, and start from where you were.
Are you sure you need this behaviour BTW?
--- UPDATE ---
Here is another attempt... The issue seems to be that the animation only happens to the third item in the for loop array I'm assuming because of the setTimeout delay. How can I have the animation fire for each item (3) with a delay?
// Breadcrumb Animation
(function(){
var header = document.getElementById("header"),
header2 = document.getElementById("header-secondary"),
banner = document.getElementById("banner");
var bcLink = [header, header2, banner];
var myTime = '';
var myItem = '';
function delay() {
setTimeout(fadeIn, myTime);
function fadeIn() {
if( myItem.style.opacity !== '1' ) {
console.log(myItem);
setInterval(function(){
myItem.style.opacity = parseFloat(myItem.style.opacity) + 0.1;
}, 100);
}
}
}
var i, len=bcLink.length;
for(var i = 0; i < len; i++) {
bcLink[i].style.opacity = 0;
myItem = bcLink[i];
myTime = myTime = parseInt(myTime + 2000)
delay();
}
})();
--- END UPDATE ---
The code below works but I was trying to optimize my code by creating a foor loop that will loop through each of the items (my attempt is commented out). I'm currently using 3 items on my page (header, header2, banner) that will load one after the other, but the second should not start until the first loads, the third should not start until the second item loads, and so on. This code will eventually be used for breadcrumbs where the amount of items will be uncertain but they will still load one after the other. Any help is greatly appreciated.
(function(){
var header = document.getElementById("header"),
header2 = document.getElementById("header-secondary"),
banner = document.getElementById("banner");
var bcLink = [header, header2, banner];
var myTime = '';
function fadeIn(name, speed) {
if( name.style.opacity !== '1' ) {
setInterval(function(){
name.style.opacity = parseFloat(name.style.opacity) + 0.1;
}, speed);
}
}
function delay(funct, time) {
setTimeout(function() {funct}, time);
}
bcLink[0].style.opacity = 0;
bcLink[1].style.opacity = 0;
bcLink[2].style.opacity = 0;
setTimeout(function(){fadeIn(bcLink[0], 100)}, 0);
setTimeout(function(){fadeIn(bcLink[1], 100)}, 1000);
setTimeout(function(){fadeIn(bcLink[2], 100)}, 2000);
// for(var i = 0; i < bcLink.length; i++) {
// bcLink[i].style.opacity = 0;
// delay(fadeIn(bcLink[i],100), i + 000);
// }
})();
use jQuery animation queue, not timeout.
http://blog.bigbinary.com/2010/02/02/understanding-jquery-effects-queue.html
Try changing:
delay(fadeIn(bcLink[i],100), i + 000);
to:
setTimeout(function(){fadeIn(bcLink[i], 100)}, i * 1000);
Question Answer below
Hello I'm looking a simple way to change the colour of a progress bar, what I'm trying to do with it, would look like this:
function (progressBar, value) {
if (value < 40) {
progressBar.setColor('red');
} else if (value >= 40 && value <= 80) {
progressBar.setColor('yellow');
} else {
progressBar.setColor('green');
}
}
Then some kind of way to change the colour through the style with the method progressbar already have, setUI, or other kind of way that it could work would be great as well.
Thanks.
Solution
I found the way to do it, here it is, I create a custom progress bar, where I use the listener update, then this one is going to receive the actual value of the progress bar, and the bar itself, I take the obj and find the styles of the progress bar, where I modify backgroundColor and the borderRightColor with the hex color I want and set the backgroundImage to and empty URL then it will allow the backgroundcolor to show up.
Also I create the option to send a default color.
Here is the code:
Ext.define("progressBarCustom", {
extend: 'Ext.ProgressBar',
alias: 'widget.progressBarCustom',
max: null,
ave: null,
min: null,
color: null,
initComponent: function () {
var me = this;
me.width = 300;
me.margin = '5 5 0 5';
me.callParent(arguments);
},
listeners: {
update: function (obj, val) {
if (this.max != null && this.ave != null && this.min != null) {
if (val * 100 <= this.min) {
obj.getEl().child(".x-progress-bar", true).style.backgroundColor = "#FF0000";
obj.getEl().child(".x-progress-bar", true).style.borderRightColor = "#FF0000";
obj.getEl().child(".x-progress-bar", true).style.backgroundImage = "url('')";
} else if (val * 100 <= this.ave) {
obj.getEl().child(".x-progress-bar", true).style.backgroundColor = "#FFFF00";
obj.getEl().child(".x-progress-bar", true).style.borderRightColor = "#FFFF00";
obj.getEl().child(".x-progress-bar", true).style.backgroundImage = "url('')";
} else {
obj.getEl().child(".x-progress-bar", true).style.backgroundColor = "#009900";
obj.getEl().child(".x-progress-bar", true).style.borderRightColor = "#009900";
obj.getEl().child(".x-progress-bar", true).style.backgroundImage = "url('')";
}
} else if (this.color != null) {
obj.getEl().child(".x-progress-bar", true).style.backgroundColor = this.color;
obj.getEl().child(".x-progress-bar", true).style.borderRightColor = this.color;
obj.getEl().child(".x-progress-bar", true).style.backgroundImage = "url('')";
}
}
}
});
Then if you are going to create a new progressbar with the color changes here is the code:
Ext.create('progressBarCustom', {
min : 0.20,
ave : 0.60,
max : 0.80
});
or just with a default color:
Ext.create('progressBarCustom', {
color : "#4D0099"
});
Any suggestion would be received, thanks :).
I would suggest adding a listener that calls your function on the move event as this appears to contain the positions you need. Documentation link.
For the setColor aspect I believe you want to set the components style elements. Documentation link. Hope that helps.