TiddlyWiki – a JavaScript only Wiki engine

David — Mon, 20 Apr 2009 09:35:49 +0000

Today I stumbled upon a JavaScript Wiki engine called TiddlyWiki. It consists of a single HTML file using JQuery to modify itself. There’s also a good documentation MediaWiki on tiddlywiki.org. TiddlyWiki has a plugin system where you can attach customization JavaScript allowing for various new features. It even provides an auto update mechanism allowing to replace the core JavaScript with a newer version.

If you want to save your Wiki content and settings you just have to allow the browser to re-save the local HTML file – using that it will just overwrite itself and remember its changes when you re-open the file in the future.

TiddlyWiki is intended to be used as a single user Wiki mostly, ranging from a powerful notebook or journal to a tool to document all your work. Since it creates backup copies of its previous state upon saving, you don’t have to fear losing all your work at once in the future.

I think it is really great fun to use and marks a new step in browser based software. After playing around for a while I quickly understood how to use it and what benefits one might gain from such a tool.

Try it out for yourself and have fun!

Styling an input type=”file” using jQuery

David — Thu, 21 Aug 2008 12:33:06 +0000

During the last days I had to work on some forms that are using file upload inputs. I wondered how to make the file input fields look nicer (they are not affected very much by css) and found this appealing solution. Since the application needs JavaScript anyway, there was nothing wrong with the approach and it worked fine. However, I didn’t like the look of the (working!) JavaScript code and wanted to do it more niftily using jQuery.

This is how the original code looks like:

var W3CDOM = (document.createElement && document.getElementsByTagName);
 
function initFileUploads() {
	if (!W3CDOM) return;
	var fakeFileUpload = document.createElement('div');
	fakeFileUpload.className = 'fakefile';
	fakeFileUpload.appendChild(document.createElement('input'));
	var image = document.createElement('img');
	image.src='pix/button_select.gif';
	fakeFileUpload.appendChild(image);
	var x = document.getElementsByTagName('input');
	for (var i=0;i<x.length;i++) {
		if (x[i].type != 'file') continue;
		if (x[i].parentNode.className != 'fileinputs') continue;
		x[i].className = 'file hidden';
		var clone = fakeFileUpload.cloneNode(true);
		x[i].parentNode.appendChild(clone);
		x[i].relatedElement = clone.getElementsByTagName('input')[0];
		x[i].onchange = x[i].onmouseout = function () {
			this.relatedElement.value = this.value;
		}
	}
}

As I said before it works fine, but it is… well… clumsy. I like the clean and efficient approach of JavaScript using the jQuery library and this is why I went for this replacement:

$('input[type=file]').each(function(){
  $(this).addClass('file').addClass('hidden');
  $(this).parent().append($('').append($('').attr('id',$(this).attr('id')+'__fake')).append($('')));
 
  $(this).bind('change', function() {
    $('#'+$(this).attr('id')+'__fake').val($(this).val());;
  });
  $(this).bind('mouseout', function() {
    $('#'+$(this).attr('id')+'__fake').val($(this).val());;
  });
});

Instead of selecting the newly generated input field by its tag name, I decided to give it the same ID as the original field plus ‘__fake’ appended – if you have any field with the same name, just change the postfix to something else. This makes the addressing in the event handler functions easier.

Of course this code should be executed after the document is fully loaded, this is why it goes into another block:

$(document).ready(function() {
  $('input[type=file]').each(function(){
    $(this).addClass('file').addClass('hidden');
    $(this).parent().append($('').append($('').attr('id',$(this).attr('id')+'__fake')).append($('')));
 
    $(this).bind('change', function() {
      $('#'+$(this).attr('id')+'__fake').val($(this).val());;
    });
    $(this).bind('mouseout', function() {
      $('#'+$(this).attr('id')+'__fake').val($(this).val());;
    });
  });
});

Voilá! I like it more this way, especially because now it’s a lot easier to modify the behaviour of the script, e.g. if you only want to do it for some specific fields or if you want to add something other than an image as the button.
It’s your freedom of choice!

David's virtual world » JavaScript

TiddlyWiki – a JavaScript only Wiki engine

Styling an input type=”file” using jQuery