Navigation Menu
Welcome to the homepage of Jon Robson, one of those web developer hippie types. I
currently live in London, work for Osmosoft and make things like the new ILGA website and Vismo. Here is the
place to find the majority of my contributions to the big thing we call the web. This is a blog and an RSS aggregator of all my feeds. I don't like IE6 but I like coffee. I believe Programming is an art.
Hope you enjoy your stay.
Catch up on what I've been blogging about in the BlogArchive.
loading content ... 
Rated /5.00 | Created 17 April 2009
Now jQuery has been placed in the TiddlyWiki core, I took the opportunity to look at the advantages it could bring me as a developer. I came across several plugins and functions that looked of interest and came up with VismoWiki - a TiddlyWiki vertical designed for users who's brains seem to work better with visualisations.
The features I focused on was code that allowed me to easily make a given dom element a toggle function, an easy method for creating tabs, and an easy method to make elements resizable or moveable - functionality provided by the delightful jqDnr plugin.
What struck me was how easy using jQuery I got thse quite useful bits of functionality into it. I decided it would be quite nice to be able to use class names as the means of giving elements the right behaviour and I decided to focus on the PageTemplate, EditTemplate and ViewTemplate tiddlers that are quite useful in laying out a tiddlywiki.
I made it so that every time the displayTiddler or refreshDisplay functions were called (the main ones for making drastic changes to the layout) a set of functions would be called that would scan the document for elements with a given class name and then power them up with some nice new functionality.
So to make a dom element resizeable, I simply add a class resizeable to that dom element - something that even those with limited html knowledge should be able to handle. Then the code below would give the resizeable functionality.
I did similar things for the other features - and it's all bundled up in jQueryHandyTweaksPlugin if you fancy playing with it yourself. The toggle buttons in the top right menu use this plugin.
The features I focused on was code that allowed me to easily make a given dom element a toggle function, an easy method for creating tabs, and an easy method to make elements resizable or moveable - functionality provided by the delightful jqDnr plugin.
What struck me was how easy using jQuery I got thse quite useful bits of functionality into it. I decided it would be quite nice to be able to use class names as the means of giving elements the right behaviour and I decided to focus on the PageTemplate, EditTemplate and ViewTemplate tiddlers that are quite useful in laying out a tiddlywiki.
I made it so that every time the displayTiddler or refreshDisplay functions were called (the main ones for making drastic changes to the layout) a set of functions would be called that would scan the document for elements with a given class name and then power them up with some nice new functionality.
So to make a dom element resizeable, I simply add a class resizeable to that dom element - something that even those with limited html knowledge should be able to handle. Then the code below would give the resizeable functionality.
function makeresizeables(){
var els = jQuery(".resizable"); //get all elements with this classs
for(var i=0; i < els.length; i++){
var element = els[i];
var newdiv = document.createElement("div"); //create a div which will be the resizer
newdiv.className = "jqHandle jqResize";
element.appendChild(newdiv);//place resizer in element.
jQuery(element).jqResize('.jqResize'); //execute the plugin with one line
}
}
var els = jQuery(".resizable"); //get all elements with this classs
for(var i=0; i < els.length; i++){
var element = els[i];
var newdiv = document.createElement("div"); //create a div which will be the resizer
newdiv.className = "jqHandle jqResize";
element.appendChild(newdiv);//place resizer in element.
jQuery(element).jqResize('.jqResize'); //execute the plugin with one line
}
}
I did similar things for the other features - and it's all bundled up in jQueryHandyTweaksPlugin if you fancy playing with it yourself. The toggle buttons in the top right menu use this plugin.
Error Message
Macro 'ratemytiddler' not defined, or not allowed to call [restricted_mode=False]
Comments 
Error Message
Macro 'tiddlyWebComments' not defined, or not allowed to call [restricted_mode=False]
a list of older blog posts can be found at here