Quick note about a problem with the cflayout tag – one of the Adobe’s attempts to play with the front-end. In my opinion – one of the places where ColdFusion no longer makes sense and should be replaced with a more robust alternative, like jQuery UI.

The problem: When using cflayout and cflayoutarea, if the content inside the cflayoutarea is dynamically redrawn, then the height of the layout area does not change. More details on the Adobe forum: https://forums.adobe.com/thread/565912

The solution:
Use the following styles:

<cflayout style="">
<cflayoutarea style="overflow-y:scroll; height: 450px;">

The drawback of this approach is that you need to hardcode the height of the layout area and accept the vertical scroll, but in some case this is exactly what you need.
The path to the solution was found on StackOverflow, as usual 🙂

I put together a small app using the following technologies:

• Twitter’s Bootstrap
• Google Maps Javascript API V3 #
• Google Fusion Tables
• HTML5 geolocation
• jQuery

I spent some time adding addresses of IKEA stores from some European countries into a Google Fusion table. Then I used the Google API to display the stores on map, as an overlay, with a country filter. I also used the HTML5 geolocation capabilities to show the nearest IKEA store. Additionally, I provided the user the option to search for the nearest IKEA store from any given location.
As I said before, I used the Bootstrap user interface, along with jQuery.

At this moment, the current version is 0.8. I will make the roadmap public shortly, but the idea is to include all the European stores in the version 1.0. Also, the version 2.0 will include a separate data source (in addition to the Fusion table) and, depending on the application popularity, a public web service + API to retrieve the data. Of course, I planned to make this app scalable enough to be used with any set of geographical points – not necessarily IKEA stores 🙂

So, here it is:

Inspired by the article A Design Is Only As Deep As It Is Usable featured in the e-book Modern Web Design & Development – I decided to make the blocks of code on this WordPress-powered blog expandable on mouse over. As you will see soon, unfortunately this is not an easy job.

1. Syntax Highlighting

Let’s get back a little. When it comes to syntax highlighting, you have 2 main options:

1. Alex Gorbatchev’s SyntaxHighlighter
2. GeSHi – Generic Syntax Highlighter

They both support ColdFusion syntax, and they are both featured in WordPress plugins. Because of the better functionalities, ease of use and because it simply looks better, when I started this blog I decided to use the SyntaxHighlighter – by installing the SyntaxHighlighter Evolved WordPress plugin. This allowed me to simply add ColdFusion code by simply wrapping the code in [ cf ] ...[ /cf ] markers. I solved the long lines problem by using the ‘wrap long lines’ option, as shown below:

2. Expand the code

(more…)