explorers' club

explorations in dev, science, sci-fi, games, and other fun stuff!

Scrolling, iFrames & Facebook Apps

1 Comment

THE PROBLEM

I have a Flash SWF being loaded into a PHP page that then is being loaded into a Facebook canvas. The FB page has content in the right side ad area that creates a vertical scroll bar regardless of the height of my game content. My game’s canvas has a fluid height in order to fully fill the content area of the canvas

There is a zoom feature in my game that is triggered by the mouse wheel.

When using the mouse wheel (to zoom in my game), this is also getting picked up by the browser to scroll the content. So I’m getting a simultaneous zoom/scroll effect going on which is undesirable to say the least.

original Stackoverflow post - http://stackoverflow.com/questions/16302789/understanding-javascript-scrolling-iframes

THE SOLUTION (I THINK)

If  the FB canvas content has no overflow, then it will not trigger scroll events via the mouse.  It will however trigger mouse wheel events, which are necessary for triggering the scroll events via the mouse.  By cancelling and stopping the propagation of the mousewheel event, you are stopping that event from reaching into the non-iFrame content owned by Facebook.

<html>
<head>
    <script type="text/javascript">
        function init () 
        {
        }

    </script>
</head>

<body onload="init()">
    <script type="text/javascript">

        function onScrollHandler(event)
        {
            event.preventDefault();
            event.stopPropagation();

            //alert("scrolling");       
        }

    </script>

    <div id="content" onmousewheel="onScrollHandler(event)" onclick="alert('click')" style="position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; background-color:#b0c4de;">
        content area
    </div>
</body>

If you’d like to test this yourself, set up a FB app and use this as your app’s content HTML.

About these ads

One thought on “Scrolling, iFrames & Facebook Apps

  1. Pingback: Scrolling, iFrames & Facebook Apps | explorers' club |

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.