Hi I use iframefor my facebook apps. The iframe gets a scrollbar around itself. Can you tell me how to avoid getting the scrollbar around the iframe? I currently have 2 facebook apps as iframes and one of them gets scrollbars that it shouldn't have:
http://apps.facebook.com/cyberfaze/ (has scrollbars or scroll areas around iframe that I don't want)
http://apps.facebook.com/koolbusiness/ (same CSS and has no scrollbars)
Could you help me?
Thanks
Go to your application settings on Facebook
you will find canvas settings
In the canvas settings you will find IFrame Size:
You will find two options
Show scrollbars
Auto-resize
select Auto-resize to get rid of from the scroll bars.
You will need to go to your app settings -> canvas settings -> iFrame size (as mentioned by Micheal) and set it to auto-resize.
You will also need to make sure you have body, html { overflow: hidden; } for you iframe content
Then the below will help, chuck that in and change your app id -
<script type="text/javascript">
window.fbAsyncInit = function() {
FB.init({
appId: 'xxxxxxx',
status: true,
cookie: true,
xfbml: true
});
//this resizes the the i-frame
//on an interval of 100ms
FB.Canvas.setAutoResize(100);
};
(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);
}());
</script>
There is a setting in the Facebook Developers App Setup section to set scrolling to Auto-resize. and you can add to your CSS file : html { overflow:hidden; }
Could it be that you have forgot to set the iframe scrolling attribute to "no"?
Try to change the iframe tag to this:
<iframe class="smart_sizing_iframe noresize" frameborder="0" scrolling="no" id="iframe_canvas" name="iframe_canvas" src='javascript:""' height="600px" style="height: 719px; overflow-y: hidden; ">
Hope this was what you where looking for!
Usually with iframes you can either use the CSS method setting overflow: hidden or you can use the scrolling attribute of the iframe and set it to scrolling="no".
Having looked at your examples though, I am not sure that is what is causing your issue. Facebook iframes have their own set of issues.
First go to the devloper app and edit your app settings. In the Facebook Integration area set iframe size to auto-resize. Then in your app, after FB.init, call FB.Canvas.setAutoResize. Here is a link about FB.Canvas.setAutoResize.
Related
I want to make a iframe which will change it's src="" if current link in src="" is down or other errors.
It will show this if this page is up!
<iframe src="http://test1.com"></iframe>
If http://test1.com is down it will show http://test2.com
You could have a function run after a timeout which changes the iframes src, with an onload function of the iframe canceling the timeout.
<iframe src="http://test1.tld" id="testIframe" onload="cancelTimeout()"></iframe>
<script>
var iframeLoadTimeout=window.setTimeout(
function(){
document.getElementById("testIframe").src="http://test2.tld";
},
10000
);
cancelTimeout=function(){
try {
window.clearTimeout(iframeLoadTimeout);
} catch(e) {}
};
</script>
JAVASCRIPT: The first thing you may want to do is check if the site is up or down.
Just plant an image from the remote site hidden into your site and monitor the load HTTP response status of this image. This might need some tweaks for true cross-browser compatibility. You can see #Spliffster answer to that on this question: Here
If it is down you can change the URL of the iframe by doing something like this:
document.getElementById('iframeid').src = "http://test2.com";
I have an iframe that has a source of /website-policy#privacy but when this loads the iframe stays at the top instead of jumping to the id. Is there anyway without the use of js to make this go to the correct section?
At the moment I have had to use the following jQuery:
iframe.contents().find('html,body').animate({ scrollTop: iframe.contents().find('#privacy').position().top - 10 }, 1);
but this seems rather untidy and I don't want to have to do this each time I have an iframe with a hash-tag in the url
Here is a fiddle of what is happening, as you can see the fancybox is opening up but not jumping to the heading "Jump here"
This is my workaround You may have to click the link twice for the fancybox to appear
The problem seems to be the iframe preload setting in fancybox. If you set this option to false, it will work as expected:
$('a.fancy').fancybox({
type: "iframe",
iframe: {
preload: false
}
});
I'm working on a local WordPress site, and for some reason there is an iframe added just after the opening body tag which makes the body to drop down about 20px.
Google only returned 1 relevant result when searching for it, and what I read there didn't help much. It can be found here.
The WordPress site has no plugins installed, and setting it to display: none; doesn't work.
Here's a screenshot from Chrome so you can see it:
It seems like it is added by the Twitter script. If you remove it the iframe will disappear.
It sure looks like you have the Twitter plugin installed in some way or the other as you can see it says data-twttr-rendered="true" in the body tag.
If you remove the code - in my case the code below - it will disappear
<script type="text/javascript">
(function(){
var twitterWidgets = document.createElement('script');
twitterWidgets.type = 'text/javascript';
twitterWidgets.async = true;
twitterWidgets.src = '//platform.twitter.com/widgets.js';
document.getElementsByTagName('head')[0].appendChild(twitterWidgets);
})();
</script>
I have a web page that uses a frameset.
Due to scripting and object dependencies, I need to load the frames in a specific order.
I have used this example as a template:
The JavaScript Source: Navigation: Frames Load Order
This loads an empty page in place of the page I need to load last, then replaces it with the correct page after the first page has loaded.
However: I also need to use the browser Back button. If you run the sample at the above link, let both frames load, then click the Back button, the top frame reverts to the temporary blank page. It is then necessary to click the Back button again to navigate to the page before the frameset.
Is there a way to force frames to load in a specific order without this Back button behavior - or a way to force the Back button to skip the empty page?
This needs to work with Internet Explorer 6 and 7 and preferably with Firefox 3 as well.
You mention this quite a lot in this post...
This is a legacy system. The frameset is required.
If you are working on a legacy system, then I think it is time you accepted how framesets behave in terms of the browser's back button. If it is truly a legacy system, you don't need to fix this behaviour. If it is actually NOT a legacy system and you need to fix this problem, you need to get away from using a frameset. Framesets were deprecated from the HTML standards and shouldn't be used.
Why not use three iframes in the desired order, then resize/move them to the appropriate places?
<iframe id="a1" src="page-to-load-first.htm"></iframe>
<iframe id="a2" src="page-to-load-second.htm"></iframe>
<iframe id="a3" src="page-to-load-third.htm"></iframe>
<script>
function pos(elem,x,y,w,h) {
if (!elem.style) elem=document.getElementById(elem);
elem.style.position='absolute';
elem.style.top = y+'px';
elem.style.left= x+'px';
elem.style.width=w+'px';
elem.style.height=h+'px';
}
window.onload = function() {
window.onresize=function() {
var w = window.innerWidth || document.documentElement.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight;
var w3 = w/3;
var h2 = h/2;
pos('a1',0,0,w3,h); /* left 1/3rd */
pos('a2',w3,0,w3+w3,h2);
pos('a3',w3,h2,w3+w3,h2);
};
window.onresize();
};
</script>
Build the frames themselves using JavaScript:
<html>
<head>
<script>
function makeFrame(frameName) {
var newFrame = document.createElement('frame');
newFrame.id=frameName;
if(frameName=="B") {
newFrame.onload=function() {makeFrame("C")};
newFrame.src = 'http://www.google.com';
}
else {
newFrame.src = 'http://www.yahoo.com';
}
document.getElementById('A').appendChild(newFrame);
}
</script>
</head>
<frameset name='A' id='A' rows="80, *" onload="makeFrame('B')"></frameset>
</html>
I have an application that I would like to embed inside our companies CMS. The only way to do that (I am told), is to load it in an <iframe>.
Easy: just set height and width to 100%! Except, it doesn't work.
I did find out about setting frameborder to 0, so it at least looks like part of the site, but I'd prefer not to have an ugly scrollbar inside a page that allready has one.
Do you know of any tricks to do this?
EDIT: I think I need to clarify my question somewhat:
the company CMS displays the fluff and stuff for our whole website
most pages created through the CMS
my application isn't, but they will let me embedd it in an <iframe>
I have no control over the iframe, so any solution must work from the referenced page (according to the src attribute of the iframe tag)
the CMS displays a footer, so setting the height to 1 million pixels is not a good idea
Can I access the parent pages DOM from the referenced page? This might help, but I can see some people might not want this to be possible...
This technique seems to work (gleaned from several sources, but inspired by the link from the accepted answer:
In parent document:
<iframe id="MyIFRAME" name="MyIFRAME"
src="http://localhost/child.html"
scrolling="auto" width="100%" frameborder="0">
no iframes supported...
</iframe>
In child:
<!-- ... -->
<body>
<script type="text/javascript">
function resizeIframe() {
var docHeight;
if (typeof document.height != 'undefined') {
docHeight = document.height;
}
else if (document.compatMode && document.compatMode != 'BackCompat') {
docHeight = document.documentElement.scrollHeight;
}
else if (document.body
&& typeof document.body.scrollHeight != 'undefined') {
docHeight = document.body.scrollHeight;
}
// magic number: suppress generation of scrollbars...
docHeight += 20;
parent.document.getElementById('MyIFRAME').style.height = docHeight + "px";
}
parent.document.getElementById('MyIFRAME').onload = resizeIframe;
parent.window.onresize = resizeIframe;
</script>
</body>
BTW: This will only work if parent and child are in the same domain due to a restriction in JavaScript for security reasons...
You could either just use a scripting language to include the page into the parent page, other wise, you might want to try one of these javascript methods:
http://brondsema.net/blog/index.php/2007/06/06/100_height_iframe
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/Q_22840093.html
Provided that your iframe is hosted on the same server as the containing page, you can access it via javascript.
There are a number of suggested methods for setting the iframe to the full height of the contents, each with varying degrees of success - a google for this problem shows that it's quite a common one, with no real, one-size-fits-all consensus solution i'm afraid!
Several people have reported that this script does the trick, but may need some modification for your specific case (again, assuming your iframe and parent page are on the same domain).
I might be missing something here, but adding scrolling=no as an attribute to the iframe tag normally gets rid of the scrollbars.