Menu
Someone has already asked, How does the DiggBar work? in a previous question.
While someone provided a decent answer it didn't address one thing:
How does Digg dynamically resize their iframe's height, based on the content of a site across a different domain?
There are plenty of questions and answers here on SO for dynamically adjusting an iframes height based off content (using javascript) as long as the framed url is on your own domain. However, Digg seems to have solved this problem with websites of any domain.
Do any SO web programmers have any idea how they accomplished that?
Note: The iframe is NOT simply set to 100% height. The iframe tag simply does not work like that. Google "100% height iframe" and you'll see what I mean.
678
Answer: Use the contentWindow Property You can use the JavaScript contentWindow property to make an iFrame automatically adjust its height according to the contents inside it, so that no vertical scrollbar will appear.
If you look at their CSS, they use height: 100% for the iframe:
iframe#diggiFrame {
color: #666;
width: 100%;
height: 100%;
z-index: 10;
-webkit-box-sizing: border-box;
}
They position the DiggBar above that with a height of 46px, so the iframe takes 100% of the remaining space. They use overflow: hidden on the body element to keep the iframe entirely within the vertical height of the page, rather than allowing the page to scroll. This means that the scroll bar will then appear inside the iframe, instead of for the whole page. Note that the the way the DiggBar does it works only in quirks mode in Firefox; see below for how to do it in standards mode.
body {
padding: 46px 0 0 0;
margin: 0;
background: #fff;
overflow: hidden;
color: #333;
text-align: left;
}
#t {
width: 100%;
min-width: 950px;
height: 46px;
z-index: 100;
position: absolute;
top: 0;
left: 0;
/* overflow: hidden; */
border-bottom: 1px solid #666;
background: #fff url(/App_PermaFrame/media/img/back.gif) repeat-x;
line-height: 1;
}
edit: For those who don't believe me, here is a small example. To get it to fill the entire space, you need to set it to have no border, and you need <body> to have no margins.
edit 2: Ah, sorry, I see what you were talking about. You need the overflow: hidden on the body tag to get the scroll bar to work the way you want.
edit 3: It looks like you have to be in quirks mode for this to work in Firefox; if you include a <!DOCTYPE html> declaration, that puts you into standards mode, and your iframe comes out too small.
edit 4: Ah, you can do it in standards mode in Firefox as well. Got the answer here. You need to set the height on your <html> and <body> elements to 100% as well. (Note that the <!DOCTYPE html> is the doctype for HTML 5, which is a work in progress; however, it works on all modern browsers for turning on standards mode).
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">
html, body {
height: 100%
}
body {
margin: 0;
overflow: hidden;
}
#topbar {
height: 50px;
width: 100%;
border-bottom: 1px solid #666
}
#iframe {
height: 100%;
width: 100%;
border-width: 0
}
</style>
</head>
<body>
<div id="topbar">
<h1>This is my fake DiggBar</h1>
</div>
<iframe id="iframe" src="http://www.google.com/"></iframe>
</body>
Part of the problem with HTML you can't just set an element of any thing to 100% height and have it take up the whole window space. One way to do this is by making the body have a pixel height of the window and any thing inside the body set to 100% will be the size of the window.
Basically just make a JavaScript that ties onto the windows onresize event and have it resize the body to to the size of the window.
here is an example I made using jQuery
<script language="JavaScript" type="text/JavaScript">
$(window).resize(function() {
$('body').height(document.documentElement.clientHeight);
});
</script>
With this you will be able to set a div or another elements and have it work at the full height of the window.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
