Develop Reference

gauge.js -> Need modification on javascript to PercentageColors function

I found this amazing javascript gauge meter: http://bernii.github.io/gauge.js/
There's an option to make it looks like a gauge
new Gauge(target).setOptions(opts)
Or like a Donut (the one I need)
new Donut(target).setOptions(opts)
In the "gauge mode" there's an option percentColors that change the gauge color when it change its value. But this parameter doesn't work on "donut mode".
I tried to change the gauge.js but with no success... any javascript wizard could help me on this one?
The gauge.js file is in the link, and my code to "call it" is here:
var opts = {
angle: 0.46,
lineWidth: 0.1,
radiusScale: 1,
pointer: {
length: 0.6,
strokeWidth: 0.035,
color: '#000000'
},
limitMax: false,
limitMin: false,
percentColors: [[0.0, "#ff0000" ], [0.50, "#f9c802"], [1.0, "#a9d70b"]],
strokeColor: '#EEEEEE',
generateGradient: true,
highDpiSupport: true,
};
var target = document.getElementById('graph');
//var gauge = new Gauge(target).setOptions(opts);
var gauge = new Donut(target).setOptions(opts);
gauge.maxValue = 3000;
gauge.setMinValue(0);
gauge.animationSpeed = 32;
gauge.set(3000);
gauge.setTextField(document.getElementById('gauge-value'));
Thank you!

I found myself a simpler solution, instead of using the parentColor function on the Donut mode, I used some ifs/elses to limit the numbers and set the color in that specific location:
if (value<=20)
{
opts.colorStart='#291B00';
opts.colorStop='#FF0000';
}else if (value>20 && value <=60)
{
opts.colorStart='#290000';
opts.colorStop='#FF7E0D';
}
else if (value>60)
{
opts.colorStart='#002903';
opts.colorStop='#00FF00';
}

Zoom to Openlayers 3 function

I'm using this function from Openlayers 3 cookbook:
function zoomTo() {
map.beforeRender(
ol.animation.pan({
source: map.getView().getCenter(),
duration: 150
}),
ol.animation.zoom({
resolution: map.getView().getResolution(),
duration: 500,
easing: ol.easing.easeIn
})
);
map.getView().fit(Houses1860b.getSource().getExtent(), map.getSize());
}
This function works great but, the zoom is closer to the feature than I need and I would like to know if there is another way to do a zoom to the feature, but with one or two zoom levels less than this function does.
I assume it's possible to make another new variable called "extension" and add values to Houses1860b.getSource().getExtent() for doing the extension bigger than by default... I look for posts with this info but I didn't found none, Can you help me?

I will give an example by considering, 100px padding in all directions(top, right, bottom and left). Then I will have that feature in below way.
function zoomTo() {
map.beforeRender(
ol.animation.pan({
source: map.getView().getCenter(),
duration: 150
}),
ol.animation.zoom({
resolution: map.getView().getResolution(),
duration: 500,
easing: ol.easing.easeIn
})
);
map.getView().fit(Houses1860b.getSource().getExtent(), map.getSize(), {
padding : [100, 100, 100, 100]
});
}

Object doesn't support this property or method

Hi i am using quick note plugin.
In IE8 i am getting the error Object doesn't support this property or method, have no idea how to solve this, I am getting this error on below code
error here ->
$.fn.postitall.defaults = {
// Basic Settings
id : 0, //Id
created : Date.now(),
domain : window.location.origin, //Domain in the url
page : window.location.pathname, //Page in the url
backgroundcolor : '#FFFC7F', //Background color
textcolor : '#333333', //Text color
textshadow : true, //Shadow in the text
position : 'relative', //Position absolute or relative
posX : '5px', //top position
posY : '5px', //left position
height : 180, //height
width : 200, //width
minHeight : 152, //resizable min-width
minWidth : 131, //resizable min-height
description : '', //content
newPostit : false, //Create a new postit
autoheight : true, //Set autoheight feature on or off
draggable : true, //Set draggable feature on or off
resizable : true, //Set resizable feature on or off
removable : true, //Set removable feature on or off
changeoptions : true, //Set options feature on or off
savable : false, //Save postit in local storage
// Callbacks / Event Handlers
onChange: function () { return 'undefined'; },
onSelect: function () { return 'undefined'; },
onDblClick: function () { return 'undefined'; },
onRelease: function () { return 'undefined'; }
};

Date.now wasn't added to Javascript specification until ECMAScript 5 which means that it is not present on IE8 and lower. This is why you get the mentioned error. However, you can implement your own Date.now() method:
/** +new Date is short for (new Date).valueOf(); */
var Date.now = Date.now || function(){ return +new Date; };
So, if Date.now exists you will use existing browser's implementation, otherwise you define your own function.

Delay pie chart animation until in viewport

I am using this jquery plugin by LugoLabs called "Circles" in order to animate a few pie charts on a website I am building. (https://github.com/lugolabs/circles)
It works perfectly, but the pie chart animation starts on page load and I want to delay it until it is seen by the viewer.
Would it be possible to use something like viewportchecker.js (https://github.com/dirkgroenen/jQuery-viewport-checker) to only start the animation once someone is viewing it? I've used this before on other projects with success, but I'm having a hard time integrating it with the existing javascript.
----Example setup---
HTML:
<div class="circle" id="circles-1"></div>
SCRIPT:
var myCircle = Circles.create({
id: 'circles-1',
radius: 60,
value: 43,
maxValue: 100,
width: 10,
text: function(value){return value + '%';},
colors: ['#D3B6C6', '#4B253A'],
duration: 400,
wrpClass: 'circles-wrp',
textClass: 'circles-text'
styleWrapper: true,
styleText: true
});

As previously mentioned as comment: The circles github has an example for starting the circles animation when the circle is in view: https://github.com/lugolabs/circles/blob/master/spec/viewport.html.
I've added a Fiddle containing this example, and as there was the question how to adjust the circle from OP to work with this example I've adjusted this in another Fiddle. The only adjustment was to change the function createCircles as follows:
function createCircles() {
var myCircle = Circles.create({
id: 'circles-1',
radius: 60,
value: 43,
maxValue: 100,
width: 10,
text: function(value){return value + '%';},
colors: ['#D3B6C6', '#4B253A'],
duration: 400,
wrpClass: 'circles-wrp',
textClass: 'circles-text',
styleWrapper: true,
styleText: true
});
}

Can't you just calculate the scroll height like:
$(document).scroll(function(){
if($(window).scrollTop() + $(window).height() > $('#circles-1').offset().top + 810)
{
$(function() {
///your pies, 810px is your height
});
});
}
});
instead of loading a plugin...

jQuery Supersized AfterAnimation

I am trying to use the afterAnimation event on the SuperSized jQuery plugin (docs:http://buildinternet.com/project/supersized/docs.html#theme-after) but cannot get it to fire.
Code (sample):
$.supersized({
//Functionality
slideshow : 1,
autoplay : 1,
start_slide : 1,
stop_loop : 0,
random : 0,
slide_interval : 3000,
transition : 6,
transition_speed : 1200,
// .. removed for clarity
//Theme Options
progress_bar : 1,
mouse_scrub : 0,
// This is where i'm trying to call afterAnimation()
afterAnimation : function() {
console.log('blech');
}}
});
Any guidance would be greatly appreciated!

Turns out that I was pretty close.
After the initialization of supersized, you can do this:
theme.afterAnimation = function() {
console.log('animate');
};