Как удалить полосы прокрутки с холста в Firefox - PullRequest
Новая
       40

Как удалить полосы прокрутки с холста в Firefox

1 голос
/ 31 октября 2011

Firefox добавляет полосы прокрутки на холст даже с телом, настроенным на переполнение: скрытый и выполнение FB.Canvas.setAutoResize () ;.Любой другой браузер скрывает полосы прокрутки.Когда я удаляю все содержимое со страницы, полосы прокрутки сохраняются.

Пример: https://apps.facebook.com/fbtestapppb/

Ответы [ 5 ]

4 голосов
/ 18 апреля 2012

С появлением временной шкалы Facebook изменился способ удаления полос прокрутки и полей страницы управления.Во-первых (и это самое главное), ваше тело должно быть установлено на ноль.Это гарантирует, что все браузеры обрабатывают настройки холста с абсолютного нуля.

В зависимости от параметра «Ширина вкладки страницы» (520px или 810px), который вы задаете в настройках приложений / страниц, вам потребуется настроить ширину в следующем коде.Этот блок должен быть помещен в заголовок страницы: 

<script type="text/javascript">
window.fbAsyncInit = function() {
FB.Canvas.setSize();
}
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>

Сразу под тегом Body добавьте следующий код: 

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({appId: 'YOUR APP ID', status: true, cookie: true, xfbml: true});
window.fbAsyncInit = function() {
  FB.Canvas.setSize({ width: 520, height: 1000 });
}
</script>

Не забудьте изменить «ВАШ APP ID».Также ширина: должна равняться либо 520, либо 810. Заданная высота: немного больше, чем требуется для разрешения переполнения.

Это решение было протестировано в IE, FF, Safari и Chrome!

1 голос
/ 21 августа 2012

Я решил эту проблему таким образом: 

  (function(d){
     var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement('script'); js.id = id; js.async = true;
     js.src = "//connect.facebook.net/en_US/all.js";
     ref.parentNode.insertBefore(js, ref);
  }(document)); 

  window.fbAsyncInit = function() {
        FB.init({
          appId      : app_id, // App ID
          status     : true, // check login status
          cookie     : true, // enable cookies to allow the server to access the session
          xfbml      : true  // parse XFBML
        });         

       var height_doc = $(document).height()+20; 
       FB.Canvas.setSize({height: height_doc});
  };

Это работает для меня.Я надеюсь, что помощь.

1 голос
/ 17 января 2012

Я добавил это к моему CSS, и это, похоже, работает: 

body {
    margin-top: -20px;
    padding-top: 20px;
}

Если вы уже добавили отступ в верхней части тела, вам, вероятно, потребуется добавить к нему 20 пикселей.

Полагаю, это потому, что firefox измеряет рост тела не так, как другие браузеры.

Протестировано в ff8, chrome16 и ie9 без отрицательных последствий.

0 голосов
/ 05 октября 2012

Забудьте о полях body и html (я имею в виду установить их на ноль).
Просто поместите весь ваш контент (включая верхний и нижний колонтитулы) в таблицу с одной ячейкой.
По крайней мере, все браузеры согласятся, как рассчитать высоту таблицы ...

как это: 

 <table id='m_table' width=100% align=left border=0 cellspacing=0 cellpadding=0>
    <tr><td valign=top bgcolor=white align=center style='position:relative;'>

и сделайте это: 

setTimeout(function() {FB.Canvas.setSize({height:(document.getElementById('m_table').offsetHeight+40)})}, 1000);

работает в IE, FireFox и Chrome / Safari ...

Вот код инициализации FB, если он вам нужен: 

window.fbAsyncInit = function() {
      FB.init({appId:'your_app_id',status:true,cookie:true,xfbml:true});fbApiInit = true;
      }

 function fbEnsureInit(callback)
  {
    if(!window.fbApiInit) setTimeout(function() {fbEnsureInit(callback);}, 50);
        else if(callback) callback();
  }
 fbEnsureInit(function() {
    FB.Canvas.scrollTo(0,0);
    var h = document.getElementById('m_table').offsetHeight+40;
   // console.log('setting size to '+h);
    FB.Canvas.setSize({height:h});
     setTimeout(function() {FB.Canvas.setSize({height:(document.getElementById('m_table').offsetHeight+40)})}, 1000);
  });
0 голосов
/ 31 октября 2011

Это известная проблема, связанная с приложениями для холста и вкладками страниц, и она уже давно раздражает.

https://developers.facebook.com/bugs/309917422436936

Некоторые люди упоминают о возможности использования FB.Canvas.setSize({ width: 700, height: 800 });или что-то вроде FB.Canvas.setAutoResize(500);, и это решает проблему.

Определенно ли вы установили опцию автоматического изменения размера iframe на панели управления приложениями?

...