tag:blogger.com,1999:blog-865923359735383241.post5775434944567212375..comments2023-10-29T07:27:09.012-06:00Comments on Ccna final exam - java, php, javascript, ios, cshap all in one: How to remove scrollbars from Facebook iFrame applicationUnknownnoreply@blogger.comBlogger10125tag:blogger.com,1999:blog-865923359735383241.post-43285186189348467372012-05-31T19:27:19.415-06:002012-05-31T19:27:19.415-06:00I found the perfect solution! Make sure to put the...I found the perfect solution! Make sure to put the following CSS code into the <head> area:<br /><br /><style>*{margin:0;padding:0;}</style><br /><br /><br />The scrollbars are actually shown because there is a default padding or margin given. Hope I could help!Userhttps://www.blogger.com/profile/11557173689529910046noreply@blogger.comtag:blogger.com,1999:blog-865923359735383241.post-92016637135184828052012-05-31T19:27:15.792-06:002012-05-31T19:27:15.792-06:00Apart from this code:
window.fbAsyncInit = funct...Apart from this code: <br /><br />window.fbAsyncInit = function() {<br /> FB.Canvas.setAutoResize();<br />};<br /><br /><br />Also update Canvas Height setting in FB developer app settings: <br /><br />Set canvas height to Fixed instead of Fluid. This will remove horizontal and vertical scroll bars.Userhttps://www.blogger.com/profile/11557173689529910046noreply@blogger.comtag:blogger.com,1999:blog-865923359735383241.post-53002144941141675562012-05-31T19:27:13.704-06:002012-05-31T19:27:13.704-06:00Being frustrated about this problem of Firefox for...Being frustrated about this problem of Firefox for a long time, finally found the best solution, which is here from Roses Mark. She proposed several ways, however only the body onload stably removes scrollbar in firefox 10. <br /><br /><html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml"><br /><head><br /><script type="text/javascript"><br />function framesetsize(w,h){<br />var obj = new Object;<br />obj.width=w;<br />obj.height=h;<br />FB.Canvas.setSize(obj);<br />}<br /></script><br /></head><br /><body onload="framesetsize(500,3300)"> <!--specify the height and width for resize--><br /><div id="fb-root"></div> <!--this div is required by the Javascript SDK--><br /><div style="height: 2400px"><br />//Your content<br />//Goes here<br /></div><br /><script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script><br /></body><br /></html>Userhttps://www.blogger.com/profile/11557173689529910046noreply@blogger.comtag:blogger.com,1999:blog-865923359735383241.post-49815995713436958482012-05-31T19:27:11.949-06:002012-05-31T19:27:11.949-06:00I've tried everything you said and looked at t...I've tried everything you said and looked at this two links either ( CSS + FireFox: hiding scrollbar on iframe with scrolling=yes - facebook canvas height no scroll set in ie8 and firefox) that discuss the same problem, but it didn't work for me.<br /><br />What worked for me was changing the canvas settings in the section advanced of app canvas configuration ( https://developers.facebook.com/apps ) to fixed canvas width (760px) and height (fixed at 800).<br /><br />I hope this help you.Userhttps://www.blogger.com/profile/11557173689529910046noreply@blogger.comtag:blogger.com,1999:blog-865923359735383241.post-86552557663941415162012-05-31T19:27:10.667-06:002012-05-31T19:27:10.667-06:00Horizontal scrollbars are always caused by the wid...Horizontal scrollbars are always caused by the width of your HTML page being larger than the area of the iframe.<br /><br />Make sure you set the right width to your or containing . <br /><br />Set the width in your CSS file and set the overflow property.<br /><br />If it's a Tab iframe app you can set it like this:<br /><br />body{<br /> width:510px;<br /> overflow:hidden;<br />}Userhttps://www.blogger.com/profile/11557173689529910046noreply@blogger.comtag:blogger.com,1999:blog-865923359735383241.post-31484186027363822672012-05-31T19:27:09.925-06:002012-05-31T19:27:09.925-06:00Well, I will share some techniques collected from ...Well, I will share some techniques collected from several resources that can be implemented to get rid of your unwanted scroll bars of your iframe facebook app. So, here is the first technique:<br /><br /><html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml"><br /><head><br /><script type="text/javascript"><br />function framesetsize(w,h){<br />var obj = new Object;<br />obj.width=w;<br />obj.height=h;<br />FB.Canvas.setSize(obj);<br />}<br /></script><br /></head><br /><body onload="framesetsize(500,3300)"> <!--specify the height and width for resize--><br /><div id="fb-root"></div> <!--this div is required by the Javascript SDK--><br /><div style="height: 2400px"><br />//Your content<br />//Goes here<br /></div><br /><script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script><br /></body><br /></html><br /><br /><br />Using Latest Javascript Facebook SDK [Without using Body OnLoad]<br /><br />window.fbAsyncInit = function() {<br />FB.init({<br />appId : '142388952486760',<br />status : true, // check login status<br />cookie : true, // enable cookies to allow the server to access the session<br />xfbml : true // parse XFBML<br />});<br />FB.Canvas.setAutoResize(); //set size according to iframe content size<br />};<br /><br />(function() {<br />var e = document.createElement('script');<br />e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';<br />e.async = true;<br />document.getElementById('fb-root').appendChild(e);<br />}());<br /><br /><br />Using the Old Facebook Javascript SDK<br /><br /><script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script><br /><script type="text/javascript"><br />FB_RequireFeatures(<br />["CanvasUtil"],<br />function(){<br />FB.XdComm.Server.init('/xd_receiver.html');<br />FB.CanvasClient.startTimerToSizeToContent();<br />}<br />);<br /></script><br /><br /><script type="text/javascript"><br />FB_RequireFeatures(["XFBML"], function(){ FB.Facebook.init("Your Facebook API Key", "/xd_receiver.html"); });<br /></script>Userhttps://www.blogger.com/profile/11557173689529910046noreply@blogger.comtag:blogger.com,1999:blog-865923359735383241.post-10864755729398459742012-05-31T19:27:07.487-06:002012-05-31T19:27:07.487-06:00I have had this problem in the past. While resizi...I have had this problem in the past. While resizing might work, there is a maximum width on the Facebook canvas. It is likely that your body element has some kind of default padding / margin, and therefore it's box is bigger than the max width.<br /><br />Try using a reset style sheet that clears default styles: http://developer.yahoo.com/yui/3/cssreset/Userhttps://www.blogger.com/profile/11557173689529910046noreply@blogger.comtag:blogger.com,1999:blog-865923359735383241.post-12489371378811102202012-05-31T19:27:05.351-06:002012-05-31T19:27:05.351-06:00Might sound obvious, but have you tried CSS overfl...Might sound obvious, but have you tried CSS overflow: hidden on the iFrame?Userhttps://www.blogger.com/profile/11557173689529910046noreply@blogger.comtag:blogger.com,1999:blog-865923359735383241.post-30303821349506678082012-05-31T19:27:04.642-06:002012-05-31T19:27:04.642-06:00You also need to start the timer to call autoresiz...You also need to start the timer to call autoresize code. In your applications HTML do:<br /><br />window.fbAsyncInit = function() {<br /> FB.Canvas.setAutoResize();<br />};<br /><br /><br />Above code will check the content dimensions every 100ms. If you want to use different timing you can pass milliseconds as variable:<br /><br />window.fbAsyncInit = function() {<br /> FB.Canvas.setAutoResize(50);<br />};<br /><br /><br />If your content size does not change after page load you can save CPU cycles by changing the content size just once manually:<br /><br />window.fbAsyncInit = function() {<br /> FB.Canvas.setSize();<br />}<br /><br /><br />You can even pass the desired size as parameter<br /><br />window.fbAsyncInit = function() {<br /> FB.Canvas.setSize({ width: 520, height: 600 });<br />}Userhttps://www.blogger.com/profile/11557173689529910046noreply@blogger.comtag:blogger.com,1999:blog-865923359735383241.post-4272765640360731702012-05-31T19:27:03.735-06:002012-05-31T19:27:03.735-06:00It's explained how to do this here:
http://clo...It's explained how to do this here:<br />http://clockworkcoder.blogspot.com/2011/02/how-to-removing-facebook-application-i.html<br />Basically you should use <br /><br />window.fbAsyncInit = function() {<br /> FB.Canvas.setAutoResize();<br />};<br /><br /><br />plus make sure that your html and body tags are set to overflow:hidden so you don't get those briefly shown scroll bars that are so annoying <br /><br /><html xmlns="http://www.w3.org/1999/xhtml" style="overflow: hidden"><br /> <head><br /> <!-- Header stuff --><br /> </head><br /> <body style="overflow: hidden">Userhttps://www.blogger.com/profile/11557173689529910046noreply@blogger.com