Rob Gonda's Blog - JS/DHTML

SWF Object 2.1 Flex Template

Tue, 15 Jul 2008 00:36:00 -0400

SWF Object is an amazing script for wrapping their swf into a HTML page. For those of you using it (and you should), Oleg built a nice SWF Object template now updated for version 2.1 with supports HistoryManager and DeepLinking.

AIR jQuery API browser

Mon, 07 Jul 2008 14:11:00 -0400

Remy Sharp released a nice AIR app to browser the jQuery API, and I love jQuery ... nice little tool. Thanks Ray for the link.

SWFObject 2.1 now available

Mon, 07 Jul 2008 09:00:00 -0400

`You can download SWFObject 2.1 from the SWFObject 2 home or downloads pages.

SWFObject 2.1 addresses the following issues:

Memory leaks in Internet Explorer. There were 2 categories of memory leaks: small ones caused by the library’s structure (use of closures) and use of events, and big leakage that was related to dynamic publishing and Adobe’s External Interface (note: also available in SWFObject 1.5)
Internet Explorer 5.0/5.5 support issues
Script errors in Internet Explorer in case an object element is removed during a visit
Alternative content display issues for Safari 3+ with plug-ins disabled
Removal of isDomLoaded tests from various methods of the public API to enable that dynamically inserted scripts - including bookmarklets - can use these functions
Dynamic publishing could previously fire multiple instances of Adobe Express Install
Fixed dynamic publishing reference issues when using a shared param or attributes JavaScript Object

It contains the following enhancements:

New explicit SWF removal code - especially needed to completely and safely remove a SWF in Internet Explorer - via the new swfobject.removeSWF(idString)
Shortened Flash version strings can be used, so "9.0.0" can now be written as "9"
For dynamic publishing now 0, null, false or {} can be used when no flashvars, parameters or attributes have to be defined (previously you could only use false or {})
Added a filter to the swfobject.getQueryParamValue method to secure the library from XSS attacks (Geoff will publish a more detailed security advisory soon)

jQuery 1.2.6 out and it's even faster

Sun, 06 Jul 2008 14:40:00 -0400

1.2.6 is now out and the events handling functionality is 103% faster:

CSS Selectors are 13% faster
.offset() is 21% faster
The DImensions plugin is now part of the core
toggle() can now accept more functions
attr() has had an overhaul
You can now unbind bound toggle() and one() functions
.index() supports jQuery collections
jQuery.makeArray can convert ANYTHING into an array
beforeSend() can cancel AJAX calls
You can now define your own animation speeds with the jQuery.fx.speeds object

HTML OnMissingImage

Mon, 21 Apr 2008 00:06:00 -0400

Scenario: you need to display a bunch of images but you're not 100% certain that they exist.

Solution 1: If the images are hosted in the same server you can loop over their physical path display an alternate image if the image was not found on disk. This solution is very taxing (I/O intensive) and not efficient at all. It also won't work if you're not hosting the images.

Solution 2: What now? I found a few JavaScripts to loop over every image found in the DOM and check of http status, then replace them if the image wasn't loaded properly. This solution is much better because it's decentralized and the load is delegated to the client as opposed of the server, and it also works with images hosted elsewhere.

Solution 3 (winner): Did you know that the image tags have an onError attribute? I can't believe that after 15 years of web development I just found out about this now :) ... This is the optimal solution as it is native to the browser, works on every browser (I tested IE6+, FF2.0+, Safari1.3+, all on Mac and PC).

Check it out, I included two images: img01.gif, which exists on my server, and img02.gif. Both of them have an onerror attribute with a simple script: this.src=error.gif.

img02.gif does not exist on my server, consequently the script will be executed and load my error.gif

So simple and yet so powerful. Enjoy.

ColdExt: Another ColdFusion wrapper for EXT

Thu, 06 Mar 2008 20:38:00 -0400

After blogging about Dan's great EXT cf wrapper, I ran across another one today: ColdExt.
It looks great as well, so how about Dan and Justin join efforts instead of doubling work...?

ext 2.0.2: Simple Tasks v2 - Multiple lists, NativeWindows and Reminders

Wed, 05 Mar 2008 20:40:00 -0400

In collaboration with Adobe, one of the key additions in Ext 2.0.2 was Adobe AIR 1.0 support for running in the application sandbox. Also, the Simple Tasks AIR application sample was rewritten to take advantage of more of the native functionality in AIR and gained some cool custom Ext components that can be used outside of AIR.

Ext 2.0.2 does a great job wrapping some of the AIR API JavaScript functionality ... check out this blog entry for more.

cfext: ColdFusion wrapper for EXT

Wed, 05 Mar 2008 20:33:00 -0400

Dan Vega has been working on ColdFusion custom tag wrappers for EXT, and let me tell you, it looks pretty amazing.

Ext is an EXTremely powerful JavaScript library which I mostly use to develop RIA and heavy desktop-like applications. However, CF8 ships with YUI and EXT for all dhtml and Ajax behind the scenes, so you see where this is going ... There's no easy way to upgrade the Ext version shipped with CF8, and Ext 2.0 has so many more features and improvements...

So check out Dan's cfext at RiaForge or some examples on his blog: forms, layouts, ...

jQuery UI released

Mon, 17 Sep 2007 10:16:00 -0400

jQuery UI is a set of themable widgets and interactions, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.

The core of the library revolves around different mouse interactions, namely drag and dropping, sorting, selecting, and resizing.

On top of the core interactions are built a number of reusable widgets, including accordions, date pickers, dialogs, sliders, table sorters, and tabs.

Finally, the library is finished off with a few effects that you can use to liven up your site, specifically magnifier and shadow.

» More Information

jQuery v1.2: Major new release, sneak peak at jQuery UI

Tue, 11 Sep 2007 12:01:00 -0400

[From Rey Bango's Blog]

Hot on the heels of the jQuery v1.1.4 release, John Resig and the jQuery team put the pedal to the metal and announced their newest release, jQuery v1.2.

This is a massive new release of jQuery that's been a long time in the making - and it's ready for your consumption!

This release is feature packed adding such new features as:

Following the tradition of "playing nice with other libraries", jQuery v1.2 now provides the ability to define a custom namespace for the events expando, thus adding one more method of ensuring that jQuery developers can successfully work in a multi-library environment. John Resig had this to say:

It's incredibly important for us, and our users, that the jQuery library work in any JavaScript environment. In jQuery 1.2 you can now depend on the fact that jQuery will protect itself from outside code influences, and libraries, even going so far as to protect itself from other versions of jQuery that might be running on the same page. Knowing that your copy of jQuery will always behave the way you expect it, no matter what the platform, is the cornerstone of the project.

Along those same lines of working for the community, the team has provided jQuery developers with an easy way to migrate into jQuery v1.2 by providing a compatibility plugin. With some functionality being removed in jQuery v1.2 release, including this plugin allows developers to have all of the features that were removed in the newest release.

The full release notes provide details about all of these new features.

You can get the latest release of JQuery below:

jQuery 1.2: (How To Upgrade)

jQuery Minified (14kb with Gzipping)
jQuery Packed (26kb)
jQuery Regular (77kb)

Plugins:

As if a new major release wasn't enough to whet your appetite, on Sunday, September 16th, the new jQuery UI effects library will be released to the public. The library will include:

Draggables
Droppables
Resizables
Shadows
Sliders
Sortables
Tabs
Accordions
Selectables
Trees
Modals

All completely documented, demoed, themed, and 100% Free Open Source Software.

Here's a sneak peak at what to expect:

Lead developer of jQuery UI, Paul Bakaus, had this to say:

We worked hard over the last three months to make UI a seamless, rock-solid solution for many interface situations. It's nearly there - featuring many core level modules, ready-to-go widgets and custom, unique themes. To make the experience even nicer, the team created a smart downloader, a playground with demo apps and tests and of course documentation. We are pretty excited about our release on Sunday - be sure not to miss it!

jQuery and AjaxCFC News

Tue, 10 Jul 2007 00:50:00 -0400

jQuery 1.1.3.1: 800%+ Faster, still 20KB

Improved speeds, with DOM traversal over 800% faster than in 1.1.2.
A re-written event system, with more graceful handling of keyboard events.
A re-written effects system (with an accompanying fx test suite), featuring faster execution and better cross-platform support.

Guess who's getting an upgrade soon?

Firebug Security Update

Thu, 05 Apr 2007 10:29:00 -0400

If you're a web developer, you should use Firefox. If you use Firefox, you should use Firebug. If you use Firebug, you should install the latest security update. You can read more at the official site, or simply update your plugins through the Firefox interface.

jQuery-ext announced

Mon, 19 Feb 2007 22:37:00 -0400

The jQuery team announced that the jQuery Project and Jack Slocum’s Ext Project, mostly know as YUI-EXT, have partnered to integrate the amazingly lightweight and powerful jQuery framework with Ext’s awesome UI library.

This collaboration will greatly enhance the capabilities of both projects and expand the functionality available to developers using the jQuery JavaScript Library and the Ext UI component suite.

For those of you new to the Ext project, it includes a wide and powerful UI library, such as dialogs, grids, layouts, resizables, tab panels... This is great news for the jQuery community. Now you would be able to extend jQuery with powerful widgets from interface and Ext.

jQuery 1.1.1 update

Thu, 25 Jan 2007 00:03:00 -0400

If you're using jQuery 1.1, download immediately the 1.1.1 update. There are a few minor bugs that were fixed, but one was major for me. (see the full list here).
The first item: Setting the numerical value of a css property failed, for example: .css(”opacity”,0.5) (also occurred with zIndex, fontWeight), which by the way only affected IE, was causing my interface drag and drop not to work. For those of you not familiar with interface, it's a collection of components made in form of plugins that facilitate the development of Rich User Interfaces.
The particular problem I ran into was defining draggables. The code looks as follows:

$('#drag2').Draggable(
    {
        zIndex:     1000,
        ghosting:    true,
        opacity:     0.7
    }
);

Behind the scenes, this invokes the $().css('zIndex', 1000) function, which for some bizarre reason was translated into setting zIndex to 1000px; go figure. What amazes me with that Firefox, the all standard based web browser, actually ran this code, and IE, the all forgiving-stimulating-bad-code-practice was the one that broke.

Anyways, the jQuery team quickly released an update and I have not experienced any bugs since. Keep it up.

AjaxCFC for jQuery Alpha2 Release

Mon, 15 Jan 2007 00:48:00 -0400

AjaxCFC for jQuery is almost ready and I just uploaded to RIAForge the new Alpha 2 release. You may sync up your SVN repository or if you don't use source control, use RIAForge's zip download utility to fetch the latest version. Once you download the zip file, the jQuery related code is located in the branches/jquery folder.

I am using the just released jQuery 1.1, so if you drop this code on an old site using jQuery, you probably want to download the back-compatibility plugin.

Like I mentioned in my alpha 1 post, I included a plugin to maintain DWR syntax compatibility, and to illustrate it, I updated a few examples to use this code instead of DWR. Thus far, the only significant different I found is when returning a query using JSON serialization method (default on this release). The syntax to access the query columns is a little different, as you will see in the examples and soon-to-come documentation.

Among some other changes, I updated logging, error trapping, security checks, constructor methods, serialization capabilities, and more.

Most of these changes affect the DWR and jQuery version since the Ajax.cfc core file is shared between them.

Constructor method: many of you tried to extend your existing domain model objects and provide remote methods inside them. Although I don't particularly agree with this practice, I don't want to restrict it. AjaxCFC used to rely on it's built-in init method constructor, which interfered with you own component once extended, so I renamed the AjaxCFC to allow your objects to contain an init() method.

Error trapping: AjaxCFC catches most errors in your components and by default, alert you with the error message. I added the file and line number since sometimes the message was not enough. I also added a method to optionally popup a window showing the error dump, which is extremely useful because you can see the full trace... to enable this just invoke the setPopupErrorDump(true) method inside your CFC.

Security Check (for jQuery version only): jQuery sends additional x-header data in the http request, so I added an option to check for it, to prevent access to the CFC if it's accessed by any method other than an XmlHttpRequest. To enable it just invoke the setCheckHttpRequestData(true) method inside your CFC. In fact, by default AjaxCFC ships with all the security methods turned off, for easier debugging. It is advisable to turn them on by calling: setAllowedVerbs('post'); setCheckHTTPReferer(true); setPopupErrorDump(false); setCheckHttpRequestData(true);

Serialization (for jQuery only): The new AjaxCFC is able to serialize using pure JS, JSON, or WDDX. I haven't fully benchmarked the performance differences, so for now just use the one you like the most.

Logging: I updated the log4javascript version, plus I added a little more information in the request logs.

Documentation will be included with the beta release.

Please note that despite some comments out there, this release does not mean that AjaxCFC switched to jQuery. This release is a branch using a different Ajax engine, and both versions will continue to be updated and supported.

That's it for now, please report any issues using RIAForge's bug tracker.

Enjoy.