Stopp Internet Explorer’s CTRL – MouseWheel

Jon — Wed, 22 Apr 2009 09:33:55 +0000

As a Flex developer I come in contact with all sorts of problems when I run my applications in Internet Explorer 7. One of the most annoying ones is the one where CTRL – MouseWheel will resize the Flex application area itself, even when the application is scaled to 100% * 100% of your browser window and has focus. This is impossible to accept and here is the solution to the problem.

Assuming that you’re working with Flex Builder, all you have to do is edit the index.template.html file a little bit. Such that it contains the following JavaScript.

function catchCtrlMouseWheel()
{
    if (window.event.type == "mousewheel" ) 
    {
        if (window.event && window.event.wheelDelta ) 
        {
            return window.event.ctrlKey ? false : true;
        }
    }
 
    return true;
}

And in the -tag:

MouseWheel Event on Mac

Jon — Tue, 14 Apr 2009 10:32:41 +0000

When working with Adobe Flex you may have encountered trouble when trying to get mousewheel functionality to work on Mac OSX. Even though Flex natively supports the MouseWheel event it does not trigger in the browsers that I have tried on Mac (Safari and FF3) – this is probably due to the OS or the browser “stealing” the MouseWheel event for its own purposes.

The solution for this is to get JavaScript to communicate with your Flex application and “forward” the MouseWheel event.

Gabriel @ Pixelbreaker has solved this with a really nice little implementation that he calls SWFMacMouseWheel. Read all about it here.

Step 1
Download the “source and demo” code found below the post. Move the file com.pixelbreaker.ui.osx.MacMouseWheel.as to your Flex 3 project.

Step 2
Create a folder called “js” in your html-template folder. Move the files swfmousewheel2.js and swfobject.js to that folder.

Step 3
In the html-template folder edit the index.template.html file to correspond with the file included in the zip you downloaded. It should contain roughly the following:

var vars = {};
var params = { scale:'noScale', salign:'lt', menu:'false' };
var attributes = { id:'testObject', name:'testObject' }; // give an id to the flash object
swfobject.embedSWF("test_as3.swf", "flashContent", "100%", "100%", "10.0.0", "playerProductInstall.swf", vars, params, attributes );
swfmacmousewheel.registerObject(attributes.id);

Don’t forget to include the two javascript files you copied to the js-folder.

Final step
In your application startup code invoke the following code:

import com.pixelbreaker.ui.osx.MacMouseWheel;
MacMouseWheel.setup( stage );

And you should be set to go.

Bagonca » MouseWheel

Stopp Internet Explorer’s CTRL – MouseWheel

MouseWheel Event on Mac