Element Design » jQuery

The Easiest Way to Select All Checkboxes with jQuery

chad — Mon, 21 Dec 2009 17:57:11 +0000

After looking at many code samples online that were unnecessarily complex I’ve come up with my own simple method of selecting all checkboxes on a page:

$(":checkbox").attr("checked", true);

You can change the selector to target certain groups of checkboxes.

To deselect all checkboxes, simply change the “true” to “false”:

$(":checkbox").attr("checked", false);

jQuery UI Datepicker Inline Select

chad — Thu, 03 Sep 2009 13:00:33 +0000

It is well documented on the jQuery UI site on how to take a value from Datepicker when calling it from an input field. However when embedding Datepicker on a page (associating it with a div instead of an input field), you have to add a small amount of code to easily capture values from it.

Inline Datepicker Demo

The key component to making it work is using the onSelect event. Here is the jQuery code, with “#datepicker” as a div:

$("#datepicker").datepicker({
   onSelect: function(dateText, inst) {
      $("#datepicker_value").val(dateText);
   }
});

“#datepicker_value” is an input field that is updated every time the user selects a different date. This input field can be easily added to any form for submit. Visit the Datepicker demo page for a working example.

Wordpress & jQuery: “$ is not a function”

chad — Tue, 18 Aug 2009 13:00:06 +0000

If you are trying to add your own jQuery code to Wordpress, and have had the error “$ is not a function” show up on Firebug, here is the fix:

Convert all dollar signs ($) to ‘jQuery’

The dollar sign is reserved in Wordpress for the Prototype library, which is why it errors out. For example, instead of:

$().ready(function() {
   $("#select_me").show();
});

Change it to:

jQuery().ready(function() {
   jQuery("#select_me").show();
});

Jcrop Large Image Previews

chad — Mon, 17 Aug 2009 17:07:36 +0000

Jcrop is an excellent jQuery plugin developed by Deep Liquid. It is used to easily crop images on websites without having to use any photo editing software.

There is documentation on their website on how to use boxWidth and boxHeight to deal with large resolution pictures, however it does not tie together those methods with the preview pane (visit the demo this post is referencing).

Assuming you are using boxWidth to shrink down the image to 500 pixels wide, with a thumbnail 80 pixels by 80 pixels, use the following code to correctly display the preview pane.

jQuery('#cropbox').Jcrop({
   onChange: showPreview,
   onSelect: updateCoords,
   aspectRatio: 1,
   boxWidth: 500
});

function showPreview(coords) {
   if (parseInt(coords.w) > 0) {
      var rx = 80 / coords.w;
      var ry = 80 / coords.h;

      var img_height = $("#cropbox").height();
      var img_width = $("#cropbox").width();

      jQuery('#preview').css({
         width: Math.round(rx * img_width) + 'px',
         height: Math.round(ry * img_height) + 'px',
         marginLeft: '-' + Math.round(rx * coords.x) + 'px',
         marginTop: '-' + Math.round(ry * coords.y) + 'px'
     });
   }
};

The variables img_height and img_width find the new dimensions of the image, which are unique for images with different dimensions. The variables are then used to make calculations for the width and height of the preview pane.