Develop Reference

Twojs blinking circle

I am working on a graph editor. I need to highlight a circle, and make that circle in the screen center and the set the zoom scale to 2. If the circle is already higlighted, to set it switch it and set as a normal circle. My need is a least to make the circle blink before to switch it off.
I dont see how to make the circle blink. could someone who knows about "two.js" how to do it. I know that it is in the function two.update();
// Render loop
var temps = 0;
two.bind('update', function(){
if (selectedNodes.length > 0){
if (temps > 0) {
temps -= 0.02;
for(var i = 0; i < selectedNodes.length; i++){
selectedNodes[i].circle.fill = 'yellow';
selectedNodes[i].circle.scale = 1.3;
selectedNodes[i].circle.stroke = "red";
selectedNodes[i].circle.linewidth = 2;
}
} else {
for(var i = 0; i < selectedNodes.length; i++){
selectedNodes[i].circle.fill = '#FF8000';
selectedNodes[i].circle.scale = 1;
selectedNodes[i].circle.noStroke();
}
}
}
});
and to trigger the blink
function Blink(){
temps = 1;
}
is it the best way to have this blink (even if it blinks only one time)
here is a JsFiddle
https://jsfiddle.net/hichem147/uf0b82ry/
To use it : Click on [(+) Node], then create some nodes, then click on [Select] and click on a circle, and click on [Blink] button.

Finally, I used setTimeout and setInterval
function MakeCircleBlink(){
var count = 5;
if (count > 0) {
var x = setInterval(function(){
count--;
console.log(count);
if (count ===0) {clearInterval(x);}
blink();
}, 1000);
}
}
function blink(n){
n--;
circle1.stroke = 'red';
circle1.linewidth = 4;
circle1.scale = 1.0;
setTimeout(function(){ circle1.noStroke(); circle1.scale = 1;}, 500);
}
and here is a codepen showing how it works : https://codepen.io/hichem147/pen/jvjKzP?editors=0010

Play Boostrap Popover on loop

DEMO: http://jsfiddle.net/0s730kxx/
I'm trying to open Bootstrap Popover to auto-open on loop but so far I've have manage only to auto-play once.
HTML:
<div class="container">
Hover Left |
Hover Right |
Click Me
</div>
JS:
$(document).ready(function(){
var time = 1000;
var len = $('.myclass').length;
var count = 0;
var fun = setInterval(function(){
count++;
if(count>len){
clearInterval(fun);
}
$('.p'+count).popover('show');
if(count>1){
var pre = count-1;
$('.p'+pre).popover('hide');
}
}, time);
});
Could anyone help? I want it on loop so it plays forever or atleast 10 or 20 times.

Modify javascript part of your fiddle like this:
$(document).ready(function(){
var time = 1000;
var len = $('.myclass').length;
var count = 0;
var fun = setInterval(function(){
count++;
if(count>len){
$('.p'+(count-1)).popover('hide');
count = 1;
//clearInterval(fun);
}
$('.p'+count).popover('show');
if(count>1){
var pre = count-1;
$('.p'+pre).popover('hide');
}
}, time);
});
Since you are not clearing the interval in this modified snippet, it will run forever as you expected.

Thats because you have added line
if(count>len){
clearInterval(fun);
}
After showing them 1 time count is 3 and clearInterval(fun) is called
which terminates further call to function fun().

Original comment: You can't clear the interval and expect the loop to continue! Instead of clearing set the count back to 0. But you'll also need to remember to hide the last popover.
var fun = setInterval(function(){
count++;
$('.p' + count).popover('show');
if(count > 1){
$('.p' + (count - 1)).popover('hide');
}
if(count > len){
count = 0;
}
}, time);
Here is a fiddle: http://jsfiddle.net/89gcqnfm/

Simplicity and modular arithmetic are your friends:
$(document).ready(function(){
var time = 1000;
var eles = $('.myclass');
var count = 0;
var fun = setInterval(function(){
if(eles.length < 1)
return (console.log("No elements found!")&&!1) || clearInterval(fun);
eles.eq(count%eles.length).popover('hide');
eles.eq(++count%eles.length).popover('show');
}, time);
});
https://jsfiddle.net/L2487dfy/

jQuery Slider Fade

I'm looking for a decent jQuery slider. I would like it so during the transition phase, the image fades away, hides, then fades in the next image. Like this: http://i47.tinypic.com/6gygko.gif
Right now I'm using Plus Slider but it doesn't exactly hide the image during the transition. Instead it loads the next image then, hides it while showing the second. See this: http://jsfiddle.net/EgkFq
Does anyone know of a decent slider that does what I asked above or at the very least help me with the fiddle to do what I'm suggesting? Also, the images will be dynamic and have transparent backgrounds.
Additionally I would like numeric pagination so the transition only works if you click on the number. I was told I would have to use jQuery to detect how many images, etc.
Other than than the scrollbar issue, it's solved. http://jsfiddle.net/h7Y3F

http://jsfiddle.net/EgkFq/5/
(function slider(){
var slides = $("#slider > img");
var currentIndex = 0;
var slideCount = slides.length;
var timePerSlide = 5000;
var fadeDuration = 1000;
var nextSlide = function(){
var nextIndex = currentIndex + 1;
if (nextIndex == slideCount)
nextIndex = 0;
$(slides[currentIndex ]).fadeOut(fadeDuration);
$(slides[nextIndex ]).fadeIn(fadeDuration);
currentIndex = nextIndex;
setTimeout(nextSlide, timePerSlide);
};
setTimeout(nextSlide, timePerSlide);
})();
Plugin shmugin.
Here is an example of how to center the image within the "slider" http://jsfiddle.net/EgkFq/9/
(function slider(){
var slides = $("#slider > img");
var currentIndex = -1;
var slideCount = slides.length;
var timePerSlide = 5000;
var fadeDuration = 1000;
var nextSlide = function(){
var nextIndex = currentIndex + 1;
if (nextIndex == slideCount)
nextIndex = 0;
var me = $(slides[currentIndex]);
var nxt = $(slides[nextIndex]);
var w = nxt.width();
var h = nxt.height();
me.fadeOut(fadeDuration);
nxt.fadeIn(fadeDuration);
nxt.css({
"left":"50%",
"margin-left":w/2 * -1,
"top":"50%",
"margin-top": h/2 * -1
});
currentIndex = nextIndex;
setTimeout(nextSlide, timePerSlide);
};
setTimeout(nextSlide, 0);
})();

There are a lot of sliders for you to choose from. Have a look at 70+ Awesome jQuery Slider Plugins. Most of them have fading effect.

Why is it looping through the 'else' in my if/else statement?

If you enable the alert(rand) at the bottom of my if/else statement, you will notice that when ran, it will constantly loop over the else section of my if/else statement. It's probably a simple fix, but I can't seem to figure it out. I had it working in the earlier stages of development but can't seem to figure it out now.
I'll post the code below, but it's probably easier to look at my jsfiddle, here: http://jsfiddle.net/zAPsY/7/ Thanks.
$(document).ready(function(){
//You can edit the following file paths to change images in selection
var img1 = '<img src="images/luke.jpg">';
var img2 = '<img src="images/luke.jpg">';
var img3 = '<img src="images/luke.jpg">';
var img4 = '<img src="images/luke.jpg">';
var img5 = '<img src="images/luke.jpg">';
var img6 = '<img src="images/luke.jpg">';
var all = img1 + img2 + img3 + img4 + img5 + img6;
//Rotation
var speed = 0.00;
var radius = 80;
var count = 0;
$("#run").bind("click",runButtonClick);
function rotate()
{
var centerx = $(document).width()/2;
var centery = $(document).height()/2;
var num_items = $("#container > img").length;
$("#container > img").each(function(){
var angle = count * (Math.PI/180);
var newx = centerx + Math.cos(angle)*radius - $(this).width()/2;
var newy = centery + Math.sin(angle)*radius - $(this).height()/2;
$(this).css("left",newx+"px").css("top",newy+"px");
count += 360/num_items + speed;
});
}
setInterval(rotate,100/1000);
//Append elements to container
$("#appendall").click(function(){$('#container').append(all);});
$('#append').children().eq(2).click(function(){$('#container').append(img1);});
$('#append').children().eq(3).click(function(){$('#container').append(img2);});
$('#append').children().eq(4).click(function(){$('#container').append(img3);});
$('#append').children().eq(5).click(function(){$('#container').append(img4);});
$('#append').children().eq(6).click(function(){$('#container').append(img5);});
$('#append').children().eq(7).click(function(){$('#container').append(img6);});
//Refresh page
$("#reset").click(function(){location.reload();});
//IF speed is greater than 0 - ELSE add animation to div element
function runButtonClick() {
var maxcount = 0.40;
var incdec = 0.01;
setInterval(function(){counter();}, 100);
counter()
speed;
function counter()
{
if (maxcount >= 0.00)
{
maxcount = maxcount - incdec;
speed = speed + incdec;
//alert(speed)
//alert(maxcount)
}
else if (maxcount <= 0.00)
{
speed = 0.00;
//Find amount of div elements and add 1
var brewees = $('#container').children().length +=1;
//get a random number
var rand = (Math.floor(Math.random()*brewees));
var ap = '20px';
var ab = '#ddd';
var ad = 1000;
//match random number corrosponding child in div
$('#container').children().eq(parseFloat(rand))
.animate({padding: ap, background : ab}, {duration:ad});
alert(rand);
}
}
}
});

You let your maxcount drop below zero but still your function is being called every 100ms (due to your setInterval).
So you should clear that interval eventually by doing:
/* first */
var intervalID = setInterval(function(){counter();}, 100);
/* later */
clearInterval(intervalID);

You're calling the function at a rate of 10 times per second (setInterval). Eventually, the maxcount variable will drop below 0, causing the else condition to execute.
You should store the interval call in a variable, and use clearInterval at else, so that the function runs only once after else:
//Store a reference to the interval
var interval = setInterval(function(){counter();}, 100);
...
function counter(){
...
else if(..){
...
clearInterval(interval); //Clear the previously defined interval
}
...
Another note: In the code, speed; has no use. Either prefix it by var (var speed;), or remove it.

How to add scroll background effect to multiple elements with different settings?

In this demo http://www.htmldrive.net/items/demo/527/Animated-background-image-with-jQuery
This code is for one background only. I want to add multiple background with different direction and speed.
var scrollSpeed = 70;
var step = 1;
var current = 0;
var imageWidth = 2247;
var headerWidth = 800;
var restartPosition = -(imageWidth - headerWidth);
function scrollBg(){
current -= step;
if (current == restartPosition){
current = 0;
}
$('#header').css("background-position",current+"px 0");
}
var init = setInterval("scrollBg()", scrollSpeed);
Currently it has settings for
$('#header').css("background-position",current+"px 0");
In a website I want to use this effect on #footer or #content background also. but with different speed and direction.
And is there any better and more optimized jquery method to achieve same effect?
And can we get same effect using CSS 3, without javascript?

Just saw the OP's answer, but decided to post anyway:
I've created a jQuery plugin to do this:
(function($) {
$.fn.scrollingBackground = function(options) {
// settings and defaults.
var settings = options || {};
var speed = settings.speed || 1;
var step = settings.step || 1;
var direction = settings.direction || 'rtl';
var animStep;
// build up a string to pass to animate:
if (direction === 'rtl') {
animStep = "-=" + step + "px";
}
else if (direction === 'ltr') {
animStep = '+=' + step + "px";
}
var element = this;
// perform the animation forever:
var animate = function() {
element.animate({
backgroundPosition: animStep + " 0px"
}, speed, animate);
};
animate();
};
})(jQuery);
Usage:
$("#header").scrollingBackground({
speed: 50,
step: 50,
direction: 'ltr'
});
This is pretty basic, and assumes that you're background-repeat is 'repeat-x' on the element you call it on. This way, there's no need to reset the background position every so often.
Working example: http://jsfiddle.net/andrewwhitaker/xmtpr/

I could work out the following solution. Am not sure if it is efficient. Will wait for anyone to comment or provide a better option.
Till then...:
var scrollSpeed = 70;
var step = 1;
var current = 0;
var images =
[
{
imageWidth:2247,
imagePath:"images/image1"
},
{
imageWidth:1200,
imagePath:"images/image2"
}
]
var headerWidth = 800;
var imageRotateCount = 0;
var imagesLength = images.length;
$('#header').css("background-image", images[0].imagePath);
function scrollBg(){
var curIndex = imageRotateCount%imagesLength;
var curImage = images[curIndex];
current -= step;
var restartPosition = -(curImage.imageWidth - headerWidth);
if (current == restartPosition){
current = 0;
imageRotateCount++;
curIndex = imageRotateCount%imagesLength;
curImage = images[curIndex];
$('#header').css("background-image", curImage.imagePath);
}
$('#header').css("background-position",current+"px 0");
}
var init = setInterval("scrollBg()", scrollSpeed);