CMXtraneous: JavaScript

Right on the edge of useful

Font chooser within a Dreamweaver extension

Posted Saturday, October 23, 2004 11:50:56 AM by Danilo Celic

Danilo Celic

While working on an extension that I'm hoping will combine Dreamweaver and Flash I needed to have the user select the font that they want to use. So I used the API call dw.getSystemFontList() to grab a list of fonts to display to the user, and then dropped the list of fonts into a select list to give the user their choice of fonts.

To do this, add the ListControl class to your extension (see Fill a list with defined site names for how to do that), then add a select list to your extenion dialog, give it a name of "fontList" and then in your initilization function, add the following code:

var fonts = dw.getSystemFontList('all');
FONT_LIST = new ListControl('fontList');
FONT_LIST.setAll(fonts);
processFontChange();

Voila, instant font list. getSystemFontList() can also take 'TrueType' to list only the TrueType fonts on the user's system.

Category tags: Dreamweaver, Extensibility, JavaScript

sIFR -- the Release Candidate

Posted Thursday, October 07, 2004 1:30:11 AM by Stephanie

Stephanie

I just noticed that Mike and Mark have a release candidate of the sIFR technique (pronounced "siffer"). Can't wait to put it up on a couple sites. I think I'll put it here on the blog for you guys to see over the weekend (if I can find some extra time. :)

The technique grew out of Shaun Inman's IFR technique which wasn't scalable. You had to export the swf in the size you wanted it rendered in. This technique is scalable and dynamic. Shaun writes, 'IFR is just an anagram of FIR, and pays homage to Fahrner Image Replacement. And it's "Flash Replacement" instead of "Text Replacement" for the same reason, to parallel FIR.'

Read their notes and download release candidate one. If you put it on a site, leave me a note and let me know how it works out for you.

Category tags: Accessibility, CSS, Dreamweaver, Flash, JavaScript

Accessible, Beautiful Flash Text

Posted Friday, October 01, 2004 5:27:02 PM by Stephanie

Stephanie

I've got to hand it to Mike Davidson. He's putting together one of the most inventive things I've seen in quite some time. I'll be writing an article about it soon. But for now, I'll give you the basics.

Mike's developing a way to use an image replacement technique (obviously most useful for headings) using JavaScript, Flash and CSS. You simply style your headings as always using your h1, h2, h3 elements and cascade the fonts as always. The technique then uses JavaScript (if installed), and replaces whatever text you've put into the heading element with dynamic text (using Flash). This means that we can use beautiful fonts, not installed on the user's system, on our web pages. This rocks!

I've been playing around with it and so far I'm excited about the results. The method is due out of beta soon and I've already got two client sites I'll be adding it to. The thing I like best is that if the surfer's browser does not have the Flash 6 player installed or has JavaScript turned off, the text renders using the CSS and they don't feel they're missing anything. This is not only good for accessibility, but it's also wonderful for search engines. This text can be indexed and read by all. Excellent!

You can read Mike's very long explanation at Introducing sIFR: The Healthy Alternative to Browser Text. And the most recent beta (check his site's blog for releases after this date) is version 2.0b2. You can download and play with the files -- sans instructions for now -- at sIFR 2.0b2: The Mo’ Betta Beta.

Category tags: Accessibility, CSS, Dreamweaver, Flash, JavaScript