?
Solved

In Flex with actionscript how do I move to top of application space during StateChangeEvent

Posted on 2009-02-16
6
Medium Priority
?
495 Views
Last Modified: 2013-11-11
I have a flex application which often has a height taller than the visible space in the browser window (say 2200 pixels high with a browser window 1000 pixels high).  Buttons toward the bottom of the screen use a click handler to change the currentState to a new view.  The view changes - but the visible space stays put.  I'd like it to jump back to the top of the application.

I can listen for a StateChangeEvent... but have no idea how to move the browser scroll bar back to the top.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
  <mx:states>
    <mx:State name="export">
      <mx:AddChild relativeTo="{canvas1}" position="lastChild">
        <mx:Label text="Success!!!" fontSize="22" x="20"/>
      </mx:AddChild>
      <mx:AddChild relativeTo="{canvas1}" position="lastChild">
        <mx:Label text="If you don't see 'Success' you failed..." fontSize="22" x="20" y="1970"/>
      </mx:AddChild>			
    </mx:State>
  </mx:states>
  <mx:Script>
    <![CDATA[
      import mx.events.StateChangeEvent;
      public function handleStateChange(event:StateChangeEvent) :void
      {
        // Code goes here...
      }
      private function initApp():void
      {	
        addEventListener(StateChangeEvent.CURRENT_STATE_CHANGE,handleStateChange);
      }
    ]]>
  </mx:Script>
  <mx:Canvas width="978" height="2500" id="canvas1">
    <mx:Button id="mainNavDash" label="Send me to the top!!!" width="247" height="68" x="20" y="2000" click="currentState='export'"/>
  </mx:Canvas>
</mx:Application>

Open in new window

0
Comment
Question by:bittermonk
  • 4
  • 2
6 Comments
 
LVL 19

Expert Comment

by:Jones911
ID: 23654778
You mean scroll the whole browser window?  If so I think your goign to have to use some java script to do it.
0
 

Author Comment

by:bittermonk
ID: 23656032
Jones,
Yea - I figure Javascript is necesary... but still can't seem to find an answer.  This code strip adds the event handler using flash.external.ExternalInterface.

In the HTML template I added:

<script language="javascript">
      function toTop() {
              self.scrollTo(0, 0);
      }
</script>

It doesn't work.  The script works if I'm not using Flex.  

However if I use an alert like this:

<script language="javascript">
      function toTop() {
              alert("message received");
      }
</script>

It will work.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="initApp()">
  <mx:states>
    <mx:State name="export">
      <mx:AddChild relativeTo="{canvas1}" position="lastChild">
        <mx:Label text="Success!!!" fontSize="22" x="20"/>
      </mx:AddChild>
      <mx:AddChild relativeTo="{canvas1}" position="lastChild">
        <mx:Label text="If you don't see 'Success' you failed..." fontSize="22" x="20" y="1970"/>
      </mx:AddChild>                    
    </mx:State>
  </mx:states>
  <mx:Script>
    <![CDATA[
      import mx.events.StateChangeEvent;
      import mx.collections.ArrayCollection;
      import flash.external.*;
 
      public function handleStateChange(event:StateChangeEvent) :void
      {
			flash.external.ExternalInterface.call("toTop");
      }
      private function initApp():void
      { 
        application.addEventListener(StateChangeEvent.CURRENT_STATE_CHANGE,handleStateChange);
      }
    ]]>
  </mx:Script>
  <mx:Canvas width="978" height="2500" id="canvas1">
    <mx:Button id="mainNavDash" label="Send me to the top!!!" width="247" height="68" x="20" y="2000" click="currentState='export'"/>
  </mx:Canvas>
</mx:Application>

Open in new window

0
 

Author Comment

by:bittermonk
ID: 23656092
I've loaded the app sample that doesn't work here with view source:

http://www.datatramp.com/flex/scrollTest.html
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:bittermonk
ID: 23663394
Best I can tell with firebug the scroll bar is a flash scroll bar - not HTML... so the answer is not JavaScript.  
0
 

Accepted Solution

by:
bittermonk earned 0 total points
ID: 23663829
Figured it out...

private function initApp():void
{      
  application.addEventListener(StateChangeEvent.CURRENT_STATE_CHANGE,handleStateChange);
}

public function handleStateChange(event:StateChangeEvent) :void
{
  application.verticalScrollPosition = "0";
}

0
 
LVL 19

Expert Comment

by:Jones911
ID: 23663921
Nice.  Thanks for posting the solution aswell.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I know the transition can be hard. We got used to the ease of use ActionScript 2 had, but honestly, it became problematic later on, especially if designers were involved in the project and found it easy to add code as they saw fit. So, this artic…
There are times in your Flash CS4 application when you want more than a simple pointer or a hand, and it's hard to find an ideal walk-through to tell you what to do.  I spent a few days recently learning my way around making custom cursors in Flash,…
In this tutorial viewers will learn how to create a basic motion tween animation in Flash Open a new document in Flash: Draw/import an image: Press CTRL + F8 to convert it into a graphic symbol: Select a frame (how long you want the tween to last): …
The goal of the tutorial is to teach the user how to how to load their YouTube profile onto Flash Media Live Encoder.
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question