Develop Reference

Trying to randomize a news ticker interval in jQuery

I have a jQuery-based scrolling news ticker that uses a set interval in milliseconds to control the delay between the reveal of each new section of text. I'd like to randomize the delay so that it more closely mimics the way a realtime news feed would look.
I've tried experimenting with some Math.random javascript where the newsTickerInterval parameter is, but JS is not my native language and I'm having trouble making it work.
Here's the jQuery function my scroller uses to config the display:
$(function () {
$(".demo2").bootstrapNews({
newsPerPage: 4,
autoplay: true,
pauseOnHover: true,
navigation: false,
direction: 'down',
newsTickerInterval: 3000,
onToDo: function () {
//console.log(this);
}
});
});
Any hints or suggestions would be greatly appreciated!

Instead of using newsTickerInterval, make a function getNewsTickerDelay that generates a random delay interval and call it using a setTimeout whenever needed.
$(function () {
$(".demo2").bootstrapNews({
newsPerPage: 4,
autoplay: true,
pauseOnHover: true,
navigation: false,
direction: 'down',
getNewsTickerDelay: function() {
var minimumInterval = 2000;
var maximumInterval = 5000;
var additionalInterval = Math.floor(
Math.random() * (maximumInterval - minimumInterval)
);
return minimumInterval + additionalInterval;
},
onToDo: function () {
//console.log(this);
}
});
});
So, every time your timeout is called, set another one with a random delay using getNewsTickerDelay
--EDIT--
As pointed out by #Barmar, you might need to tweak the implementation of the plugin in your case and implement its internal animate method to use your defined random interval instead of a fixed value. You'll just need to replace the self.options.newsTickerInterval in that plugin's JS to self.options.getNewsTickerDelay(). That is if you are willing to mutate the plugin's implementation.

How do I create a delay in js akin to sleep()

I need to create a delay in js. I could use setTimeout but then the code continues to execute. During the delay, I want the script to do nothing. Is there any way to do this??
To be more clear:
Eg. If I am doing two animations.
1)first animation.
2)delay(nothing is done for a second)
3)second animation.
EDIT:
First Animation:
function animateScreen() {
var audio = new Audio("http://www.sounds.beachware.com/2illionzayp3may/illwavul/CLNKBEEP.mp3");
$("body").toggleClass("wrongSeries");
audio.play();
}
function wrongChoice() {
animateScreen();
setTimeout(animateScreen, 100);
}
2) delay
3) Second Animation:
animateYellow(true);
setTimeout(function() {
animateYellow(false);
}, 500);
function animateYellow(lightup) {
if (lightup) {
var audio = new Audio("https://s3.amazonaws.com/freecodecamp/simonSound4.mp3");
audio.play();
}
$("#4").toggleClass("animateYellow");
}
This is the code I am currently using. The second animation exists for four different colors.

edit jquery-knob counter to display fraction of second

I create time counter using Knob:
$(function($) {
$(".knob").knob({
'fgColor': '#b9e672',
'thickness': 0.3,
'width':150,
'data-min': 0,
'data-max': 30,
'readOnly': true
});
var initval = 30;
$({value: 0}).animate({value: initval},{
duration: 10000,
easing:'swing',
step: function()
{
$('.knob').val(this.value).trigger('change');
}
});
});
I want to display counter in milliseconds, like picture:
how to do this?
thanks,

You can use the step option to chose the step that you would update in your knob value.
There is also another useful thing you can do, that is set the draw function. The draw function determines what gets drawn in the label. By default, it matches the value, but you don't have to.
For instance, if you want to update the knob in milliseconds, but want to round the value to display only the full seconds in the label, you could do something like:
draw: function () { $(this.i).val(Math.round(this.cv)); }
where, accordingly to the comments on the jQuery-knob source, this.cv is the "change value ; not commited value", and this.i the "mixed HTMLInputElement or array of HTMLInputElement"

Animate color change of shape for certain number of frames EaselJs

I am using EaselJS and want to create a flashing color rectangle that will flash a certain number of times when a button is pressed, displaying random colors from an array. It should stop after 10 color flashes and then I want to extract the final color.
So far the relevant code I have is:
var colorArray = ["#FE7B62","#CB2DD3","#F1FD66","#004CE8","#FFD068", "#02A97E"];
square = new createjs.Shape();
square.graphics.beginFill("#000").drawRoundRect(850, 50, 100, 100, 20);
function pushButton(event) {
square.graphics.inject(animateColor);
}
function animateColor(event) {
this.fillStyle = colorArray[parseInt(Math.random()*6)];
}
This code successfully triggers the flashing of colors from my color array, but I am not sure what the best method of running the animation for a limited number of frames is. I tried pausing the ticker and restarting it on the onclick of the button but that failed. I also tried using a for loop in the pushButton function but that caused a "too much recursion error" in the browser. Here is my full file link https://github.com/RMehta95/sherman-land/blob/master/main.js.

I would suggest creating an event to trigger your action (xamountOfFrames). Here is a link to some information that might help
http://www.w3schools.com/tags/ref_eventattributes.asp

I ended up not using the inject function and instead redrawing the shape each time, creating a couple counter and timer variables to ensure that it looped through the proper amount of times.
function pushButton() {
if (timer === false) {
animate = setInterval(animateColor, 200);
timer = true;
}
}
function animateColor() {
square.graphics.clear();
displayColor = colorArray[Math.floor(Math.random()*colorArray.length)];
square.graphics.beginFill(displayColor).drawRoundRect(850, 50, 100, 100, 20);
counter++;
if (counter===15) {
clearInterval(animate);
counter=0;
movePlayer(displayColor);
timer = false;
return;
}
}

Successive Animations with Tweenlite/Tweenmax triggered on scroll

I am using tweenlite/tweenmax to do animations in an html file. I want to trigger animations based on scroll position (like www.onlycoin.com). However, I cannot figure out how to do a second animation on one imagine after I do the first one (in my example, I am trying to move an image left and then move it back right). Any idea how to do this? Here is what I have:
var controller = $.superscrollorama(),
handleComplete = function(elem) {
console.log('complete', elem);
$('#'+elem).css('rotation', 0);
};
var likeAnimations = new TimelineLite();
var likeReverse = new TimelineLite();
controller.addTween($('#one'),
likeAnimations.append([
TweenMax.to($('#likeSong'), 1, {css:{left:"45px"},
onComplete:
TweenMax.to($('#likeSong'), 1, {css:{left:"0px"}})
])
})
]),
300,
400);
Any help would be awesome.

The special property onComplete accepts a function.. from the TweenMax Docs
onComplete : Function - A function that should be called when the tween has completed
so you would have to either make an anonymous function like this:
TweenMax.to($('#likeSong'), 1, {css:{left:"45px"},
onComplete: function(){
TweenMax.to($('#likeSong'), 1, {css:{left:"0px"}});
}
});
or you will have to put your tween inside a function, and have your first tween's onComplete callback reference a function.
myFunction() {
TweenMax.to($('#likeSong'), 1, {css:{left:"0px"}});
}
TweenMax.to($('#likeSong'), 1, {css:{left:"45px"},
onComplete: myFunction
});
You are basically adding the tween for the onComplete callback, instead of the expected function.
Checkout the GreenSock TweenMax Docs