Iframe tabok és a scrollbar probléma
Sok esetben futunk bele olyan rajongói oldalakba facebookon, ahol a tabok tartalma mellett/alatt megjelennek a görgetősávok, jelezve, hogy nincs elegendő hely a megjelenítésre. Ez gyakran olyankor is jelentkezik, amikor ez az állítás nem igaz és rendesen kellene látnunk a kimenetet. Mi okozhatja ezt a problémát és mit lehet tenni ellene?
Amikor létrehozunk egy alkalmazást a fejlesztői felületen, az „On Facebook” menüpont „Canvas Settings” almenüjében megadhatjuk, hogy milyen legyen az iframe „mérete”. Választhatjuk a görgetősávok megjelenítését, vagy azt, hogy automatikusan növekedjen a megjelenítésre használt terület. A súgó szövegben láthatjuk, hogy az Auto-resize opció választása esetén, a FB.Canvas.setAutoResize javascript függvény meghívásával tudjuk befolyásolni a tab magasságát. Sok esetben nincs is szükség másra, elég csak ezt a kódot használnunk, a következőképpen:
helyezzük el az oldalunk forrásának head részében a következő sorokat:
<script type="text/javascript"> window.fbAsyncInit = function() { FB.Canvas.setAutoResize(); }
function sizeChangeCallback() { FB.Canvas.setSize(); } </script>
a </body> elé pedig ezt:
<div id="fb-root"></div> <script src="http://connect.facebook.net/hu_HU/all.js"></script> <script>
FB.init({ appId : 'YOUR APP ID', status : true, cookie : true, xfbml : true });
sizeChangeCallback(); </script>
(az app id-t ne felejtsük el lecserélni az adott alkalmazás ID-ra)
A másik lehetőség a scrollbarok elkerülésére, ha fix méretekkel dolgozunk, és csak az alapból rendelkezésre álló területre méretezzük a tabunk tartalmát (520x800px).
CSS-ben a body és html elemekről is vegyük le a padding és margin értékeket:
body, html{ margin: 0; padding: 0; }
Használjunk táblázatot a megjelenítéshez. Ne kövezzetek meg 🙂 Tudom, hogy ez egy elavult módszer, mégis több helyen olvastam, hogy akinél már semmi nem segített, végül ez jelentette a megoldást.
Ha valamilyen javascript kód is fut a tabunk forrásában, kimondottan figyeljünk rá, hogy ne legyen benne semmilyen szintaktikai hiba.
A leggyakrabban használt és leginkább működőképesnek tűnő megoldást az jelenti, ha egy kis késleltetéssel futtatjuk le a canvas méretét beállító függvényt:
<div id="fb-root"></div> <script language="javascript" type="text/javascript"> window.fbAsyncInit = function() { FB.init({ appId : 'YOUR APP ID', status : true, cookie : true, xfbml : true }); };
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
setTimeout("FB.Canvas.setAutoResize()",250);
}());
</script>
Sajnos ez a probléma kb 1 éve van jelen a facebookon és azóta sem sikerült egy tökéletesen működő áthidaló megoldást találni rá. Így előfordulhatnak olyan helyzetek, amikor ezek a lehetőségek sem segítenek.