We're speaking at
CFUnited 2008:
CFUnited - The Premiere ColdFusion Technical Conference

Search

Calendar

SunMonTueWedThuFriSat
    123
45678910
11121314151617
18192021222324
25262728293031

Subscribe Enter your email address to subscribe to this blog. You'll receive an email when we write a new post.

Recent Entries Come On In, Rails-The Water's Warm
Shan's Simple Examples: File uploads with Flex and ColdFusion

Recent Comments Google Calendar API - Creating a new Calendar with ColdFusion
Steve Julian said: When and where are you going to post the finished CFC's ? Thanks [more]

Three Phases of Programmer Development
Pat Branley said: I normally think of those phase 2 people as 'programmers' and the phase 3 people as 'developers'. I... [more]

New Job Title: Front End Engineer
Sean Corfield said: Well, there's always the excellent Fusion Authority Quarterly Journal... [more]

Down To The Wire: HTTP Sniffers
Brian M said: I second the mention of the Charles Web Debugging Proxy that Tariq mentioned. It is fantastic. It s... [more]

New Job Title: Front End Engineer
Patrick said: Heya Sean. Good point. I never understood how they did things over there at SysCon, and I understand... [more]

Archives By Subject Business of Software (4) [RSS]
ColdFusion (318) [RSS]
Conferences (6) [RSS]
Databases (87) [RSS]
Flex & Flash (109) [RSS]
Fusebox (87) [RSS]
General Development (29) [RSS]
Google (9) [RSS]
Hardware (5) [RSS]
JVM & Java (132) [RSS]
Linux (20) [RSS]
Miscellaneous (254) [RSS]
Performance (8) [RSS]
SeeFusion (36) [RSS]
Shan's Simple Examples (6) [RSS]
User Interface (3) [RSS]
Windows (5) [RSS]

Archives By Poster Daryl Banttari (10)
Nat Papovich (29)
Patrick Quinn (36)
Shannon Hicks (22)
Steve Nelson (21)
Tyson Vanek (3)


bottom corner

Flex: Making Scrollbars Follow Focus

If you've ever created a form tall enough to require a vertical scroll bar in Flex, you may have not even have noticed that you have you scroll down manually when focus moves below the visible part of a window. Users, however, notice, especially if they don't have a scroll wheel on their mouse.

There doesn't seem to be any built-in or easy way to correct this, so I wrote a helper class to facilitate. I called it "com.webapper.autoscroll.AutoScroll", and it has one static function "autoScroll(event)" that should be called anytime a given container changes focus (focusIn) or finishes resizing (updateComplete).

To use it, simply add the following to the scrolling container (Canvas, Panel, etc) that contains the input fields you want to chase focus on:

updateComplete="AutoScroll.autoScroll(event);"
focusIn="AutoScroll.autoScroll(event);"

The autoScroll() method determines the y position of the current focus relative to the top of the container, and repositions its vertical scroll bar to ensure that the item with focus is completely visible, if necessary.

Source, library SWC, and demo are at: http://www.darylb.net/flexautoscroll/

Comments
mate, thankyou for this.

I've been bitten with this also. at least I have a fighting chance next time.
# Posted By barry.b | 2/3/08 5:11 AM
Thanks for this. I tried it out with Flex 3 and it works apart from when I try to scroll back up using the vertical scroll bar - my application flashes and refuses to let me scroll up. Could this be because my scrolling container is the <mx:Application> root element itself, or perhaps an incompatibility with Flex 3?
# Posted By Heather | 2/11/08 9:46 AM
If you scroll up, but a field still has focus, then it will return the scroll position to the field that has focus.

In that respect, it may work a little /too/ well.

You can disable that by removing the event handler on updateComplete, so that autoscroll only moves the scroll bar when focus actually changes.
# Posted By Daryl Banttari | 2/18/08 10:00 AM
Thanks man!
# Posted By Olrix | 2/19/08 7:50 AM

bottom corner