PDA

View Full Version : disable browser scrolling when cursor over Flex App?


Snickers
01-08-2010, 11:23 PM
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.

tadster
01-09-2010, 04:00 AM
you'll need to mess with the css:
make two classes for the body, and be sure the html has no scroll bars:

//css code
html{overflow:hidden;margin:0;}
body.scrollable{overflow:auto;}
body.unscrollable{overflow:hidden;}

a javascript function that toggles the classes

//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:

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.

Snickers
01-09-2010, 05:36 PM
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.


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.addEventLi stener(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.addEventLi stener(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.wh eelDelta){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();}e vent.returnValue=false;}}if(window.addEventListene r){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:


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!

tadster
01-09-2010, 06:06 PM
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:



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.addEventListene r('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