My first bit of Mootools and centering a Google Map in a hidden div

Started a new job last week for a really cool agency in a place I really want to work* – but they are Mootools users not jQuery folk, so I am been thrown headlong into (among other things) the world of Mootools. I’m used to just sitting down and being able to make things work quickly and painlessly with jQuery and it is funny being back to basics again. Today I wrote my first useful bit of Mootools code, which in the grand scheme of things is nothing – just a nice fading toggle to show and hide a Google Map – but it still felt good.

Along the way I had to ran into a problem with my map – when I showed it the centre-ing was gone – I tried all sorts of things… map.checkResize() didn’t work and map.setCenter() didn’t work.

Eventually I deduced that first you actually need to call both functions – reset, then centre e.g.

    map.checkResize();
    map.setCenter(new GLatLng(51.90568, -1.33214));

Along my way I have found a great article comparing jQuery and Mootools – which I would recommend to anyone going either way.

*But it is a kind of a personal philosophy not to ever say on my blog where I do work, just because. I’ve taken over a big project running on a Cloud server written by a load of other people, the sort of thing that is hard but very rewarding.
** I have no idea where those coordinates are. Maybe Up North somewhere?

Minimum age with the jQuery UI Datepicker

Minimum age with the jQuery UI Datepicker

Just been working on a registration form where the minimum age of registering users has to be 18. Using the fabulous jQuery UI Datepicker (see documentation it’s really easy to set up a Date of Birth field so that the a user has to be a least 18 years old.

$(function() {
  $("#dob").datepicker(
    {
      minDate: new Date(1900,1-1,1), maxDate: '-18Y',
      dateFormat: 'dd/mm/yy',
      defaultDate: new Date(1970,1-1,1),
      changeMonth: true,
      changeYear: true,
      yearRange: '-110:-18'
    }
  );					
});

jQuery plugin to print HTML forms

Recently for a project, a client wanted to be able to print pages from a web application that were just forms. This was never intended when the application was originally built, so there were no separate view screens of data. Naively I thought this would be easy – knock up a print style sheet and bob’s your uncle… if only.

There are a couple of problems that just aren’t really fixable using a pure CSS solution, firstly <select> menus look pretty horrible no matter what you to them and <textarea> fields look fairly bad, but even worse than their aesthetic merits (or lack of rather) is the fact that the overflowing content i.e. the content that you need to scroll to see, will not be printed.

In the end for the application I ended up adding views, but it got me thinking and so I’ve written a quick jQuery plugin to print forms. It works by looking for any <select> menus or <textarea> fields and replacing them with <div> tags styled to look like form elements. When you click on one of the <div>s to edit it, it reverts to the original form element and when it looses the focus (using the jQuery blur() method) the field is swapped back and replaced by the <div>.

When you come to print the form because all of the <select> menus and <textarea> fields have been replaced by <div>s you can style them as you want using a print style sheet and get a nice looking form with no missing content.

Have a look at the working example and view source to see how to use it.

download printform plugin example

You will want to edit / write CSS for both screen and print appropriate to your situation.
Tested on IE6, IE7, Firefox 2.0.

/*
 * printform 1.0
 * By John Elliott (http://www.flipflops.org)
 * Copyright (c) 2008 John Elliott
 * Licensed under the MIT License: http://www.opensource.org/licenses/mit-license.php
*/
   
/**
 * convert textareas and select tags to divs so that you HTML forms can be printed.
 *
 *
 *
 * @name printform
 * @type jQuery
 * @author John Elliott (http://www.flipflops.org)
 * @desc 
 * 
 * @example $('#tester').printform();
 * @desc call the plugin on #tester - any select or textareas will be replaced
 *
 * @param settings - not used, but included for future proofing! (I'm sure there will be options sometime...)
 *
*/

jQuery.fn.printform = function(settings){
	return this.each(function(){
		new jQuery.printform(this, settings);
	});
}



jQuery.printform = function(obj, settings) {
  
  	/*
  	* within a parent object - replace the textareas and select menus
  	*/
  
  
 	init(obj, 'textarea');
	init(obj, 'select');	
	
		
	function init(obj, fieldType) {
	
	/*
	* loop through each instance of an element within the parent 
	*/
		
		obj = jQuery(obj).attr('id');
			
		jQuery('#' + obj + ' ' + fieldType).each( function() {
					
			var id = jQuery(this).attr('id');
			
			field_replacer(id, fieldType);
		});
	}		
	
	
	function field_replacer(id, fieldType) {
	
	/*
	* function to replace the elements with divs
	*/
	
			str = jQuery('#' + id).val();
			str = str.replace(/\n/g, '
'); if ( jQuery('#replace-' + id).length > 0 ) { // if a replacement div already exists for this element, then just show it. // update the content of the replacer with the edited content jQuery('#replace-' + id).html(str).show(); } else { // otherwise create a new replacement div for the element jQuery('#' + id).after('
' + str + '
'); } jQuery('#' + id).hide(); // hide the element that has just been replaced field_watcher(id, fieldType); // add event listeners } function field_watcher(id, fieldType) { /* * add listeners to the elements * onclick - show the original element and hide the replacer * onblur - call the field_replacer to update the page */ jQuery('#replace-' + id).click(function() { jQuery('#' + id).show().focus(); jQuery('#replace-' + id).hide(); jQuery('#' + id).blur(function() { field_replacer(id, fieldType); }); }); } };

Thanks to to Mike Alsup for his great (if rather daunting) guide to writing plugins on Learning jQuery.

jQuery – watch a checkbox field

This is a simple function I wrote that will monitor a <checkbox> field on a form. If the <checkbox> is ticked then it will show a specified <div> and if the <checkbox> is un-ticked then it will hide the specified <div>.

View the working example

Initially I thought that I might be able to use the .toggle() function – but I when users returned to a form I needed the <div>s to show or hidden according to stored values.

I also have a very similar function that does the same thing for <select> fields. Logically you might then combine the functions into a single function or a plugin that could monitor checkboxes, radio buttons, select menus and show or hide <div>s accordingly – but at what point does the complexity of the just using the function outweigh the simplicity of using it? This is something I haven’t decide on yet.

At the moment I can just call it like so:

testCheckbox('id_of_checkbox', 'id_of_div');

If I were to combine these functions I would likely loose this speed / clarity – for instance a <select> might want to show or hide different <div>s based on different selected values and then I would need to start passing arrays to the function – loosing the initial simplicity. The only answer is to go ahead, write one and see what happens.



Note When I wrote this function it seemed logical to use the .change() function – but I have had to chnage this to .click() because .change() seems to fail silently and unpredictably in IE7.