CODEWITHSUNDEEP
cssiframefacebook-appscss-positionfacebook-canvas
Nils Blum-Oeste
Nils Blum-Oeste

Reputation: 5598

Position:fixed in facebook canvas (iframe)

We would like to have an anchor DOM element with position:fixed in our facebook canvas app with a fluid canvas size. Because the app runs in the canvas iframe a simple usage of css position:fixed does not work: The iframe content does not see any scroll events from the surrounding facebook page.

First approach to solve this was to ping facebook api and get the scroll position. So we put this into $(document).ready():

# refresh position of feedback button to simulate position:fixed in iframe
refresh_timer = 1000
move_button = () ->
  # get scroll position from facebook
  FB.Canvas.getPageInfo (info)->
    # animate button to new position with an offset of 250px
    $('#fdbk_tab').animate({top: info.scrollTop+250}, 100)
# start interval to do the refresh
setInterval(move_button, refresh_timer)

In general this does work. However it results in a bad user experience as the browser reload button and mouse cursor blink when the call to facebook api is triggered.

Any suggestions on how to improve this or other ways to implement/mimic position:fixed within the iframe are highly appreciated!

Upvotes: 4

Views: 2585

Answers (2)

Marius Seritan
Marius Seritan

Reputation: 157

Just to summarize the comments to the first answer: the method suggested by Rorok_89 does not actually work for the exact use case described in the question. It only works if you have overflow enabled on the iframe.

I am not aware of any way to solve the question asked by the OP.

Upvotes: 1

Rorok_89
Rorok_89

Reputation: 375

I suspect it has something to do with how you set up the app HTML layout. I did a quick test in my test app and it worked. The body of the document just contains a div with absolute positioning, which contains the anchor div with position:fixed and some words so you can see the scrolling. The code looks like this:

<body>
<div style="width: 300px; height: 2000px; position: absolute; top: 0; background-color: yellow;">
    <a href="www.google.com">
        <div style="width: 60px; height: 20px; background-color: #000; position: fixed; top: 20px;">
            ANCHOR
        </div>
        1words<br/>
        1words<br/>
        words<br/>
        words<br/>
        words<br/>
        words<br/>
        2words<br/><br/><br/><br/>
        2words<br/>
        words<br/>
        words<br/>
        words<br/>
        words<br/>
        words<br/>
        3words<br/><br/><br/><br/>
        3words<br/>
        words<br/>
        words<br/>
        words<br/>
        words<br/>
        words<br/>
        4words<br/><br/><br/><br/>
        4words<br/>
        words<br/>
        words<br/>
        words<br/>
        words<br/>
        words<br/>
        words<br/><br/><br/><br/>
    </a>
</div>

You can see the example at work here (I just removed the country restrictions, if for any reason you cannot access the app tell me and I'll check the settings again).

Upvotes: 2

Related Questions