We Keep Coding

Looping Graph Animation

I saw this codepen: https://codepen.io/alex_rodrigues/pen/ogYZdr You can see the javascipt code here:
setTimeout(function start (){
$('.bar').each(function(i){
var $bar = $(this);
$(this).append('<span class="count"></span>')
setTimeout(function(){
$bar.css('width', $bar.attr('data-percent'));
}, i*100);
});
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).parent('.bar').attr('data-percent')
}, {
duration: 2000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now) +'%');
}
});
});
}, 500)
I want the graph to complete the animation, stall for 3-5 seconds then repeat the animation. Currently, it completes the animation, but there is no loop. Any help is much appreciated. Thank you!

You can create a function that:
Resets the bar's width and content
Restarts the animation.
This function can be set to be called after:
($('.bar').length - 1) * 100 + 2000 + your_chosen_delay_in_ms
For this to work, we have to pull out all the things that don't need repeating, like $(this).append('<span class="count"></span>').
Combined, it would look like this:
var animation_offset = 100;
var animation_duration = 2000;
var reanimate_delay = 3000;
function animateBars() {
$('.bar').each(function(i){
var $bar = $(this);
setTimeout(function(){
$bar.css('width', $bar.attr('data-percent'));
}, i*animation_offset);
});
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).parent('.bar').attr('data-percent')
}, {
duration: animation_duration,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now) +'%');
}
});
});
setTimeout(
reAnimateBars,
(
($('.bar').length - 1) * animation_offset // Moment the last bar starts animating
+ animation_duration // Animation duration
+ reanimate_delay // Your chosen delay
)
);
}
function reAnimateBars() {
// Reset the bars
$('.bar .count').text('');
$('.bar').css('width', '0%');
// This will take some time (as per CSS transition property) to reset.
// So we have to wait for that too.
// Start the animation (again)
// after CSS transition time for resetting is over
setTimeout(animateBars, animation_duration);
}
setTimeout(function() {
// Put non-repeating things here:
$('.bar').append('<span class="count"></span>');
// Start animation (first time)
animateBars();
}, 500);

Trigger jQuery function only when in viewport?

I have this simple jQuery Counter on my website. The only issue I face, that the counter starts or even has finished before you get to the section where the html code is embedded.
Any help is much appreciated!
<script>
var isInViewport = function(elem) {
var distance = elem.getBoundingClientRect();
return (distance.top >= 0 && distance.left >= 0 && distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) && distance.right <= (window.innerWidth || document.documentElement.clientWidth));
}
// then in your code ..
if(isInViewPort) {
$.fn.jQuerySimpleCounter = function( options ) {
var settings = $.extend({
start: 0,
end: 100,
easing: 'swing',
duration: 400,
complete: ''
}, options );
var thisElement = $(this);
$({count: settings.start}).animate({count: settings.end}, {
duration: settings.duration,
easing: settings.easing,
step: function() {
var mathCount = Math.ceil(this.count);
thisElement.text(mathCount);
},
complete: settings.complete
});
};
$('#number1').jQuerySimpleCounter({end: 52,duration: 5000});
$('#number2').jQuerySimpleCounter({end: 35,duration: 3000});
$('#number3').jQuerySimpleCounter({end: 998,duration: 6000});
}</script>

There are multiple ways of doing this
Vanilla JS: https://gomakethings.com/how-to-test-if-an-element-is-in-the-viewport-with-vanilla-javascript/
jQuery plugin: https://github.com/zeusdeux/isInViewport
Updated Vanilla version as pseudoCode for directional purposes - Can be optimized tremendously.
var isInViewport = function(elem) {
var distance = elem.getBoundingClientRect();
return (distance.top >= 0 && distance.left >= 0 && distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) && distance.right <= (window.innerWidth || document.documentElement.clientWidth));
}
$.fn.jQuerySimpleCounter = function( options ) {
var settings = $.extend({
start: 0,
end: 100,
easing: 'swing',
duration: 400,
complete: ''
}, options );
var thisElement = $(this);
$({count: settings.start}).animate({count: settings.end}, {
duration: settings.duration,
easing: settings.easing,
step: function() {
var mathCount = Math.ceil(this.count);
thisElement.text(mathCount);
},
complete: settings.complete
});
}
function startCounters() {
if(isInViewport($('#number1').get(0))) $('#number1').jQuerySimpleCounter({end: 52,duration: 5000});
if(isInViewport($('#number2').get(0))) $('#number2').jQuerySimpleCounter({end: 52,duration: 5000});
if(isInViewport($('#number3').get(0))) $('#number3').jQuerySimpleCounter({end: 52,duration: 5000});
}
$(document).ready(function(){
startCounters()
})
$(window).on("scroll",function(){
startCounters()
})
You can improve it with the following updates
1.Instead of the selectors #number1, #number2 etc. just use a class so your code is cleaner, imagine a future of #number99.
2. Should the counter stall at where it was last left or reset?

stop a function on jquery

I have a problem with a jquery function.
When I launch my page, my progress bars come alive as expected, but they come alive without ever stopping ... I would like the code to run once.
here is the code and the function.
Thank you very much for your help.
here is the code
function loadBar() {
var delay = 500;
$(".progress-bar").each(function(i) {
$(this).delay(delay * i).animate({
width: $(this).attr('aria-valuenow') + '%'
}, delay);
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: delay,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now) + '%');
}
});
});
}
$(document).ready(function() {
// au clic sur un lien
$('#webLangages').on('click', function() {
loadBar();
});
});
var target = $("#third").offset().top;
var interval = setInterval(function(event) {
if ($(window).scrollTop() > target) {
//start loading progress bar
loadBar();
loadBar.stopNow();
}
}, 1000);

Jquery dialog sliding

http://jsfiddle.net/G5RP3/
I have made a div be a dialog through jQuery UI. It is empty at the moment, but what I want to do is make it slide from left to center, from outside the window. What it does instead, is it slides like a drawer is opened. I think I am close, but not sure how to do it.
JS
var speed = 2000;
$(document).ready(function () {
$('#loginmenu').dialog({
show: {
effect: 'slide',
direction: 'left',
speed: speed
},
hide: {
effect: 'slide',
direction: 'left',
speed: speed
},
modal: true
});
});
HTML
<div id="loginmenu"></div>
CSS
#loginmenu {
}

Here's a simple solution:
http://jsfiddle.net/MsS9z/1/
var speed = 2000;
$(document).ready(function () {
$('#loginmenu')
.on("dialogopen", function() {
var widget = $(this).dialog("widget");
var offset = widget.offset();
widget
.css("left", -widget.outerWidth() + "px")
.animate({ left: offset.left }, { duration: speed });
})
.dialog({
modal: true
});
});
When the dialog opens, this code will shift it outside of the screen, then animate the dialog back into place.
If you want to slide the dialog to the right on close, things get a bit more complicated:
http://jsfiddle.net/MsS9z/2/
var speed = 2000;
$(document).ready(function () {
$('#loginmenu')
.on("dialogopen", function() {
var widget = $(this).dialog("widget");
var offset = widget.offset();
widget
.css("left", -widget.outerWidth() + "px")
.animate({ left: offset.left }, { duration: speed });
})
.on("dialogbeforeclose", function() {
var dialog = $(this);
var widget = dialog.dialog("widget");
if (widget.data("dialog-closing") || widget.is(":animated")) {
widget.data("dialog-closing", false);
return true;
}
widget.data("dialog-closing", true);
var origOverflow = $("html").css("overflow-x");
$("html").css("overflow-x", "hidden");
widget.animate({ left: $(window).width() }, {
duration: speed,
complete: function() {
dialog.dialog("close");
$("html").css("overflow-x", origOverflow);
}
})
return false;
})
.dialog({
modal: true
});
});
Here we have to cancel the original dialog close, then trigger the animation, then allow the dialog to close normally. We also have to set the document's overflow-x to hidden so that the horizontal scrollbar doesn't appear.

Jquery Draggable Element Intersect

I wanna make if Dragged element intersect any draggable elements dragged items revert old position. Any Idea About it?
$( "#MainContents div[name=draggable]" ).each(function() {
$( this ).draggable({containment: 'parent',
scrollSpeed: 1000,
cursor: "crosshair",
scroll:true,
disabled: DragDropState,
stop: function(event, ui) {
var Stoppos = $(this).position();
var parentPosition=$(this).parent().position();
var CalculatedTop=Stoppos.top-parentPosition.top;
var CalculatedLeft=Stoppos.left-parentPosition.left;
}
});
});

you'll need to record where it came from on dragging start and then check for an overlay on dragging stop. check out this jsfiddle example
in a nutshell, extend your draggable options array to include start, record the top/left position in a data object, then on stop, check other draggable items in the DOM and call a revert function if anything matches.
ex:
$( this ).draggable({
start: function() {
var div = $(this);
div.data('top', div.css('top'));
div.data('left', div.css('left'));
},
containment: 'parent',
scrollSpeed: 1000,
cursor: "crosshair",
scroll:true,
disabled: DragDropState,
stop: function(event, ui) {
var draggables = $('.ui-draggable');
var div = $(this);
var goHome = function () {
div.css('left', div.data('left'));
div.css('top', div.data('top'));
};
draggables.not(div).each(function () {
var curr = $(this);
var currPos = curr.position();
var divPos = div.position();
if (divPos.left >= currPos.left && divPos.left <= (currPos.left + curr.width())) {
if (divPos.top >= currPos.top && divPos.top <= (currPos.top + curr.height())) {
goHome();
}
}
});
};
});
i'm pretty sure something like this is what you're looking to do. btw, from here you can animate the revert function so it gracefully goes back where it was last at.