Nialls Blog

I came across an issue yesterday where I wanted to control the alignment of certain columns in an HTML data grid using the ColfFusion \ ExtJS CFGRID.  At first I tried the "dataalign" and "headeralign" attributes of CFGRIDCOLUMN but after checking the docs it turns out that these are only available with grid formats applet \ flash.

Without delving into the ExtJS docs, I found a really simple method of doing this without having to write one line of Javascript.

<style type="text/css">
    .x-grid-col {text-align:right;}
    .x-grid-col-0 {text-align:left;}
    .x-grid-col-1 {text-align:left;}
</style>

 You can also update just the column headers using a similar method. 

<style type="text/css">
    .x-grid-hd {text-align:center;}       
    .x-grid-hd-0-0 {text-align:left;}      
    .x-grid-hd-0-1 {text-align:left;}
</style>

Credit goes to the following post http://www.webtrenches.com/post.cfm/quick-and-easy-column-alignment-for-cfgrid by @spraguey

Thanks!

I was working on a form that had dynamic elements based on a users selections.

Each form element has a help context icon that provides users with information on what type of information is required for each particular field.

The issue I had was, I found my help icons and also calendar images, for jQuery datepicker elements, jumping all over the form when elements were being toggled.  Another behaviour was that when a calendar element was selected, the animation would cause the icons to return to normal.  Not behaviour I wanted the users to have to just deal with, so I started on implementing a solution. 

Read more...

All, Just to let you know that for jQuerys 4th Birthday - the team have released a new Major version of the JS Library. More details can be found here: jQuery v1.4

Everyone knows how much of a pain it is to debug and test stuff in IE - especially for cross browser compatability and JS/AJAX errors or callbacks.

For development purposes - the following company provide a few nice solutions that could help with developing web applications in a number of versions of Internet Explorer.

DebugBar DebugBar: Is a toolbar which offers HTML DOM Tree view, HTTP and HTTPS Headers, page cookies view, HTML validation, JS Methods view, JS Execution etc. for Internet Explorer.

Companion.JS Companion.JS: Javascript debugger for IE - with detailed error reporting, Firebug like console logging, Javascript object inspection - enough said.

Last but not least...

IETester IETester: Allows for the rendering of web pages using the rendering and Javascript engines of IE5.5, IE6, IE7 and IE8 on Windows and Vista.

These are probably worth checking out as a solution to aid development and testing within Internet Explorer.

Jon Hobbs-Smith of tvi-web design recently posted a great article on his 25 top tips for jQuery.

Even though they might not all apply - there are some great little tips that we can apply to existing applications.

You can read the article here: 25 Excellent jQuery Tips