mootools

Second Helpings

Over the weekend I was trying to develop a new way to maintain the list of events in the right hand column sidebar of this blog. Up until this evening the only way to make a change to anything in the sidebar was to edit the template from within blogger and re publish the whole blog. Not ever efficient or flexible.

iframe

At first I tried to use an iframe. Separate frames are not the best kid of thing but they have gained favor over the last few years. They were once considered really bad news but now with better browser support and web 2.0 content requirements it's a legitimate way of pulling content into your web site. However there are several issues in making the resulting content look good. The biggest of these is making the iframe dynamically re-size to fit the content. Remember the iframe is a mini browser effectively and it'll not automatically re-size itself, you wouldn't want Firefox to do that would you? The web is full of forums and blogs trying all sorts of html and css techniques to resize the iframe based on content. None of them work very well

java script

So what then, I started to look for a javascript alternative. Then twigging I've just started to use mootools within the site, and wait the Request.HTTP class and the myElement.load(url); method!

So with a single line of code added to my mootools initialisation domready event, a id in a div tag in the side bar and the content is loaded directly into the DOM of the blog page with no frames at all.

now why didn't I think of that before?

MOOTOOLS TEST

mootools : FxSlide() in a blog page

This is an experimental effect designed to hide the map withing a blog article. The mootools javascript toolset or framework is well understood. The trick is to apply it to a blog page which is not static. That is to say the number of maps displayed in a page will vary due to the author's content, I may not include a map in every post and secondly due to the fact the Blogger will vary the number of articles on the page over time.

hide map | show map

View Crinkle Crags & Langdale Pikes in a larger map

So the requirement is be able to

1. insert into a blog post while writing it
2. add a simple set of links to hide or reveal the map
3. add any necessary css or html tags to the map itself or it's containing div
4. the code must be simple and amenable to be inserted as a snippet
5. we should NOT need to know howmany maps have previously existed on the page, the code must self configure