Tag Archives: jquery

Very Simple jQuery UI Resizable Columns Technique

There are plenty of plugins that allow you to resize table columns while maintaining the same overall table width, however sometimes it would be useful to be able to do this with block elements such as divs, sections and so on.

The following is a stripped down version of what we use for creating page layouts in our Doozy CMS – this snippet is only intended as a very simple example and isn’t responsive, is pixel based and doesn’t use HTML 5 semantic elements. It requires jQuery and jQuery UI (resizable) so you’ll need to include those libraries to make it work.

Using this technique, you can:

  • Have any number of resizable columns in the containing element
  • Specify minimum and maximum column widths
  • Make columns snap to predefined widths when resizing

A little CSS…

  .container {width:960px; margin:100px auto;}
  .column {height:300px; float:left; margin:0;}
  .column-1 {background: #f8f8f6; width: 640px;}
  .column-2 {background: #e8e7e2; width: 320px}

 A bit of HTML…

<div class="container">
  <div class="column column-1"></div>
  <div class="column column-2"></div>
</div>

And some very simple jQuery to finish off.

var tot_width;
var min_width = 160;
jQuery('.container .column:not(:last-child)').resizable({
  grid : 80,
  minWidth : min_width,
  handles : 'e',
  start : function(){
    tot_width = jQuery(this).width() + jQuery(this).next().width();
    jQuery(this).resizable('option', 'maxWidth', (tot_width - min_width));
  },
  resize : function(){
    jQuery(this).next().width(tot_width - jQuery(this).width());
  }
});

And there you have it. Toss in a some PHP and a bit of ajax and this can be very useful indeed…

jQuery UI draggable into multiple sortables with remove

jQuery UI is a useful if somewhat large library and we use it in some of our backend stuff where page load times aren’t quite so important.

One of it’s cool features is the ability to have one or more sortable containers that can have items dropped onto them either from an external draggable element or from another connected sortable container.

But have you ever tried to remove an item from one of a group of connected sortable containers?

This should be a piece of cake to do but unfortunately the sortable over and out events don’t play nicely together at all when you have multiple connected sortable containers. Go and try it for yourself, then come back to see a quick and easy way to do it.

A simple trick I’ve found to solve this problem is to make your sortable containers droppable also, and to use the droppable over and out events. You’ll need the approriate references to the jQuery and jQuery UI libraries & CSS of course.

A few additional lines of code to make the containers droppable will now allow you to:

  • drag and drop external draggable items onto any of the sortable containers
  • drag and drop items between any of the sortable containers
  • completely remove items from all of the sortable containers by dragging and dropping them away from a sortable container (ie anywhere else on the page)

The following code is stripped down to the essentials (although you may or may not need the draggable clone helper depending on your application) and shows how to do this:

var remove_me = false;

$('.your_external_draggable_element').draggable({
  connectToSortable: ".your_sortable_container",
  helper: "clone",
});

$('.your_sortable_container').droppable({
  over: function(){
    remove_me = false;
  },
  out: function(){
    remove_me = true;
  }
}).sortable({
  tolerance: "pointer",
  connectWith: '.your_sortable_container',
  stop: function(event, ui){
    if (remove_me){
      ui.item.remove();
    }
  },
});

Do you know of any simpler or better ways? If so, let us know in the comments…

Very simple CSS/HTML/jQuery numeric spinner control

Here’s a simple numeric spinner control that you might find useful. This is a stripped down verson of a control we created for our soon to be released Doozy CMS. The appearance can easily be altered in the CSS – we’ve used this size & look in many of our other controls for consistency.

In the interests of simplicity, there’s no hover effects, input validation or min/max limits in place in this example but it’s trivial to implement these & I’ll leave it to you to do so.

It uses jQuery simply because we use it for many other features in our applications so you’ll need to include it in any pages that use this control (or change the code to use plain javascript). The jQuery ‘on’ method is used so we can add controls dynamically but isn’t necessary for manually coded controls.

Features

  • Easily customisable
  • Very lightweight
  • Numbers can be manually typed in or incremented / decremented by using the arrow keys on the keyboard or by clicking the up / down buttons

The Finished Control

spinner control

Here’s the code used in this particular example:

The CSS

.spinner {display:inline-block; position:relative; border:1px solid #dcdcdc; border-radius:4px; overflow:hidden;}
.spinner-input {width:46px; margin-right:23px; border:none; padding:0 3px; height:23px; line-height:23px; border-right:1px solid #dcdcdc;}
.spinner-button {text-decoration:none; position:absolute; right:0; background: #efefef; height:11px; line-height:11px; width:23px;}
.spinner-up {top:0;}
.spinner-down{bottom:0; border-top:1px solid #dcdcdc;}

The HTML

<div class="spinner">
  <input class="spinner-input" type="text" />
  <a class="spinner-button spinner-up" href="#">▴</a>
  <a class="spinner-button spinner-down" href="#">▾</a>
</div>

The jQuery

$(document).on('keydown', '.spinner-input', function(e){
  if (e.which == 38) { // up-arrow
    $(this).val((parseInt($(this).val()) + 1)); // parseInt used as we want to increment, not concatenate
  } else if (e.which == 40) { // down-arrow
    $(this).val((parseInt($(this).val()) - 1));
  }
});
		
$(document).on('click', '.spinner-button', function(){
  var target = $(this).siblings(':first');
  if ($(this).hasClass('spinner-up')){
    $(target).val((parseInt($(target).val()) + 1));
  }else{
    $(target).val((parseInt($(target).val()) - 1));
  }
  return false;
});

Loading jQuery and other libraries from Google’s CDN with local fallback

It is generally preferable to load commonly used  libraries such as jQuery from the Google CDN as it is likely that the client browser will already have a cached copy from that source, thus reducing page load time and bandwidth. Even if there isn’t a cached copy, the library will load faster from Google’s servers than from the website’s server.

The code snippets below attempt to load a minified version of jQuery from Google Hosted Libraries, and if this fails for any reason, will fall back to loading it from the website’s server. Version 2.1.0 is used in this example but the majority of released versions are available on the CDN. Version information can be obtained at https://developers.google.com/speed/libraries/devguide#jquery.

LIBRARIES_URL / libraries_url is the absolute url to your libraries directory including a following slash and is assumed to have been previously defined in PHP in the first example, or as a javascript variable in the second.

PHP:

echo '
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>window.jQuery || document.write(\'<script src="' . LIBRARIES_URL . 'jquery/jquery-2.1.0.min.js">\x3C/script>\')</script>
';

HTML/Javascript:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script>window.jQuery || document.write(\'<script src="' + libraries_url + 'jquery/jquery-1.7.2.min.js">\x3C/script>\')</script>

Libraries currently hosted by Google include:

  • AngularJ
  • Dojo
  • Ext Core
  • jQuery
  • jQuery Mobile
  • jQuery UI
  • MooTools
  • Prototype
  • script_aculo_us
  • SWFObject
  • three.js
  • Web Font Loader

More information can be obtained at https://developers.google.com/speed/libraries/devguide.