disable mouse wheel scrolling while cursor over flex app?

Question

Is it possible to disable mousewheel scrolling on my webpage while the cursor is over my flex application?

My flex application is a map that allows user to zoom in and out using the mousewheel; however, when I put my flex app onto my webpage, the scrollwheel causes the page to scroll instead of zooming in and out...

Edit:

I have added sounds to my flex app and it tells me my mouse events are correct. I have also added an alertbox to the javascript so that I know the MyApp.initialize function is being called but the mousewheel is still scrolling the webpage instead of my flex app. This is the code I'm using and it isn't locking the scrollbar when I am on top of my flex application:

var bname;
var MyApp = {
   initialize : function() {  

      this.debugging = true;
      this.busyCount = 0;
      this._debug('initialize');
      bname = navigator.appName;
      //alert(bname + ‘ is browser’);
      document.getElementById('flashDiv').onload = this.start;
      if(window.addEventListener)/** DOMMouseScroll is for mozilla. */
      window.addEventListener('DOMMouseScroll', this.wheel, false);

      /** IE/Opera. */
      window.onmousewheel = document.onmousewheel = this.wheel;
      if (window.attachEvent) //IE exclusive method for binding an event
     window.attachEvent("onmousewheel", this.wheel);
      }
   , start : function() {
      window.document.network_map.focus();
      }
   , //caputer event and do nothing with it.
   wheel : function(event) {
      if(this.bname == "Netscape") {
         // alert(this.bname);
         if (event.detail)delta = 0;
         if (event.preventDefault) {
            //console.log(’prevent default exists’);
            event.preventDefault();
            event.returnValue = false;
            }
         }
      return false;
      }
   , _debug : function(msg) {
      if( this.debugging ) console.log(msg);
      }
   }; 

I have got to be missing something!?

Grassy

Answer 1

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;

/**
 * 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=mousewheeltrap for updates
 * This software is released under the MIT License <http://www.opensource.org/licenses/mit-license.php>
 * (c) 2009 spikything.com
 */

public class MouseWheelTrap {

    static private var _mouseWheelTrapped :Boolean;

    public static function setup(mainStage:Stage):void {

        mainStage.addEventListener(MouseEvent.ROLL_OVER, function():void{ 
            allowBrowserScroll(false); 
            }
        );

        //i added 'mx.core.FlexGlobals.topLevelApplication.'making it work better for flex. use 'stage' for flash   
        mainStage.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;}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:

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.php/2009/11/27/stop-simultaneous-flash-browser-scrolling/

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

Grassy

I have added the code directly into my document class, it does not even trigger the roll_over/roll_out events :( – Matusow

Answer 2

The answer would be to call justkevin's disabling code through an externalInterface call. on Application mouseOver call a javascript function to disable the mouse scroll wheel, and enable it on application mouseOut.

Swords

that might be over my head. I just spent 1 month 18 hour days learning and writing flex/as3/html code for a website...java is something I will have to learn next month. I'm exhausted! Can you possibly help me out with with implementing that? I would greatly appreciate it! – Grassy

Hey Phil. It isn't too rough. The simplest use would be to say ExternalInterface.call("javascriptFunctionName","argument1","argument2") Write a simple javascript test or few and you'll get a pretty good feel for what needs to be done. If you have any problems after a couple of days I'd be glad to help. – Swords

Well i've managed to get the java to initialize' however, it doesn't disable the browser scrolling. – Grassy

Still no luck with the browser scrollbar taking focus away from my flex. I can't zoom into my map using the wheel without that snippet of java. I checked some java forums today too but no reply. – Grassy

Answer 3

You can't do it from within Flex/Flash, but there are some ways to do it using javascript.

You'd need to put some javascript on your page with your Flash app. It may not work in all browsers.

Teteak

I can't get this to initialize. 1. I have saved the javascript file to my site. 2. <script src="../../Scripts/zinzout_enable.js" type="text/javascript"></script> it had some errors at first because of the ' punctuation but I fixed it. Dreamweaver says the java code is formatted correctly; however, I just cant initialize it. How do I initialize it? If this works it would be great! – Grassy

Are you certain you can't do it from within flex? I found a page that says its possible to call javascript from flex: help.adobe.com/en_US/Flex/4.0/langref/flash/external/… – Grassy

FYI, the link you supplied is broken now. – Liberty