All geek questions in one place

Position: fixed in facebook canvas (iframe)

We would like to have a fixed DOM element with position: fixed in our facebook canvas app with canvas size. Since the application runs in a canvas iframe, a simple use of the css position: fixed does not work: the contents of the iframe do not see any scroll events from their facebook page.

The first approach to solving this issue was to ping facebook api and get the scroll position. Therefore, we put this in $ (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 works. However, this leads to poor user experience when the browser reboot button and mouse cursor flash when a call is made to the facebook api.

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

+4
source share
2 answers

I suspect this is due to the way you customize the HTML layout of the application. I did a quick test in my test application and it worked. The body of the document contains only a div with absolute positioning, which contains an anchor div with a position: fixed and some words so you can see the scroll. The code is as follows:

 <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 an example of work here (I just removed the restrictions by country, if for some reason you cannot access the application, tell me and I will check the settings again).

+2
source

Just to bring comments to the first answer: the method proposed by Rorok_89 does not actually work for the specific use case described in the question. It only works if overflow is enabled in the iframe.

I do not know how to solve the question asked by OP.

+1
source

Source: https://habr.com/ru/post/1400540/

More articles:


All Articles