Home Tutorials Forums Articles Blogs Movies Library Employment Press

Go Back   ActionScript.org Forums > Flex > Flex 2, 3 & 4

Reply
 
Thread Tools Rate Thread Display Modes
Old 01-08-2010, 11:23 PM   #1
Snickers
Registered User
 
Join Date: Dec 2009
Posts: 11
Default disable browser scrolling when cursor over Flex App?

Is it possible to disable browser scrolling when the cursor is over the flex application? I am using flex 4 beta but everything from flex 3 seems to work so far...

I can get my flex to fire off a javascript but I don't know the javascript code to disable browser scrolling.
Snickers is offline   Reply With Quote
Old 01-09-2010, 04:00 AM   #2
tadster
tadster
 
tadster's Avatar
 
Join Date: Feb 2009
Location: Texas
Posts: 2,111
Default

you'll need to mess with the css:
make two classes for the body, and be sure the html has no scroll bars:
Code:
 
//css code
html{overflow:hidden;margin:0;}
body.scrollable{overflow:auto;}
body.unscrollable{overflow:hidden;}
a javascript function that toggles the classes
Code:
//javascript 
function toggleScrollable(){

var theBody = document.getElementsByTagName("body")[0];
(theBody.className == "scrollable") ? theBody.className = "unscrollable" : theBody.className = "scrollable";

//you can also use .setAttribute("class", "scrollable"); or unscrollable
//but i think className works cross browser
}
in the ActionScript:
ActionScript Code:
stage.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler); stage.addEventListener(MouseEvent.MOUSE_LEAVE, mouseLeaveHandler); private function mouseOverHandler(e:Event):void {     ExternalInterface.call("toggleScrollable"); } private function mouseLeaveHandler(e:Event):void {     ExternalInterface.call("toggleScrollable"); }

note, that your not disabling scrolling in this case, but actually disabling the scrollbars.
so the page can still be scrolled with the middle mouse button.
your wrapper would also need to be built with all this in mind.
but something like that could work for what you want.
__________________
www.actiontad.com - ActionScript and JavaScript sitting in a tree...
tadster is offline   Reply With Quote
Old 01-09-2010, 05:36 PM   #3
Snickers
Registered User
 
Join Date: Dec 2009
Posts: 11
Default

I need scrollbars for my html page. The page is longer than the screen. I luckily...after a week of working on it, found the following code:

This applies to AS3 flex/flash. Use the following code to allow mousewheel controls within flex/flash swf. it will scroll browser when mouse cursor is outside of flex/flash swf.


Code:
package com.custom
{
import flash.display.Stage;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.external.ExternalInterface;
//i added 'import mx.core.Application' making it work better for flex remove for flash
import mx.core.Application;

/**
* MouseWheelTrap - Simultaneous browser/Flash mousewheel scroll issue work-around
* @version 0.1
* @author Liam O'Donnell
* @usage Simply call the static method MouseWheelTrap.setup(stage)
* @see http://www.spikything.com/blog/?s=mou... for updates
* This software is released under the MIT License <http://www.opensource.org/licenses/mi...>
* (c) 2009 spikything.com
*/
public class MouseWheelTrap {
static private var _mouseWheelTrapped :Boolean;
public static function setup(stage:Stage):void
{

//i added 'mx.core.FlexGlobals.topLevelApplication.'making it work better for flex. use 'stage' for flash
mx.core.FlexGlobals.topLevelApplication.addEventListener(MouseEvent.ROLL_OVER, function():void
{
allowBrowserScroll(false);
}
);

//i added 'mx.core.FlexGlobals.topLevelApplication.'making it work better for flex. use 'stage' for flash mx.core.FlexGlobals.topLevelApplication.addEventListener(MouseEvent.ROLL_OUT, function():void
{
allowBrowserScroll(true);
}
);
}

private static function allowBrowserScroll(allow:Boolean):void
{
createMouseWheelTrap();
if (ExternalInterface.available)
{
ExternalInterface.call("allowBrowserScroll", allow);
}
}
private static function createMouseWheelTrap():void
{
if (_mouseWheelTrapped) {return;} _mouseWheelTrapped = true;
if (ExternalInterface.available)
{
ExternalInterface.call("eval", "var browserScrolling;function allowBrowserScroll(value){browserScrolling=value;}function handle(delta){if(!browserScrolling){return false;}return true;}function wheel(event){var delta=0;if(!event){event=window.event;}if(event.wheelDelta){delta=event.wheelDelta/120;if(window.opera){delta=-delta;}}else if(event.detail){delta=-event.detail/3;}if(delta){handle(delta);}if(!browserScrolling){if(event.preventDefault){event.preventDefault();}event.returnValue=false;}}if(window.addEventListener){window.addEventListener('DOMMouseScroll',wheel,false);}window.onmousewheel=document.onmousewheel=wheel;allowBrowserScroll(true);");
}
}
}

}

Within your main flash document "frame 1 or where ever" or in your main flex mxml file, place the following:


Code:
import com.custom.MouseWheelTrap;
MouseWheelTrap.setup(stage);

you may visit the website where I stumbled upon this by visiting the following URL:
http://www.spikything.com/blog/index....

A weeks worth of work finally solved in 5 minutes...gotta love programming!

Last edited by Snickers; 01-09-2010 at 05:37 PM. Reason: added reference
Snickers is offline   Reply With Quote
Old 01-09-2010, 06:06 PM   #4
tadster
tadster
 
tadster's Avatar
 
Join Date: Feb 2009
Location: Texas
Posts: 2,111
Default

Hey! thats neat! I can use something like that as well! I'm glad you found it

a little minor thing, it will help performance a little bit... most people don't realize it, but instead of using eval you can do this:

ActionScript Code:
var scrollControlJavaScript:XML = <script> <![CDATA[ function () { browserScrolling = false; allowBrowserScroll = function(value){browserScrolling=value;}; function handle(delta){if(!browserScrolling){return false;}return true;}; function wheel(event){  var delta=0;  if(!event){event=window.event;}  if(event.wheelDelta){     delta=event.wheelDelta/120;if(window.opera){delta=-delta;}  }else if(event.detail){delta=-event.detail/3;}  if(delta){handle(delta);}  if(!browserScrolling){    if(event.preventDefault){event.preventDefault();}    event.returnValue=false;  } }; if(window.addEventListener){window.addEventListener('DOMMouseScroll',wheel,false);} window.onmousewheel=document.onmousewheel=wheel; allowBrowserScroll(true); } ]]> </script>; ExternalInterface.call(scrollControlJavaScript);

So that's pretty much the same script Liam has set up, but by putting it in an XML variable, it can remain properly formatted, and there's no need for "eval" it can just get called directly that way.
eval should be avoided whenever possible, so i thought it's important to note the xml possibility. But, the code works perfectly as it already is.

awesome stuff, i knew nothing about window.onmousewheel and such javascript
__________________
www.actiontad.com - ActionScript and JavaScript sitting in a tree...
tadster is offline   Reply With Quote
Reply


Thread Tools
Display Modes Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 03:25 AM.

///
Follow actionscriptorg on Twitter

 


Powered by vBulletin® Version 3.8.5
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.
Ad Management plugin by RedTyger
Copyright 2000-2013 ActionScript.org. All Rights Reserved.
Your use of this site is subject to our Privacy Policy and Terms of Use.