We came across an error today with our drop down menu system that uses a PNG-24 semi transparent drop shadow image around the border where the transparency would appear black in IE 7 and IE 8. After searching and trying all possible fixes we found the solution to the problem and it was quite simple.

Our menu system uses jQuery (doesn't everything these days?), and had a nice fade in and fade out transition. jQuery handles the fade transitions by setting the opacity which IE does not like very much. So using the fadeTo() functions in jQuery is a no-no in IE. The solution, use hide() and show() instead. It's not as elegant but the transparency issue was fixed on all modern browsers.

Other solutions to the problem include:

1. Using a background colour instead of transparent on the style so you would do:

.my-transparent-stuff{background: #fff url('image.png') repeat-y scroll left top;}

instead of

.my-transparent-stuff{background: transparent url('image.png') repeat-y scroll left top;}

2. Using PNG-8/transparent gifs (hey, it's a solution)

3. Forcing IE8 into IE7 mode by adding the following meta tag:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

I still can't understand what Microsoft is doing!

I have always been one of those developers who like to "write my own stuff" because nothing produced by another person could ever be as good as mine! I'm sure the majority of developers out there feel the same way. But as they say with experience comes wisdom and I have come to realise that maybe the solution you are trying to solve has been solved by someone else and the cost of implementing your own solution is far greater than the cost of implementing something that has already been developed and in most cases battle tested. Now there are exceptions to this but I think that, and this is especially true for Javascript frameworks, you are better off using what's been built before and which has a proven track record.

I believe that using a Javascript framework is quite important in the current web development environment. These frameworks provide rich functions that allow developers to quickly and efficiently accomplish tasks that are quite difficult and/or tedious without them. The first time I looked at the source code for the Prototype JS library (http://prototypejs.org) I fell in love. Sam Stephenson is a god and has produced the most beautiful javascript code ever! I know that what he has done in the framework simply brings together a lot of pieces that have been scattered about the development community, but that library is simply AWESOME. There are a lot of people out there who will say it is too fat and overkill for most things which is the reason frameworks such as jQuery (http://jQuery.com), mooTools (http://mootools.net), dojo (http://dojotoolkit.org), Ext (http://extjs.com) and Adobe's Spry Framework (http://labs.adobe.com/technologies/spry/) have appeared. 

I personally use Prototype and jQuery in most projects, I love both of them. Prototype has, in my opinion much more flexibility but jQuery is really excellent as well and has many, many super features. I think all developers should seriously lookat these frameworks if you haven't yet, even if it's just to look at the source code and learn some excellent tricks!

This iteration of ColdFusion is absolutely wonderful. Now anyone can AJAX and look like a DHTML guru with just a few lines of code. A previous post outlined the problem of not being able to refresh the CFWindow content. CF8 uses the EXT js library as of version 1.1.1 (I think) which by default does not provide a way to refresh the content of an element without actually manipulating the body property of the BasicDialog object. In CF the problem is even more complicated because you cannot just destroy a window and recreate it. There is no means to directly do this, so you have to access the underlying Ext library and call the destroy() function on the dialog. However, if you try to create a new window with the same name you get a javascript error. This is because the object is cached in the ColdFusion.objectCache object. Now, this is a good thing but the problem is that you cannot destroy the window easily. I would think this is a common task and should have been added. To work around the problem, you have to remove the element from the cache...

// get a reference to the Ext object
var mywin = Coldfusion.Window.getWindowObject('my-window-1');

// destroy the window and remove the elements from the DOM
mywin.destroy(true);

// remove the element from the ColdFusion.objectCache
ColdFusion.objectCache['my-window-1'] = null;

This would allow you to recreate the window via script without any problems. I think this is a serious oversight and a function should be added to allow for this operation.

The ColdFusion.objectCache is a very handy tool and should have better documentation.

I was going crazy trying to figure out why my href in the cfgridcolumn tag was not working with the new CFGrid in html mode. Apparently the appendKey attribute of the CFGrid tag is set to TRUE by default and this forces the href attribute to be a valid url. If you change the appendKey to FALSE, javascript functions work in the cfgridcolumn tags just fine....

So:

<code>
<cfform>
<cfgrid format="html" name="gContentLibrary" pagesize="#request.maxrows#"
bind="url:..."
>
<cfgridcolumn name="title" href="javascript:makeRequest('viewlibraryitem',{gridid:'gContentLibrary'})" display="true" header="Object Title" width="250" />
</cfgrid>
</cfform>
</code>
will not work but
<code>
<cfform>
<cfgrid format="html" name="gContentLibrary" pagesize="#request.maxrows#"
bind="url:..."
appendKey = "no"
>
<cfgridcolumn name="title" href="javascript:makeRequest('viewlibraryitem',{gridid:'gContentLibrary'})" display="true" header="Object Title" width="250" />
</cfgrid>
</cfform>
</code>

will work.

I may be stupid but it took a long time for me to figure this out and I didn't even find a reference to this on Google....either, people aren't doing this or everyone is much smarter than I am! Anyway I hope it helps someone out there...

Recently I came across the situation where I wanted to refresh a cfwindow with a source tag that was bound to a hidden form field. When the value of the form field changed I wanted the window information to be reloaded, however since the value was being changed via javascript the onChange event was not being fired on the hidden field and so the cfwindow was not refreshing. I then decided to take another approach. I would use the ColdFusion.Window.create function and create a new window each time it is needed. In order to not have multiple instances of the window I would destroy the old window before creating the new one.

<code>
function getPageId()
{
return pageid;
}

function createWindow(name)
{

try
{
twin = ColdFusion.Window.getWindowObject(name);
twin.destroy(true);
}
catch (e)
{
// do nothing because the window does not exist
}
ColdFusion.Window.create(win, 'Edit Page Properties',
'test.cfm?id='+getPageId(),
{height:750,width:960,modal:true,closable:false,
draggable:false,resizable:true,center:true,initshow:true})

}
</code>

If I pass the same window name each time the window never refreshes! Even though pageid is changing. This seems to be because the window object is cached somehow. When I set the destroy(true) parameter another error comes up since the element is removed completely from the DOM. To work around this, each window created MUST have a unique name. If the name is not unique errors will occur since it seems that CF caches the name used for a window. I am not sure where and am in no mood to look for it at this point. Here is the code that works.

<code>
var winname = '';

function getPageId()
{
return pageid;
}

function createWindow(name)
{
win = name + "_os_" + Math.round(Math.random() * 10000000000);
try
{
twin = ColdFusion.Window.getWindowObject(winname);
twin.destroy(true);
}
catch (e)
{
// do nothing because the window does not exist
}
ColdFusion.Window.create(win, 'Edit Page Properties',
'test.cfm?pageid='+getPageId(),
{height:750,width:960,modal:true,closable:false,
draggable:false,resizable:true,center:true,initshow:true})
winname = win;
}
</code>

I am hopeful that there will come a time when Microsoft's IE team will learn that developers really need error messages that make some sense! I am working on this application that uses the Yahoo! UI library and in particular the menu widget. It works fine on Firefox and on IE on my local network but anything outside my network gives the following error:

Internet Explorer cannot open the internet site xxxxxxx. Operation Aborted

The reason for the error is that the DOM hasn't fully loaded before the Javascript on the page tried to manipulate it. It is solved by easily adding the required initilisation functions queued by the YUI library's event manager.