This entry examines how the JQuery Carousel object interacts with other Plug-ins, and how to combine those plug-ins with the Carousel functionality. I also cover an issue where the jCarousel plug-in does not apply functionality to non visible elements on load.

I have been using two different JQuery Carousel plugins for a while now. The slightly older jCarousel ( http://sorgalla.com/jcarousel/) and the jCarousellite plug-in ( http://www.gmarwaha.com/jquery/jcarousellite/ ). Both work well, and both allow you to scroll through content in 'Rich' manner.

The problem

Debugging

The solution

Instead we have to move our lightbox code to a position where it will be triggered on each Carousel movement. In that way the JQuery is applied to each newly visible element.

The code looks something like this:

By positioning the lightbox code inside the call back function it is applied to each element as they gain visibility.

An demo of this is here.

This article examines how you can create and integrate a Google site search into your site. We will query Google and return an XML packet, which we will translate and display within our sites framework.

I am using XML as I must parse the result myself for Accessability. There are a few different ways of returning result, including some really nice AJAX stuff. None of them are Accessable for disabled users though.

To start with go here: http://www.google.co.uk/sitesearch

You can setup a free or Business account. This allows you to specify which sites the search will index, and any exclusions or filtering rules you want. The main difference between the free and Business accounts is the control you have over advertising.

The first step to create a simply search form, the simple form below will submit a form value to a processing template that we will build below.

Next we need to create the template that will handle the form value, and process the results (page.cfm from the form above). The first step is to create a url string that we will use in a cfhttp request. This fires your form value to Google. We also specify that we want the return in an XML format. The http request is parsed using xmlParse.

In the next block of code we check that we successfully parsed the XML and that we have a valid Array. Then we loop over the results Array setting the values we want. Then display them on the page.

The returned XML packet has a lot more data in it than just the three values I am using, so you could expand on this.

Whilst building a new piece of functionality I have been trying to combine a JQuery carousel plug-in and the lightview prototype plug-in. This threw up an unexpected issue. Both libraries map the dollar ($) as their shortcut indicator. JQuery uses "$" as a shortcut as a replacement for "jQuery" and Prototype uses "$" as well.

It turns out that there is a JQuery command for exactly this issue. Wherever you include the JQuery library reference add another script code. The noConflict function maps which character you tell it as the short name for "JQuery".

Just remember to change your references to JQuery from "$" to "J", or whatever you assign it to.

Now both the Libraries can load into different namespaces.

If you have a framework that controls the URL in some way then you may have an issue when it comes to Google Analytics tracking. In this blog entry I will examine how to alter your GA tracking so that you can specify custom URL values to track. I will then apply this to a FuseBox framework.

Traditionally Google Analytics code tracks each page impression by capturing the URL and all values of the Query string, storing it in a cookie and sending it back to the Google search engine through a JavaScript call. When all your site / applications pages are "index.cfm" it may prove difficult to generate useful Analytics information.

In this example I am using a FuseBox framework. If you are unfamiliar with this, the premise is that all the templates use "index.cfm" and then pass through two parameters. The first is the component to use as a controller (we will use public.cfc) and the second value is the function name to call within that controller. So our URL may look like this:

In this case our framework will go to the controller/public.cfc and find the function "login". Google analytics will log this hit as "/index.cfm?go=public.login". This is not at all user friendly, and would be very difficult to represent usefully to a client in a report.

Instead we alter the Google Analytics code so that it is logging a pseudo URL, rather than the actual URL.

The Google Analytics code resides just before the end body html tag, at the end of your page. In the FuseBox example I am using one layout template, "lay_template.cfm" so I only need add it there.

Firstly call the Google Analytics code.

Next we will call the Google Analytics JavaScript that builds and sends the request. The pageTracker variable is created, and your Google Analytics code is added to it. Next we call the initData function. There seems to be confliction information online about whether this is required or not. Essentially it tells the Google Logging mechanism to prepare for a request. Next we will add a line that remove the need for a Fully Qualified Domain Name (FQDN). This has a negative impact on the next line of code, and must be run before the trackPageview code.

The trackPageview code is usually left empty, but in this case we are inserting the fuseaction that has been requested. So if we are following our example above this will read as "/login". You can have as long a string here as you require. IE it could be "campaign5/landingpage2". In this way Google will log the hit as you specify as this overwrites the URL cookie that Google normally creates.

This principle can also be used to track AJAX URL requests, as they do not create a unique page impression.

Whilst writing a ColdFusion based query to create a JSON response I thought I'd look up returning data values as a "Yes/No" string rather than "1/0". Then I wouldn't have to transform it in any way to use in the JSON build script.

The mySQL version allows you to do this by evaluating the value, and matching a string if the condition is met, like this:

This does not work in ColdFusion at all. An error is thrown:

After a little tweaking it seems that if you alias the field it does work. In the example code below I've simply aliased the field with its own name.

I'm not exactly clear why, as the error message above isn't all that helpful.

You could use a 404 ColdFusion template to handle missing templates, or the onmissingtemplate Application CFC function. Luckily I have a client with half a dozen sites all on the same server, with nothing else on it, so it makes more sense to do this in Internet Information Services.

404 templates are a handy way of masking any site errors or missing templates. Not only are they a cosmetic fix to nasty display errors but they can also seriously help your server security.

A recent incident where I was helping a friend setup a custom tag path on his server demonstrated this. He couldn't remember where the webroot was to point ColdFusion server at his custom tags directory. The default IIS 404 message will quite happily serve up a template telling anyone who cares to look where your webroot is, and half the other details of your server.

Begin by opening the IIS management console. Expand the list of websites in the left-hand pane of the console, and right-click on the icon for the website you want to customize. Choose "Properties" from the popup menu, and click the "Custom Errors" tab in the configuration window.

Enter the URL for the error template. At this point I was getting an error message "The path is not a local absolute path". The error is that windows is looking for a UNC path, so it needs a proceeding forward slash.

A few points to note in your custom 404 templates.

• Keep it simple. It isn't part of your site, its an error handler and should not really feature any functionality.
• 404 might mean something to us, but it probably wont to most users. Is there really any reason to display 404 all over the page?
• The url will be relative from where the error was thrown so hard code any url values used. IE CSS images or links to anywhere.
• Add logging. Either Google Analytics tracking, or what ever tracker you use. I also like to drop a cfmail request in there so that I know its gone wrong.

I've been experiencing issues with my development setup, so I thought I'd write a blog entry to wrap up my findings, and try and gauge what the community is running. In this article I will detail what I use in my development environment, and how it is set up.

I've recently had errors occurring in my Eclipse IDE. There have been some very frustrating SVN client version incompatibilities, so I thought I would re install it. It turns out this was a common error (menu options in subclipse were not available) based on an incompatibility between the subclipse plug-in and the Aptana studio.

A detailed fix is in this blog entry: https://radrails.tenderapp.com/discussions/problems/173-synchronize-view-broken-after-upgrading-to-radrails-203

Software setup

For Flex/AIR I use a standalone FLEX studio installation. This is pretty much a custom workspace in an Eclipse IDE. I only do this as I have had several issues trying to get FLEX installed into the regular Eclipse IDE.

I recently tried to switch to the 64 bit version of Eclipse, but it would not recognise my Java install, and from what I've read online you need to install a 64 bit version of Java. The only version of this I can find is flagged as "experimental" so I think I'll leave it well alone.

I've found it quite good to increase the default 256mb heap space in Eclipse to 512mb, there e is an article detailing how to edit the Eclipse ini file here: http://wiki.eclipse.org/FAQ_How_do_I_increase_the_heap_size_available_to_Eclipse%3F

Download links

CFEclipse downloads: http://trac.cfeclipse.org/wiki/InstallingCfeclipse

Aptana downloads: http://www.aptana.org/studio/plugin

Subclipse downloads: http://subclipse.tigris.org/servlets/ProjectProcess?pageID=p4wYuA

I stumbled upon an interested dilemma recently whilst building a search engine. The results of a search are returned, and can be viewed in a list or thumbnail view. The view toggle is a uses a JQuery function, so no persistent data is stored concerning a users current viewing option. The dilemma is how do you maintain the viewing mode across page reloads, such as for pagination, or filtering of the search results?

The views are both built, and toggled between using a JQuery function, like this:

This code will hide one of two div's based on a session variable. It also includes the code to toggle the div's with a link, like this:

The only way I could think of to persist the JQuery display selection was to store it as a server based session variable. I created a simple AJAX call and attached it to the toggle function, so that after each toggle the session variable was updated, like this:

In the template 'changedisplay.cfm' I simply update the session value to the opposite of its current value.

In this way the user can refresh or page through the result set and still maintain the same display. I'm really interested to see if anyone has done anything similar to this, or maybe taken a different angle.

Rather than writing out long winded table code to display your data in a tabulated fashion why not use the dataTables JQuery plugin to do it for you?

In this blog entry I'll be generating tables using a JQuery plugin, but I will also be generating the JQuery code from an XML document.

The theory behind the dataTables JQuery plugin is that when the template loads it makes an AJAX request to a remotely specified template. That template returns a JSON object of data which is formatted and used in a tabular display. This means that you can perfom filtering and sort functions inline, and the JQuery simply re submits the AJAX request, receiving new JSON each time. So no refreshing.

I'll be dealing with the auto generation of the JSON back end in the second part of this article. Here is how I setup the tabular display.

Build a standard html template, including the CSS and JQuery plugins.

Next we build our JQuery function. I wont go into massive detail about all the parameters and values being passed in here, but it is well documented on http://www.datatables.net/.

The really important column here is the "aoColumns" JSON data block. This specifies what fields are returned from your AJAX call, and parameters they must adhere to.

In this example we are anticipating that we will receive four columns of data back (Edit,Band,Genre and Fake Column).

Lastly we create a table with an ID of "example", as this is what the JQuery is looking for. This table must be formatted in a certain way, as the JQuery plugin will re write the specified elements.

The code also contains the header elements that will match the returned column values from the AJAX request. The last part of the table is displayed when the data is loading.

This all works well, but to extend it further I have altered the code to read from an XML document. The XML document Is loaded when the template starts, and the data fields and attributes are read, and looped over to create the JQuery code and table headers. In this way it is a generic table display template, driven from an XML document.

The XML doc:

Read the XML file and parse it out into an Array:

Use something like this to dynamically generate the JQuery and table values:

The JSON response is hard coded in this example, so the result will not filter or search. I'll handle that in article two.

There is a full example of this here.