andrew burke





RJS / AJAX Highlight Colouring in Rails

Posted on: 2007-04-30

I've been at the top of the development S curve on a big project for the last few weeks - getting closer and closer to that asymptotic 'done' line but never quite getting all the way.

This project I've been doing is the first where I've made extensive use of RJS effects and lots of swappable subsections on a page. It has really expanded the interface tools at my disposal. However, the documentation for how to do this properly is rather sparse and one has to pick up a lot of techniques from other people or by trial and error.

One quirk I found today involves the highlight effect. As made famous by 37Signals, it flashes the specified component on the page in yellow and then fades away. I'm highlighting a large part of a page to show that an update has occurred and the huge flash of yellow is a little overwhelming - so I've tried using different colours, but I haven't been able to make anything stick.

After poking around the effects.js file itself and playing with the FireBug console for a bit, I finally figured it out. To specify a colour, you need to use the hexadecimal code inside two sets of quotes. The code that works is like this:

page.visual_effect(:highlight, "supplier_#{}", :startcolor => "'#CCEECC'", :endcolor => "'#A8CFA3'")

This may be fixed in more up-to-date versions of Rails - I froze my version several months ago so I wouldn't have to develop to a moving target - but hopefully this will help you out if you're having similar trouble and find this through Google.

Previous: Looking Real Good!
Next: Update: Coffee