All posts by martsblog

chart.js wordpress plugin

There are six charts in total – documentation here.

It’s a little frustrating that not all of the charts support labels. Particularly the doughnut chart. Which looks pretty cool. Reading up on stackflow, the general consensus is that you’re supposed to add this yourself in the canvas using javascript. I guess it’s free, so you can’t ask for the world.

The bbc football pages use highcharts – which look good but are expensive for commercial use.

Another option is to use SVG – this way you can make the charts interactive as they’re DOM elements, which you can’t do with chart.js. 

Doughnut

Polar

Radar

Pie chart

Bar chart

Line chart

jQuery clip effect

Code added to the jQueryUI plugin:
    $( document ).click(function() {
    $( "#toggleclip" ).toggle( "clip", {direction: "vertical"}, 1000 );
    $( "#togglecliphorizontal" ).toggle( "clip", {direction: "horizontal"}, 1000 );

Click anywhere to toggle the clip effect of these boxes.


jQuery ui tool tip

Add this code to the jQuery ui wdiget:
    $( ".tooltip" ).tooltip();

Then simply tag any elements with the tooltip class and add a title to these elements. The title is what is displayed.

Tooltips can be attached to any element. When you hover the element with your mouse, the title attribute is displayed in a little box next to the element, just like a native tooltip.

Tooltips are also useful for form elements, to show some additional information in the context of each field.

Hover the field to see the tooltip.

jquery ui draggable and sortable

Add the following jquery code to the Jquery ui plugin.


jQuery(document).ready(function($) {
 $( ".sortable" ).sortable({
      revert: true
    });
    $( ".draggable" ).draggable({
      connectToSortable: ".sortable",
      helper: "clone",
      revert: "invalid"
    });
    $( "ul, li" ).disableSelection();
});

Then use an unordered list with the same classes to call the jquery.

  • Drag me down
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5

jquery ui widgets plugin to display tabs

Using the Jquery ui plugin to display tabs. I downloaded the plugin. Then in the plugin settings I added the code…
jQuery(document).ready(function($) {
  $( ".tabs" ).tabs();
  // Add other jQuery code here...
});

Making sure the tabs selector was selecting classes not ids. For some reason it didn’t work with ids.
1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.