The Blackbox

I’ve recently started playing with Aptana and RadRails under Windows, where I encountered a problem where Aptana wasn’t able to install gems, and it popped up the installation window each time I started Aptana. It is logged as a known issue but I wanted it working, so I persevered.

The upshot of it is, I looked at the Rails console within Aptana at what commands were being run. Most of the where, for example:

gem install rails -l

All I did, is take each of the commands run automatically from the console and removed the -l option:

gem install rails

Everything installed perfectly in no time at all, and it’s all now up and running!

This is a very quick run through on how to get a basic jquery thickbox (blackbox) popup working, containing an image, and is based on the official demo page. The actual thickbox demo page has more advanced options available and full documentation – this is intended for those who don’t wish to know the full ins and outs of the functionality, but just want it working!

So let’s get started….

The first thing to do is download the latest version of jquery.

Next grab:

• thickbox.js (thickbox-compressed.js)
• thickbox.css
• loadingAnimation.gif

First, make sure the page you are trying to use the Thickbox on, has a valid DTD – it will not function correctly if you don’t. I as a rule, use the Strict DTD.

Next we include the javascript files we have downloaded, and the css file – taking note to replace the path and filenames if you downloaded the compressed versions:

<input type=”radio” name=”payRemainingBalance” value=”true” checked=”checked”/>
<script type=”text/javascript” src=”javascript/jquery.1.6.4.pack.js“></script>
<script type=”text/javascript” src=”javascript/thickbox-compressed.js“></script>
<link rel=”stylesheet” href=”css/thickbox.css” type=”text/css” media=”screen” />

Now that we have those included, we need to quickly edit thickbox.css, and tell it where to find the loadingAnimation.gif that we downloaded earlier. By default it looks for images/loadingAnimation.gif, so if this is where you’ve put it, you can ignore this step.

We should now be good to go, to try your thickbox out – there are a few ways to do this,the most common being from a text or image link, opening up the thickbox to contain an image, so we’ll use that as our example.

Text link:

<a href=”path-to-your/image.jpg” class=”thickbox”>Show Image</a>

Image link:

<a href=”path-to-your/image.jpg” class=”thickbox”><img src=”path-to-your/link-image.jpg” /></a>

The class=”thickbox” is the important bit, so make sure you’ve got that in there!

This should give you a working, (very) basic example of the thickbox. Once you’re happy with that, look at the rest of the examples, and you will find you can use it for various things, not just for showing pictures!

Having had some proper developers come in and work on our code, it’s backed up my cosntant moaning that our code base is in a pretty bad state. Lots of duplication of code all over the place, and lots of pages across multiple sites, which could be common.

The other thing, which one of my developers claims to be very good at and knows almost all there is to know about it, is CSS.

The contractors however, have pointed out many many problems with our css, and have recommended resetting the styles on the sites, before doing anything. I don’t claim to be good at CSS, I know the basics but apart from that, I get my hands dirty with the backend code – so this link proved very useful and insightful when it was given to me. Explains style resets very well, and I now know what we need to do…. the question is will it ever happen?!

Not sure that I would ever need this, however I would most certainly have liked to have been involved in creating it

JavaScript bra size calculator

As part of a recent project, I had to make a payment page clear, user friendly and intuative.  One of the key things was to only display fields when certain options were selected – in this case, when a radio button had a certain value.

<input type=”radio” name=”payRemainingBalance” value=”true” checked=”checked”/> the full amount ($amountDue).
<input type=”radio” name=”payRemainingBalance” value=”false” /> another amount. (Enter the amount you wish to pay in the field below)</td>
<div id=”anotherAmount”>
Another Amount: <input type=”text” name=”paymentAmount” id=”paymentAmount” maxlength=”8″ />
</div>

Using jQuery, this is very simple to do:

<script type=”text/javascript”>

$(document).ready(function(){
$(“input[@name='payFullAmount']“).click(function(){
$(“input[@name='payFullAmount']:checked”).val() == ‘false’ ? $(“#anotherAmount”).show() : $(“#anotherAmount”).hide();
});
});

</script>

As we don’t have an id on the radio button, we use the name of the input as the identifier, and a simple one liner to establish what the new value of the radio button is.

Due to the focus being on making it clear what is happening, it could be quite easy when you select the radio button, to miss what has changed on the page (a new input box appearing), so I decided to try and highlight the newly displayed input box by fading the background colour of the input box, in and out.  In order to do this in jQuery, you need the jQuery Color plugin.

<script type=”text/javascript”>

$(document).ready(function(){
$(“input[@name='payFullAmount']“).click(function(){
$(“input[@name='payFullAmount']:checked”).val() == ‘false’ ? $(“#anotherAmount”).show() : $(“#anotherAmount”).hide();

if ($(“input[@name='payFullAmount']:checked”).val() == ‘false’) {
$(“#paymentAmount”).animate({ backgroundColor: “#EFB559″ }, 1000).animate({ backgroundColor: “#FFFFFF” }, 1000).animate({ backgroundColor: “#EFB559″ }, 1000).animate({ backgroundColor: “#FFFFFF” }, 1000);
}

});
});

</script>

Our starting background colour is #FFFFFF, we fade to #EFB559 in 1 second, back to #FFFFFF in 1 second, to #EFB559 in 1 second, and finally back to #FFFFFF in 1 second.  This gives the effect of highlighting the field in an orange colour twice, hopefullyhelping the user notice what has changed on the page.

I had trouble finding any real information on this to pass on to the developers here, so I had to document it myself, to help them move on from their PHP background to understand things other than simple multi-dimensional arrays.

So here, our TreeMap structure is….

TreeMap tMap = new TreeMap();
tMap.put(1, “London”);
tMap.put(2, “New York”);
tMap.put(3, “Paris”);
tMap.put(4, “Sydney”);
tMap.put(5, “Geneva”);

Looping through this in Velocity and getting the values OR the keys is easy enough to do, and can be found through searching on Google, but pulling out both is hard to find. Presuming we’re passed the above TreeMap to the Velocity layer as$cities

// loop through the keySet of our TreeMap and assign
// the key to $cityKey
#foreach ($cityKey in $cities.keySet())

// using the current $cityKey, get the value assigned
// to that key and set it to the variable $city
#set ($city = $cities.get($cityKey))

Key: $cityKey
City: $city

#end

Very basic example, but hopefully it’s useful to someone!

I do wish people would stop spouting rubbish about AJAX. Clicking a link and making a div appear/disappear is not AJAX – how many times do I have to explain this to these people?

AJAX refers to not interfering with the display and behaviour of the existing page, whilst communicating with the server in the ‘background’. Once it’s received a response, then the page can be updated.

Yes clicking a link and making things appear/disappear might be done with Javascript, but it is not making an asynchronous call to the server for anything, which is quite a key part of the whole concept of AJAX!