Friday, May 14, 2010

Highlight The ScrollBar Track

I'm not sure what this feature is called, but have you seen in Google Chrome when you search the current web page for a certain phrase, the vertical scroll bar will be highlighted showing you all the locations of that phrase? See the screenshot on the right for an example of what I mean.  In front of the track, but behind the scrollbar thumb are lines showing you were the search results are located. It's a nice little feature that I find quite helpful.

I've implemented the same thing in Flex for showing the scrollbar track highlighting when words in a TextArea are highlighted, and when items are selected in a List (it should work for a DataGrid too, but I haven't tested it).

The nice thing about my implementation is that it is very simple to set up.  All you have to do is set the verticalScrollBarStyleName property on your List, DataGrid or TextArea, and then create your CSS to set the trackSkin style to one of my two custom skins and it will all work.
.highlightList {
    track-skin: ClassReference("skins.HighlightListScrollTrackSkin");
.highlightTextArea {
    trackSkin: ClassReference("skins.HighlightTextAreaScrollTrackSkin");

<mx:List verticalScrollBarStyleName="highlightList"/>

The text highlighting in the TextArea is done using some useful code that I found on this blog:
How to Highlight the Text in Flex.
I slightly modified the com.components.BlockTextArea class to make it work with my skins.HighlightTextAreaScrollTrackSkin class.

Here's the example (right click to View Source):

You can also set two more styles if you want to customize the color and alpha transparency of the highlighting:
highlight-color and highlight-alpha. Just add it to the css classes shown above.


Gaini Rajeshwar said...


I am trying to use your component. My text area holds htmlText instead of text. will this work with htmlText property of textarea?

Chris Callendar said...

Yes it works fine whenever I've used html inside TextAreas.

Gaini Rajeshwar said...

Yes, it is working fine.

I have one more question. Can we have previous/next kind of facility in this?.

When i click on 'next' it should move to the next occurance of that word in next area and same rule for previous.

Any suggestion on how to do that?

Gaini Rajeshwar said...

Also, can we have different color for track and different color highlight?

Chris Callendar said...

To color the highlight there are two styles that I mention above: highlight-color and highlight-alpha. To change the color of the track you'll have to look at the Styles available for the Flex VScrollBar. In Flex 4/spark you probably have to skin the ScrollBar in order to change the track colours.

As for the previous/next functionality, you might try working with the BlockTextArea class. I'd suggest having a currentIndex property that keeps track of which occurrence you're on.

Here's a really quick version of what might work, you can work out the finer details yourself:

public function set currentIndex(index:int):void {
var lines:Array = blockLines;
if ((index >= 0) && (index != _currentIndex) && (index < lines.length)) {
this._currentIndex = index;
var line:Number = lines[index];
var max:Number = textField.numLines;
var pos:Number = Math.ceil((line * maxVerticalScrollPosition) / max);
verticalScrollPosition = pos;