Develop Reference

jQuery animated circular progress bar

I am using a jQuery script for an animated circular progress bar. Right now the progress bar works when the start button is clicked. I want this progress bar to start when the user scrolls to the div id "stats" automatically. How can this be done?
I have made a fiddle to show what I have so far:
https://jsfiddle.net/rpkcw236/9/
jQuery(document).ready(function($){
$('.pie_progress').asPieProgress({
namespace: 'pie_progress',
barsize: '2',
trackcolor: '#ececea',
barcolor: '#e6675f'
});
$('#button_start').on('click', function(){
$('.pie_progress').asPieProgress('start');
});
$('#button_finish').on('click', function(){
$('.pie_progress').asPieProgress('finish');
});
$('#button_go').on('click', function(){
$('.pie_progress').asPieProgress('go',50);
});
$('#button_go_percentage').on('click', function(){
$('.pie_progress').asPieProgress('go','50%');
});
$('#button_stop').on('click', function(){
$('.pie_progress').asPieProgress('stop');
});
$('#button_reset').on('click', function(){
$('.pie_progress').asPieProgress('reset');
});
});
Here is the link to the script I am using:
http://www.jqueryscript.net/loading/Animated-Circle-Progress-Bar-with-jQuery-SVG-asPieProgress.html

You need to break it up into 2 steps:
1) get the distance of the dynamic div from the top.
2) Once you get the top value pass this top value to the code in step2.
Step1: Get the dynamic div position from the top (e.g. #my-dynamic-div)
var $output = $('#output');
$(window).on('scroll', function () {
var scrollTop = $(window).scrollTop(),
elementOffset = $('#my-dynamic-div').offset().top,
distance = (elementOffset - scrollTop);
$output.prepend('<p>' + distance + '</p>');
});
OR
E.G: var distance = $("#MyDiv").offset().top
ref: http://jsfiddle.net/Rxs2m/
Step2: Pass the distance value here instead of the hard coded value 350.
flag=true;
$(window).scroll(function() {
st=$(window).scrollTop();
$('#topscroll').html(st)
if(st>350){
if(flag)
$('.pie_progress').asPieProgress('start');
flag=false;
}
});
Good luck & hope this helps.

Try using .scrollTop() , .offset().top Element.getBoundingClientRect() of #progress element, .off()
$(window).on("scroll", function() {
if ($("#progress")[0].getBoundingClientRect().top < 150) {
$('.pie_progress').asPieProgress('start')
$(this).off("scroll")
}
})
jsfiddle https://jsfiddle.net/rpkcw236/29/

Trying to make a drag to stretch element, why is it so jumpy?

I'm trying to create a dragbar so users can stretch the height or width of an element on my page (not interested in using HTML resize).
It seems like I'm pretty close, but I can't figure out why
1) the moveable bar is jumping all over the page
2) the adjustable div is flickering as the size changes (or sometimes disappearing completely).
You can see the demo at http://jsfiddle.net/dYUz7/
Here's the source
var elem = $('.layout');
var resizeBar = $('.resize-bar',elem),
adjustableWrapper = $('.layout-container-wrapper',elem),
posDir = 'Left',
pos = 'X';
if($(elem).hasClass('layout-updown')){
posDir = 'Top';
pos = 'Y';
}
var startPos = resizeBar[0]['offset'+posDir], i = resizeBar[0]['offset'+posDir];
resizeBar.on('mousedown', function(event) {
// Prevent default dragging of selected content
event.preventDefault();
console.log(event);
$(document).on('mousemove', mousemove);
$(document).on('mouseup', mouseup);
});
function mousemove(event) {
i = event['page'+pos] - startPos;
if(pos==='X') return changeSizeWidth(i,event.offsetX);
return changeSizeHeight(i,event.offsetY);
}
function changeSizeWidth(i,width){
resizeBar.css({left : i +'px'});
adjustableWrapper.css({'width': width +'px'});
console.log(adjustableWrapper.css('width'));
}
function changeSizeHeight(i,height){
resizeBar.css({top : i +'px'});
adjustableWrapper.css({'height': height +'px'});
console.log(adjustableWrapper.css('height'));
}
function mouseup() {
$(document).unbind('mousemove', mousemove);
$(document).unbind('mouseup', mouseup);
}
Please don't respond with suggestions for using libraries, I have jQuery in the sample, but I'm using angular in the project, and am trying to not add a bunch of other libraries at this point.

I ended up getting this working by changing the move from the move-bar element to the element which needs to grow or shrink.
The css is a bit messed up, but here's an updated jsfiddle of the result
http://jsfiddle.net/dYUz7/2/
function changeSizeWidth(left){
adjustableWrapper.css({'width': left +'px'});
}

jQueryUI - Detect if element is beeing dragged

I want to get the position of an element when it is beeing dragged.
My code so far:
$(document).ready(function(){
$("p").text($("div").position().left);
$("p").text($("div").position().top);
$("div").draggable();
})
This only gets the position when the page loads. I want to detect whenever the div is beeing dragged so I can write its position in the p tag.

$('#dragThis').draggable(
{
drag: function(){
var offset = $(this).offset();
var xPos = offset.left;
var yPos = offset.top;
$('#posX').text('x: ' + xPos);
$('#posY').text('y: ' + yPos);
}
});
JSFIDDLE

You should have a look at the events section of the jQuery official documentation:
http://jqueryui.com/draggable/#events
The drag event will be raised while being dragged and from there you can get the offset. For example:
$(this).offset().left;
$(this).offset().top;

in gamequery I am trying to move a selected object with mousetracker by clicking on the object, and dragging it

I know I can use mousedown selection for it, but I am wanting the clicked on sprite to follow my mouse, there is a mousetracker function of sorts mentioned in the api; but unfortunately there are no examples of this other than stating that it allows mouse detection.
//add mousedown events for yarnballs.
$(".gQ_sprite").mousedown(function() {
clickedDivId = $(this).attr('id');
if(clickedDivId.charAt(8) == "-")
{
currentClickedDivId = clickedDivId
$(document).mousemove(function(e){
spriteXPosition = e.pageX
spriteYPosition = e.pageY
});
}
});
I have the location of the mouse selected, just not sure how to get the selected sprite to follow it.
any help would be greatly appreciated.

What Mati said is correct: $.gQ.mouseTracker allows you to access the mouse's state outside of an event handler. The example he gives is correct but it can't be used to move a gQ object (sprite, tile-map or group) around because you'r not allowed to use the .css() function for those. Doing so will break collision detection.
If what you want is to move a gQ object you should do this instead :
$('#' + currentClickedDivId).xy($.gQ.mouseTracker.x, $.gQ.mouseTracker.y);
But since this should be done in a periodical callback, the smoothness of the dragging will depend on the refresh rate.
If you want to use event handlers instead you could modify you code to look like this (without using the mouseTracker):
var clickedDiv;
var clickedDivOffset = {x:0, y:0};
$(".gQ_sprite").mousedown(function(e) {
clickedDiv = $(this);
clickedDivOffset = {
x: e.pageX - clickedDiv.x() - $().playground().offset().left,
y: e.pageY - clickedDiv.y() - $().playground().offset().top
};
});
$(".gQ_sprite").mouseup(function() {
clickedDiv = false;
});
$().playground().mousemove(function(e) {
if(clickedDiv){
clickedDiv.xy(
e.pageX - clickedDivOffset.x,
e.pageY - clickedDivOffset.y,
);
}
});
This will implement a drag-n-drop effect. If you want the clicked element to stick to the mouse you will have to slightly adapt the code but the basics will remain the same.

According to the documentation:
If the mouse tracker is enabled you can check the state of the mouse at anytime by looking into the object $.gQ.mouseTracker where x and y contain the position of the mouse and 1, 2 and 3 a boolean value where true means that the first, second or thrid button is pressed.
Observe the output of:
$("#playground").playground({ refreshRate: 60, mouseTracker: true });
$.playground().startGame();
$.playground().registerCallback(function(){
console.log( $.gQ.mouseTracker );
}, 1000);
To make those divs actually follow the cursor, you have to use .css()
$('#' + currentClickedDivId).css({
top: $.gQ.mouseTracker.y + 'px',
left: $.gQ.mouseTracker.x + 'px'
});

jQuery drag and drop with sortable

I am having an issue trying to get an array out of JS using the sortable on some drag and drop elements.
A working demo can be found at:
Example
What I need to achieve:
Drag item on image, get x,y (done)
after all items have been placed, use jQuery sortable? to get array of id's with x,y coordinates.
array(23456->{xpos:234,ypos:234},23456->{xpos:234,ypos:234},....etc
I am not sure how to bind the sortable to the items only dropped on the image, and then get those values into an array
Here is the code so far:
jQuery(function($){
$('.dragThis').bind('click', function(){
$(this).css("border","3px solid #fff");
$(this).draggable({
containment: $('body'),
drag: function(){
$('#dropHere').droppable({
accept: '.dragThis',
over : function(){
$(this).animate({'border-width' : '3px', 'border-color' : '#0f0'}, 500);
}
});
},
stop: function(){
var position = $(this).position();
var parentPos = $('#dropHere').offset();
var xPos = position.left - parentPos.left;
var yPos = position.top - parentPos.top;
var finalOffset = $(this).position();
var finalxPos = xPos;
var finalyPos = yPos;
$('#finalX').text('Final X: ' + finalxPos);
$('#finalY').text('Final Y: ' + finalyPos);
//$('.dragThis').sortable();
console.log (finalxPos,finalyPos,$(this).attr("id"));
},
revert: 'invalid'
//connectToSortable: '#dropHere'
});
});
});
Any help getting pointed in the right direction, is greatly appreciated.
Just to clarify, I will be writing the values via AJAX to a DB for recall later.
Thanks in advance

Simple solution:
Add a class for those elements on their own 'drop' event, then get all of those have classes with a selector.
After that, a handy $.fn.each() and $.fn.offset() will help.
You can then work on those coordinates with top, left instead of your mentioned xpos, ypos.
Here is an example:
var coordinates = {};
$(".dropped").each(function(item) {
coordinates[$(item).attr("id")] = $(item).offset();
});