4

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!

Nils Blum-Oeste
  • 5,608
  • 4
  • 25
  • 26
  • 2
    As a workaround we switched back to a fixed height canvas app. This way the iframe has it's own scrollbars and position:fixed works. But this approach has some other minor drawbacks. So I am still interested if something could be done to solve the issue with the fluid height app. – Nils Blum-Oeste Mar 14 '12 at 13:18
  • I attempted using the same method to position fixed elements in my Facebook iFrame and it seems like I face a new problem --> Seen in my developer console is "Uncaught SecurityError: Blocked a frame with origin "mydomain.com" from accessing a frame with origin "facebook.com". The frame being accessed set "document.domain" to "facebook.com", but the frame requesting access did not. Both must set "document.domain" to the same value to allow access." Did you encounter this too? – Brenda Nicole Tan Aug 26 '15 at 08:44

2 Answers2

2

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).

Rorok_89
  • 365
  • 1
  • 9
  • the app does not work: "Use of app "Bauhaus App" has been restricted Error while loading page from Bauhaus App" – Nils Blum-Oeste Jun 16 '12 at 13:27
  • I feared something like that would happen. I'll try to fix it this Monday, when I get back to the office. Meanwhile, if you have your own test app you can give it a try with the code I provided, if you wish. Cheers! – Rorok_89 Jun 16 '12 at 16:23
  • @nblumoe, I couldn't fix the permissions for my Facebook test app yet and I need to use it for another testing. Has the answer I provided been of any help? Did you try to use the code? – Rorok_89 Jun 20 '12 at 15:32
  • Rorok_89 I suppose you did not call any FB method to resize the canvas, right? This way the position:fixed does work because you still have scrollbars within your app iframe. If you load the facebook javascript SDK and call Canvas.setSize() or the autogrow() method the position:fixed element does not work anymore as it is supposed to work. Am I right? – Nils Blum-Oeste Jun 21 '12 at 07:37
  • So what you did is basically the same as what I did propose in the comment to my question: Just scrollbars for you iframe. Whether you did it by switching to a fixed height app or by not resizing in fluid mode does not matter in the end, result is the same. – Nils Blum-Oeste Jun 21 '12 at 07:39
  • @nblumoe, I think it does resize. My canvas settings are: -Page Tab Width: Narrow (520px) -Canvas Width: Fluid -Canvas Height: Fluid Maybe I didn't understand your question well, then, but I think I have the settings you wanted to work with. – Rorok_89 Jun 21 '12 at 08:12
  • Did you call any of the resize methods facebook javascript sdk provides? To be more specific: Have a look at this [screenshot](http://awesomescreenshot.com/06b8lbn10). Do you have the scrollbars inside your iframe? We want a position:fixed element without having these inside your iframe. Please let me know if you have a working solution where your iframe has the full width of it's contents and the only scrollbars are those of facebook (those would be at the margin of your browser window). – Nils Blum-Oeste Jun 21 '12 at 09:30
  • Ah, now I get what is going on. I think I do have some resizing methods called. The thing is, I'm using the Heroku default app to insert my contents and experiment with the app. So it is quite likely that the Heroku app does call some resizing methods from the sdk. I do have the scrollbars in the iframe, it seems. Sorry for the misunderstanding. Screenshot: http://i286.photobucket.com/albums/ll96/Rorok_89/Facebookappscreenshot.jpg – Rorok_89 Jun 21 '12 at 10:19
1

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.

Marius Seritan
  • 157
  • 2
  • 8