JSFiddle Shortcode

JSFiddle Shortcode is a WordPress plugin to help you to easily embed Fiddles in your posts.

I was working on a post and wanted to embed a Fiddle to show an example. I’m currently using GitHub Gist Shortcode plugin to embed gists and tough there maybe something similar for JSFiddle, but after a quick search I couldn’t find anything available in the Plugin Directory. I decided to created it my self and this the result.

Continue reading

Get height of a hidden element using jQuery

It’s known that hidden elements doesn’t take space in the document unless they are not really hidden but invisible, using visibility:hidden.

Sometimes you need to know something about a hidden element before you actually show it, let’s say the height property of a DIV element. You can easily get that property value making the element displayable but invisible, that way the element would take space in the document and you can get the height or any other property value that isn’t available while the element is hidden.

The following code is a small jQuery plugin that takes a function as argument. The plugin clones a jQuery element, make it displayable but invisible, then inserts the clone right after the original element, executes the function on the context of the cloned element and returns the function result. The clone is removed from the DOM after the passed function returns.

To solve the problem of the height property I explained above you could use the following code:

var height = $('#i-am-hidden').sandbox(function(){ return this.height(); });

jQuery TimePicker

jQuery TimePicker is a plugin to help users easily input time entries. It works by allowing the user to type times in a free format or selecting them from a dropdown menu.

The plugin will automatically convert all time entries to a format that can be changed passing the timeFormat option; the default value is hh:mm p which will give something like ’02:16 PM’. The following are a few examples of the supported “formats”:

  • 1234 will be converted to 12:34 AM
  • 1234 p will be converted to 12:34 PM
  • 456 will be converted to 04:56 AM
  • 1656 will be converted to 04:56 PM
  • 1:1 P will be converted to 01:10 PM
  • 1:9 A will be converted to 01:09 AM
  • 8:59 will be converted to 08:59 PM
  • 1:20:30 will be converted to 01:20:30 PM
  • 46 will be converted to 05:00 AM (4 hours plus 60 minutes)

There are other supported formats, all inspired by the behavior of a similar timepicker used in Google Calendar. To see more, check the options page.

How to Use

To use jQuery TimePicker you’ll need to include two files: jquery.timepicker.js and jquery.timepicker.css. Then you can use the following code to initialize the plugin:

$(document).ready(function(){
    $('input.timepicker').timepicker({});
});

Options

  • timeFormat: this is the format of time string displayed in the input field and the menu items in the combobox. Available modifiers are: h, hh, H, HH, m, mm, s, ss, p.
  • minTime: a Date object. Only the time parts (getHours, getMinutes) of the object are important. Time entries before minTime won’t be displayed/allowed.
  • minHour: int. Ignored if minTime is set.
  • minMinutes: int. Ignored if minTime is set.
  • maxTime: a Date object. Time entries after maxTime won’t be displayed.
  • maxHour: int. Ignored if maxTime is set.
  • maxMinutes: int. Ignored if maxTime is set.
  • starTime: a Date object. The time of the first item in the combobox when the input field is empty. If the input field is not empty the first item will be the next allowed time entry.
  • startHour: int. Ignored if startTime is set.
  • startMinutes: int. Ignored if startTime is set.
  • interval: int. Time separation in minutes between each time entry.
  • dropdown: boolean. Whether the dropdown should be displayed or not.
  • scrollbar: boolean. Whether the scrollbars are shown or not.
  • change: a callback called when the value of the input field changes. A Date object with the selected time is passed to the callback.

Bugs

The Plugin has been tested in Firefox 3.6, Google Chrome, Safari (Windows) and IE 7.
Bugs reports, comments and new features suggestions are welcome at GitHub, in Gitter, or through the contact page of this blog.

Download

Latest version of jQuery TimePicker can be downloaded from GitHub.

Flot – Una librería gráfica para jQuery

Es sorprendente la cantidad de alternativas para crear gráficos en un sitio web. Cuando empecé a investigar sobre el tema no esperaba encontrar tanto, pero la verdad es que hay opciones para todos los gustos:

Luego de probar Google Chart API (la unica opción de la lista que no requiere JavaScript) y gRaphael decidí quedarme con Flot, una librearía gráfica para jQuery. Gráficos atractivos, sintaxis intuitiva (es como usar cualquier otro plugin de jQuery), soporte para eventos y la posibilidad de ser extendida a través de plugins, son varias de las características que hicieron de esta librería mi elección para crear gráficos para la web. Vea un ejemplo completo