Monday, July 07, 2008

Dojo based style editor.

This is a fairly simple style editor I have built in DOJO for debugging style probs in IE. It works fairly well and uses the dojo.getComputedStyle method which retrieves the computed style for an HTML element, then it makes a property list of all the style attributes.

It just embeds with a single HTML tag, I usually position it past the right of the page so that it doesn't obscure anything else.

It runs with DOJO 1.1.0 but should be ok with 1.0 as well, as it uses fairly basic functions. You will also need to load the basic dojo library in the standard way(1) - I won't repeat it here. I have just been including the code with a JSP include - but really I should use the dojo packaging framework. Here is the component code(2)

So you need 3 things in this order:-
1. Dojo include
2. Component code include (just paste in or use [AS|JS|PH]P include)
3. The embed example below.

This is the embed example(3):-
<div id="styler" dojotype="robmunro.StyleEditor" style="position:absolute;left:1000px;top:0px;display:block">

Here is an explanation of the controls:-

textbox = input the id of an element(e.g."idElement") or some JS to select it (e.g. dojo.byId("idElement"))
undo = Undo last change (1 only) - may not work :(
get = Click on get and then the next click on any part of the page loads the clicked HTML element in the style editor.
show = Highlight the current element in the page.
parent = Highlights the parent element in the page - clicking loads it in the editor.
children = show a menu of the children of this element, clicking loads it and hovering highlights it in the page.
siblings = as for children.

The rest of the column shows the computed style for the page, the attributes are editable and if the edit was OK the text turns green, otherwise the attribute turns red, and the error is in the tool tip.

This has saved me loads of time debugging IE styles - which, as we all know, are quite buggy. So i hope it helps someone else out there as well.

I guess I should make it realizable and draggable as well. Maybe I will update it soon.

Here is a screenshot of it in action.

No comments: