24 Feb

quick js tip

Instead of the following:

function getResult(el){
    case '0': return func1();
    case '1': return func2();
    case '3': return func3();
    case '5': return func4();

Do this:

function getResult(el){
  return [func1,func2,0,func3,0,func4][parseInt(el.value)]();

This assumes that the value will always match one of the valid functions.

23 Feb

contextmenu for fckeditor's filemanager

A few clients of mine had asked me how to rename or delete files and directories in our CMS after uploading with FCKeditor.

There was no way to do it.

I decided to check the FCKeditor forum to see if soemone else might have solved it already. There were ways to do it using addons, but the integrated filemanager did not have a way to do it.

So, I suggested that I would give it a shot.

I had never written a context menu before, so went digging through the FCKeditor source to see what I could see.

After an hour of reading, I was still none-the-wiser, so did it from scratch.

The Demo – once it’s loaded, click the Image icon, then Browse Server. try uploading a small file, then rename it and delete it. You can also create and edit folders/directories.

I’m pretty happy with this one. The solution was very tidy, and I will be using the code again in the future.

12 Feb

trick of the week: autocropping

Right… first off, check out the demo in either Firefox or Konqueror (I haven’t tested in IE yet, so can’t be certain that it works there yet (if not, I’ll fix it tomorrow)).

Impressed yet? No? Read the source.

If you are still not impressed, then you are obviously not a web developer :-).

The trick is based on an old CSS trick which I first saw done by Eric Meyer (Curvelicious).

The way he did it was to painstakingly split a curve image into slices, and apply floats to them individually.

At the time, I was pretty gobsmacked – it was a simple idea, but very effective.

However, as time went on, I grew jaded, in that “experienced web developer” way. Nowadays, if it adds any more than a few characters to the source, then I think it is too bloated.

So – here is a way to do the same trick, minus the bloat!

Simply add a class “autocrop” to the image that you want sliced up, and attach a JavaScript that will handle to splitting.

The advantages to this: very little bandwidth wasted, no time wasted by the designer painstakingly slicing the image apart.

Most of the files needed are contained in this archive. Just add a /i/blank.gif image and for IE, Dean Edwards’ ie7 script (for the XMLHttpRequest object).

05 Feb

implementing an SVG viewer in JavaScript

Last week, I wrote about the idea of rendering SVG through JavaScript. At the time, it seemed possible, but pretty difficult. Today, I sat down and threw a few hours at it, and have a simple viewer that shows about 80% of basic shapes.

check this out (in a non-SVG browser, of course)

The actual drawing of the shapes is handled with Walter Zorn’s JSGraphics library, so I did not need to do much, in that regard.

The most difficult part was the parsing of the SVG itself. I could not find an XML parser for JavaScript that I liked, so I spent a bit of time writing one into the script. The parser reads the file in using the XMLHttpRequest object, then parses it into a walkable DOM-tree.

The next difficult part was more frustrating than tricky – apparently, there is no simple “navigator.SVGSupported” constant, so I spent a bit of time finding some tests for that. That bit still annoys me…

I have not tested this in IE yet (I don’t have Windows on any of my home machines), so will probably need to fix up some things in it tomorrow.

Walter’s script does not yet support anti-aliasing or bezier lines, which I have mailed him about.

When I started working on this, I was only doing it as a way to improve the speed of FCKEditor‘s icons. For some reason, I could not see the more obvious benefits to this, which would make it justifiable to spend some time working on this on company time.

However, it dawned on me that SVG is perfect for drawing clean graphs for various purposes, without complex PHP. That means that I may be able to get some time sanctioned for this purpose at my place of employment (which means I won’t simply lose interest and go do something else for a few months).

Anyway – enjoy, and give me some feedback!