Stillnet Studios

The other day I discovered that the img tag has an error event. This can be used to automatically load a fall back image when the main image fails for some reason. We encounter this in our dev sites sometimes, because the data is often not 100% correct. For example, our application may ‘think’ there is an image for a product (according to the database), so it writes out an img tag for it. But the image file does not actually exist. So we may end up with a broken image icon, or depending on the browser there may be no indication at all that something is wrong. The tester may get confused as to what’s gone wrong. So I added this code to show an ‘image file does not exist’ image:

<img src="#productImage#" onerror="this.src='/images/icons/imageDoesNotExist.png'" >

That’s it. Be careful that in your error handling code you point to an image file that really exists, otherwise you could go into an infinite loop. One way to be safe regarding that would be to call a function, and remove the onerror attribute so that it only gets fired once.

<script>
function imageError(element) {
	element.onerror='';
	element.src='/images/icons/imageDoesNotExist.png';
	}
</script>

<img src="#productImage#" onerror="imageError(this)">

You could even use this to report a broken image:

<img src="#productImage#" onerror="this.src='logBrokenImage.cfm?image=' + this.src" >

The onerror event is supported in all major browsers. The other tags that support onerror are object, script, and style.

One of the problems I looked into this week was why some items on our site that used to be in bold were no longer displaying as such. Viewing the source showed me that the text was indeed surrounded by <strong> tags.

Using the awesome Firebug extension for Firefox, I could see that the ext-all.css file was disabling the font-weight on the strong tag. This was quite surprising to me!

The ext-all.css file will automatically be included on your page whenever you use almost any of the UI features such as cfgrid, cflayout, etc.

You can easily reproduce the problem with this minimal code:

<cflayout type="tab"></cflayout>	
<strong>This should be bold but its not.</strong>

You can fix the problem by adding this to your site’s style sheet, if you have one:

strong { font-weight: bold; }

If you don’t use a separate style sheet you can just put it directly into your page like this:

<style type="text/css">
strong { font-weight: bold; }
</style>

Hopefully this can be fixed before 9.01 comes out. I think its a pretty big deal, it disabled tons of bold content on our site. A lot of our content is created using the FCK rich text editor, which uses strong tags to indicate bold. I’ve file a bug report with Adobe, you can vote for this bug here: http://cfbugs.adobe.com/cfbugreport/flexbugui/cfbugtracker/main.html#bugId=82156

After looking through the EXT documentation, I think this css originates with the EXT group. But when Adobe repackages EXT into CF, they need to either override this style it or take it out of the css file completely.

A while back I wrote a post explaining how to wrap the tabs generated by the new cflayout tab in ColdFusion 8.

The tabs generated by ColdFusion 9 are completely different, since they use Ext version 3. ColdFusion 8 used Ext 1.

The tabs in ColdFusion 9 do not wrap by default, but they do automatically add scroll controls so you can scroll through the long horizontal line of tabs. If you’d rather have them wrap into multiple lines, this little bit of CSS will do it:

.x-tab-panel ul.x-tab-strip {
    width: auto !important;
}

One of the things I’ve noticed as I’ve been working on our ColdFusion 9 upgrade is that many of the UI components look different than they did in ColdFusion 8. In many cases I’m sure this won’t be a problem. But my user base is fairly picky, and I think the CF8 to CF9 transition should be seamless to them. The tabs in CF9 look quite a bit different than they do in CF8.
Continue reading ‘Making ColdFusion 9 tabs look similar to CF8 tabs’ »

If you’ve used the new CF8 UI features to create tabs, you may have run into an issue when you have a lot of them. By default the tabs will not wrap. Take this snippet of code for example. I’ve added a red border on this 300 pixel div so you can see the tabs won’t wrap inside of it:

<div style="font-family: arial; width: 300px; border: 1px solid red;">
<cflayout type="tab" name="myTabs">
  <cflayoutarea name="january" title="January 2009">
     <p>January</p>
  </cflayoutarea>
  <cflayoutarea name="february" title="February 2009">
     <p>February</p>
  </cflayoutarea>
  <cflayoutarea name="march" title="March 2009">
     <p>March</p>
  </cflayoutarea>
  <cflayoutarea name="april" title="April 2009">
     <p>April</p>
  </cflayoutarea>
</cflayout>
</div>

Imagine that 300 pixel div is your normal content area – it could be a table or just the width of your browser. Take a look at what it produces in your browser:

In ColdFusion 8 (this might change in CF9?) the tabs generated by cflayout are table data cells. It would be pretty hard to cause table data cells to wrap within a set of <tr></tr> tags wouldn’t you think? It actually is possible though. If you add this snippet of CSS:

<style type="text/css">
.x-tabs-strip tr {display:block}
.x-tabs-strip td {display:block; float:left}
.x-tabs-strip .on .x-tabs-inner {padding-bottom:4px}
</style>

You’ll see the tabs now look like this:

If you want to force the tabs to be a specific width, add one more line:
<style type="text/css">
.x-tabs-strip tr {display:block}
.x-tabs-strip td {display:block; float:left}
.x-tabs-strip .on .x-tabs-inner {padding-bottom:4px}
.x-tabs-wrap table {width:400px}
</style>

In most JavaScript frameworks tabs are done using list elements (<li> tags) inside an unordered list (<ul> tag). This approach is much more flexible. It will be interesting to see what changes are made to the html generated by the layout tags in ColdFusion9.

Update 1/4/2010 – The method described above does NOT work in CF9. The tabs generated in CF9 are done using a much newer version of EXT. They are no longer based on table data cells, instead they use list items ( <li> tags), like most tab implementations. Use this CSS to wrap the tabs in CF9.