Usually when you use an IFRAME tag to link an external source the page that’s referenced by the SRC attributes is loaded at the top left corner. This is the default behavior, but sometimes you’d like to show to your users not the entire page from the top left corner, but to show only part of the external page instead.

In most of the cases the reference is external and you don’t have control over the external page. Thus you’ve to scroll the IFRAME content to the desired position. This of course is impossible. Yeah, there are some JavaScript hacks, but they’re all a bad solution, because the scrolling occurs only after the page is loaded.

The Solution

You can wrap the IFRAME into a div and scroll the DIV content using absolute TOP and LEFT CSS properties.

Here’s an example:

#my-div
{
    width    : 400px;
    height   : 200px;
    overflow : hidden;
    position : relative;
}

#my-iframe
{
    position : absolute;
    top      : -100px;
    left     : -100px;
    width    : 1280px;
    height   : 1200px;
}

Here you have one DIV with dimensions 400x200px. Now by moving the IFRAME within it you can position it on the right place.

Example with the awesome Yahoo! Homepage:

It’s easy, you just put a ajax or image load in the beginning of the page and than you know what the speed is. But the problem is that the ajax and the image load need to finish to know exactly how slow or fast the connections is. And even worse, you need to slow down the page even for normal (fast) connections. And where’s the point? You get the site slower only to understand the connection. That’s not OK.

The javascript blocks the page load

That’s another problem with javascript. You know when you have script tag in the head of the document, the browser needs to finish loading this javascript, parse it and than continue loading.

How javascript can be loaded async

Well there are several methods, but here we need only one separate javascript that don’t communicate with other JS code in the site, it only get information about the connection speed.

Put the javascript code in an Iframe.

Than the loading of that javascript is async. Independently you continue loading the site. For fast connection, yes this going to slow down a little bit, but however not as much as if you put an inline code. Than in that iframe you can simply check for an expression to verify for a slow connection if it’s true you may set a cookie for slow connection site version and reload the window.parent of the iframe, which is the page itself.

frameborder=”0″ attribute

<iframe frameborder=”0″ … ></iframe> is helping

Recently I wrote an article about the Google Adsense problem with page load blocking and than the solution was simple and elegant. You must put your ad in a separate .html file and to include it into your page with an iframe. That gives the page the ability to “breath” and to load faster.

You can see the entire article here.

When everything’s OK, wait for the IE

Yes as usual every browser loaded the iframe correclty, except … IE. Both 6 and 7. What was the problem of that lovely browser? Just as I mentioned in my previous article, I put the Google generated code chunk in a .html file and include it with an iframe.

So far so good. But was actually stoped in on IE. All the developer plugins of IE were incapable of helping me.

Finally the solution

The solution itself is so strange and stupid. The file you include your ad banner should be named “index”. If you have three ads on your page, and three iframes you must include three index.html files, obviously from different directories. That finally made IE working as the other world.