rana.shanu Posted December 16, 2012 Share Posted December 16, 2012 (edited) I came across this site (builtbybuffalo.com/) and half way down there is a section that says few stars and there are 5 circles.I want to experiment similar kind of stuff. I am not a very hard core JS or JQ coder, but i can just play around with the code. So i downloaded http://anthonyterrien.com/knob/ I modified the code to generate something like this(test.eduvative.in/js/). (Not using the readOnly=true; but removing the JS code and using disabled in the input field.) How do i add the flow to the radius, similar to the one i mentioned in the starting (builtbybuffalo.com/), some glow on the radius when it starts to appear and a % sign just next to the values that are there. You may have a look at the code, i have put them on a server that i use to play around:the JS file is : test.eduvative.in/js/js/jquery.knob.js Index file has the index file link. I have saved it as .txt test.eduvative.in/js/index.txt Would be great to get some help on this. Edited December 16, 2012 by rana.shanu Link to comment Share on other sites More sharing options...
justsomeguy Posted December 17, 2012 Share Posted December 17, 2012 Are you saying you want to add the animation to that library you downloaded? Link to comment Share on other sites More sharing options...
rana.shanu Posted December 20, 2012 Author Share Posted December 20, 2012 In a way yes.I want the radius of the circles to flow like that are there on the site http://builtbybuffalo.com/ Link to comment Share on other sites More sharing options...
DarkxPunk Posted December 20, 2012 Share Posted December 20, 2012 If you want animation, from what I see you can simply just use a timer to increase the number by 1 at a certain speed till its at what you like. Seems to make sense to me... Unless I am missing something. Link to comment Share on other sites More sharing options...
rana.shanu Posted December 26, 2012 Author Share Posted December 26, 2012 If you want animation, from what I see you can simply just use a timer to increase the number by 1 at a certain speed till its at what you like. Seems to make sense to me... Unless I am missing something.i found this var canvas = document.getElementById('canvasid'), width = canvas.width, height = canvas.height, ctx = canvas.getContext('2d'); function drawTimer(deg) { var x = width / 2, // center x y = height / 2, // center y radius = 100, startAngle = 0, endAngle = deg * (Math.PI/180), counterClockwise = true; ctx.clearRect(0, 0, height, width); ctx.save(); ctx.fillStyle = '#fe6'; // Set circle orientation ctx.translate(x, y); ctx.rotate(-90 * Math.PI/180); ctx.beginPath(); ctx.arc(0, 0, radius, startAngle, endAngle, counterClockwise); ctx.lineTo(0, 0); ctx.fill(); } setInterval(function() { // Determine the amount of time elapsed; converted to degrees var deg = (elapsedTime / totalTime) * 360; drawTimer(deg); }, 1000); var v, up=0,down=0,i=0 ,$idir = $("div.idir") ,$ival = $("div.ival") ,incr = function() { i++; $idir.show().html("+").fadeOut(); $ival.html(i); } ,decr = function() { i--; $idir.show().html("-").fadeOut(); $ival.html(i); }; $("input.infinite").knob( { min : 0 , max : 20 , stopper : false , change : function () { if(v > this.cv){ if(up){ decr(); up=0; }else{up=1;down=0;} } else { if(v < this.cv){ if(down){ incr(); down=0; }else{down=1;up=0;} } } v = this.cv; } }); This code not exactly for what i want but this for a timer (sort of clock).But i am sure how do i combine this piece and the original code. I have also attached index file and link to JS is http://test.eduvative.in/js/js/jquery.knob.js index.html Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now