ansaurus

Question

How does the DiggBar dynamically resize its iframe's height based on content not on their domain?

Answer 1

A:

The iFrame is on the Digg website with the target website inside, not the other way around. The iFrame is set to 100% width and height.

Matthew James Taylor 2009-04-16 02:29:16

Yes, I know this. But the src that iframe is pointing to is pointing to a URL outside their domain. Thus, because of security they shouldn't be able to dynamically resize it based of that content height.

Mithrax 2009-04-16 02:30:44

100% height iframes don't work like that. Google it.

Mithrax 2009-04-16 02:31:35

Answer 2

+13 A:

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/"&gt;&lt;/iframe&gt;
</body>

Brian Campbell 2009-04-16 02:45:07

iframes don't work liek that. Try it your self, set an iframe with height: 100% and set its src to http://gooogle.com. It won't work.

KingNestor 2009-04-16 02:49:28

Most people end up resorting to javascript to do this but it fails when trying to do it for a iframe with a src set to a site across a different domain. I'm curious how they do this too.

KingNestor 2009-04-16 02:50:03

height 100% will expand it to the height of the body tag, which isn't the height of the iframed content and in most cases will be too small.

KingNestor 2009-04-16 02:51:52

@brian campbell, look at this code: http://pastebin.com/m6f696be5 and this screenshot: http://i44.tinypic.com/257odja.png

Mithrax 2009-04-16 03:14:22

That is after feeding it the url "http://www.google.com".

Mithrax 2009-04-16 03:14:52

@Brian Campbell, do you see what I mean?

Mithrax 2009-04-16 03:24:08

Yep, I see what you mean. It turns out the reason for the difference is... the DOCTYPE! It looks like it renders the way you want it to in quirks mode (what you get if you don't include a DOCTYPE), but does not work if you are in standards mode (which you get from <!DOCTYPE html>).

Brian Campbell 2009-04-16 03:33:27

Also, you need to remove the position: fixed from your #toolbar. If you do that, then the iframe will wind up behind your bar, instead of flowing underneath it.

Brian Campbell 2009-04-16 03:36:07

Oh, and by the way: many people consider it very rude to frame their websites. There was a lot of protest against the DiggBar, to the point where Digg backed off and said they would stop using the DiggBar for anonymous users http://blog.digg.com/?p=664

Brian Campbell 2009-04-16 03:44:57

@Brian Campbell, this isn't going into production and I agree with the DiggBar protests. I just want to mimic it for a site a friend and I are making to learn MVC/jQuery from.

Mithrax 2009-04-16 04:08:04

Brian Campbell 2009-04-16 04:11:10

@Brian Campbell, so how taboo is it to run in quirks mode?

Mithrax 2009-04-16 07:37:33

@Mithrax It's generally a bad idea to run in quirks mode, since you never really know what you're going to get across different browsers. Luckily, I found a solution here (listed in my edit 4 above) that works in standards mode in Firefox.

Brian Campbell 2009-04-16 15:12:03

@Brian Campbell, have you tried this solution with a taller website? Try Yahoo for example. The scroll bar gets cut off at the bottom. I dig (heh) your solution so far, but have you run across this problem yet?

Mike Robinson 2009-05-21 14:39:07

@Mike Robinson I have not tested it extensively. You can see through my history of edits the trial and error I went through. If the current solution does not work on some sites, did you try my previous solution that relies on quirks mode? This is what the actual DiggBar does. I don't have time to look into it now, but if that doesn't work, I'll take another stab at it and see if I can come up with something.

Brian Campbell 2009-05-21 18:52:46

It's a very nice solution. We are going to use it for embedding intranet applications in a portal.

Henrik 2010-10-28 12:49:58

It has one issue, though: If the content is larger than the iframe size, a tiny portion of the content at the bottom is cut off. To demonstrate, replace google in the example link with e.g. cnn.com. A tiny portion of the page's footer gets cut off. http://pastebin.com/Txpzsi19 contains a tiny jQuery program that resizes the iframe relatively, while keeping the height of the top bar constant.

Henrik 2010-10-28 12:59:15

Answer 3

+1 A:

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.

Superdumbell 2009-04-16 02:55:22

Answer 4

A:

An iframe can have height 100% in quirks mode. Digg achieves this by leaving out the doctype.

murray.nuttall 2009-12-02 01:36:50

ansaurus

tags:

views:

answers:

How does the DiggBar dynamically resize its iframe's height based on content not on their domain?

related questions