We Keep Coding

Chartjs extended doughnut with text tooltip issue

I am trying to build an extended doughnut in chartjs. I want to display the highest value as percent and its label in the middle. It works fine on load but breaks after an hover event. One a tooltip is being displayed something breaks the first draw event and move the text on the left and i can't figure how to solve this. I made a fiddle to describe this issue :
http://fiddle.jshell.net/3be5zb0v/
Any ideas on how to fix this ?

Working fiddle - http://fiddle.jshell.net/3be5zb0v/1/
Just add this before your fillText
thechart.textAlign = 'start';

How to change the selection tip of custom cursor using css

In my website, I am using a color picker jquery plugin for picking colors from an image.I have change the cursor to an eyedropper icon using CSS. Right now,while clicking on the image,the color pointed by the upper part of cursor is picked.Since it is eyedrope cursor, i need to use its lower part to pick colors. Please help me out.
This is the cursoram that using :
Thanks

cursor:url(http://www.yourwebsite.com/yourcursorname.cur) 0 16,default;
Tell it where to set the x y coords in your css when declaring the cursor.

Plotting image icon on top of a static image

To better understand my question, please refer to the following image.
http://i.imgur.com/yL0nD4h.jpg
I have two images. The map image and the blue circle image. Please note that the map image is only an image and I am not using the Google Maps API to display it. As it will always be the same view. What I am trying to accomplish is trying to move the blue circle along the black line and I want it to be able to move the circle dynamically with a simple incremental int number
So if my int push = 5
The circle on the map will move up by a certain distance and int push = -5 will bring it back.
Currently I have a simple html background with the map image and have places the blue circle on top with a image tag as follows
<div style="background-image:url('http://i.imgur.com/ZZHnuaf.png'); width:517px;height:374px;">
<img width="30px" height="30px"src="http://i.imgur.com/MUlVIyg.png" />
</div>
http://jsfiddle.net/rayshinn/9VqQ7/
Any help on how I can get started would be greatly appreciated! Also thank you very much for taking your time to read this.

So the main idea is having a function f(v) which returns an object with a x and y coordinate. Then you position the marker image relatively inside the map and change the left and top style attributes to move it around.
Here's an example http://jsfiddle.net/9VqQ7/2/

I would like to reposition a circle created through Raphael js, and to use it as a letter in a title

I have created a vector graphic using Raphael JS - specifically a circle.
I would now like to use this circle as the letter "O" in a title. It is also a circle that will animate upon click. I would like to know if this is at all possible.
Here is a fiddle to explain better what I'm trying to say.
The html is very simple:
<h2>N<span id="canvas_cont"></span>OTRE APPROCHE :</h2>
Here is the jsfiddle
Basically the circle will act as the second letter in "Notre", and when clicked will move to the right of the screen. Other things will happen after, but this effect is what I'm trying to get....

Placing the Raphael canvas in a span is clever, but at the end of the day I suspect you'll regret mixing native HTML with Raphael in this way. Doing so would probably require a lot of absolute positioning and z-indexes that are better handled and supported in Raphael.
I recommend you simple draw the text in Raphael:
var text = r.set();
text.push(
r.text(10,20,"N"),
r.text(70,20,"TRE APPROCHE :")
);
text.attr({
'text-anchor': 'start',
'font-size':'36px'
});
If the SVG/VML styling is inadequate, you could also just use an image. Again, I would recommend placing that image on the canvas using Raphael (paper.image());
Note that, in the updated fiddle, I made the canvas a div the width of the logo.
Updated fiddle.

jQuery: Creating a circular slider

You may have seen JavaScript sliders before:
http://dev.jquery.com/view/tags/ui/1.5b2/demos/ui.slider.html
What I'm envisioning is a circular slider. It would consist of a draggable button at one point on the circle -- and that button can be dragged anywhere along the ring. The value depends on what position the button is at (think of a clock).

define a center point c
current mouse point at m
in your mouse drag event handler, you'd have
var dx = m.x-c.x;
var dy = m.y-c.y;
var scale = radius/Math.sqrt(dx*dx+dy*dy);
slider.x = dx*scale + c.x;
slider.y = dy*scale + c.y;
radius would be some preset value of the slider,

How about this: http://www.thewebmasterservice.com/dev-blog/curved-rounded-or-circular-sliders-javascript-jquery-ui
Some explanations and a demo.

I have written a jQuery plugin which supports full/half circle sliders.
Demo Page & Documentation

Check the jQuery roundSlider plugin from here http://roundsliderui.com/. This is what you want exactly.
This roundslider having the similar options like the jQuery ui slider. It support default, min-range and range slider type. Not only the round slider it also supports various circle shapes such as quarter, half and pie circle shapes.
For more details check the demos and documentation page.
Please check the demo from jsFiddle.
Related answers: https://stackoverflow.com/a/31367164/1845801 and https://stackoverflow.com/a/31369265/1845801
Screenshots: