Develop Reference

Codemirror, how to add add-ons

I am trying to add the scroll past end add-on for codemirror but I cannot add it to my codemirror instance.
I tried calling it like this scrollPastEnd: true in the options but that didn't work. I also tried using the defineOption function but the console says it is undefined.
Thanks for the help

First, you have to add the scrollpastend.js file (https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/addon/scroll/scrollpastend.min.js) to your HTML document and not to the editor.
As the following code from scrollpastend.js file says, the scrollPastEnd option is off by default:
CodeMirror.defineOption("scrollPastEnd", false, function(cm, val, old) {..});
Then It only remains to activate your add-on by setting new option like this:
editor.setOption("scrollPastEnd", true);
or adding scrollPastEnd option to the object option list:
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
mode: "html",
lineNumbers: true,
scrollPastEnd: true
});
Hoping to help you, I wish you a good day.

How to make a slider autoscroll using jquery

http://405pixels.gowerpowered.com
I have the slider, and I have been trying to figure out how to make the homepage autoslide?
I tried using firebug to locate the files... Located some .js files that contain some information about the homepage slider... but all the changes and everything I make seem to not be working...
This is a free template I found called BigFoot. I am really interested into learning about how this javascript would work that is why I downloaded in the first place... to learn from the template... If you could point me in the right direction that would be awesome.
Thanks,
Alex

You'll need to replace the actual photo swapping code with whatever you use but the rest will swap out each picture every 5 seconds.
$(document).ready(function() {
var next = $('#right-button');
next.click(function() {
$('#current-picture').fadeOut('fast');
$('#next-picture').fadeIn('fast');
...whatever code you use for this.
});
var scroll = setInterval(function() {
next.trigger("click");
if(picture is last) {
clearInterval(scroll);
}
}, 5000);
});

you are using flex slider so you can use the code below.
jQuery(window).load(function() {
jQuery('.flexslider').flexslider( {
pauseOnHover: true,
slideshow: false,
controlsContainer: ".flex-container"
} );
} );
actually this it the param you need to pass to make slider autostart
slideshow: false,
Let me know if you run into any other issues.

Is there a way to set Highchart options dynamically?

Is it possible to toggle chart dataLabels (enabled/disabled) on click (without redrawing the chart) much like the following:
('.inner-container').click(function() {
chart.setTitle({text: "New Title"});
});
I have tried the method below but it does not work.
('.inner-container').click(function() {
chart.setOptions({dataLabels: {enabled: true}});
});
I can't seem to find any details on how to set chart options dynamically in the documentation. If anyone could point me in the right direction then that would be greatly appreciated.

I managed to figure it out, by using the series.update() method.
chart.series[0].update({
dataLabels: {
enabled: true
}
});
Thanks for your help.

Additional solution, based on datalabels elements:
http://jsfiddle.net/eNMvw/37/
chart.series[0].hideDataLabels = false;
// Add toggler action
$('#toggler').click(function() {
chart.series[0].hideDataLabels = !chart.series[0].hideDataLabels;
chart.series[0].hide();
chart.series[0].show();
});

remove jqueryui from dependencies

In my current project I'm using simple preloader for my report:
function hideLoading() {
var selectedEffect = "scale";
var options = { percent: 0 };
$("div#loading").hide(selectedEffect, options, 1000, function () {
$("div#fullsize").show();
});
}
$(window).load(function () {
setTimeout(hideLoading, 1000);
});
This gives me nice hiding effect, but because of this I must add jQueryUI.
Normally it's OK, but in this project I'm not using anything from jQueryUI.
I would like to remove it and have nice looking hide effect.
I was trying to use jquery.easing (http://gsgd.co.uk/sandbox/jquery/easing/) but without any luck.
This is sample to work with: http://jsbin.com/ukicac/1/

Not sure why you'd want to use JQueryUI for this. This can be done with JQuery easily.
Check the code here - http://jsbin.com/ukicac/8/
You can use this link for reference -http://api.jquery.com/category/effects/fading/
Hope this helps. Cheers !

jqplot meter gauge issue: c.jqplot is undefined?

anyone experienced this? I am new to this so I am not sure exactly what is going on here. But I am trying to use jqplot's meter gauge per documentation and it doesn't seem to be working. I can create bar, line, etc graphs just fine.
include the necessary script link (as well as the others needed):
<script type="text/javascript" src="../plugins/jqplot.meterGaugeRenderer.min.js"></script>
markup
<div id='chart6'></div>
js
$(document).ready(function () {
plot6 = $.jqplot('chart6', [[18]], {
title: 'Network Speed',
seriesDefaults: {
renderer: $.jqplot.MeterGaugeRenderer,
rendererOptions: {
label: 'MB/s'
}
}
});
});
firebug says:
TypeError: c.jqplot is undefined - inside the meterGaugeRender js file.
any help would be greatly appreciate as always.

It looks like you did not include the basic jqPlot library, just the meter gauge add on.