Using frames/iframe to Only Show a Certain Part of the Page

Using frames/iframes to only show a small part of the target page

[someone788]

Hello, was working on iFrames, and I need to show a certain portion of the page (an area around the bottom left to be exact), in an iframe with about 100px width and 50px height.

I'll give an example:
Say I wanted to put an iframe of webmasterworld.com on a page, but have the iframe sized to only show the "Forum Index" text at the top left...how would this be done?

Thanks!

[jimbeetle]

If you're doing it with your own pages it's pretty simple, just use and anchor at the point you want to start in your source page:

<a name="start-here"></a>

Then use that in the source attribute of your iframe element on the calling page:

<iframe src="frame-target#start-here" height="50px" width="100px" scrolling="auto">

You'll probably have to play around with this a bit and test the dimensions in different resolutions but should be able to get it to work.

[someone788]

Thanks, but the problem is that the page I'm framing isnt mine, so I can't add A tags to it.

I did notice that there is a class tag around where I wanted to frame.
<td align="right"><img class="this" src="URlofImageHere"></td>

Would I be able to use this in any way?

[jimbeetle]

No, I can't think of a way to make that work.

Why don't you just ask the other site owner if you can use the image?

[someone788]

Well, let me explain in more detail...

I need to put the iframe around a certain number on the site's highscores. This number is constantly updating so the only way I could think of, without having to update the number by hand which would be a big pain and I wouldn't be able to do it 24/7, would be to put an iframe around that number. The image is right next to that number. It wasn't the image that I wanted, just thought maybe I could somehow use the class tag on it to direct the iframe there.

I mean, something like the positioning of a page in an iframe doesn't seem like it would be that hard, but I've searched around for a while and can't find a solution to it. Possibly I'd have better luck using Javascript/DHTML soemhow?

[jimbeetle]

Yeah, you might be able to do it with some JS, though I'm not too sure exactly what manipulation you're able to do with off-site pages.

The easiest way, of course, is to work something out with the other site's owner.

[someone788]

K, thanks for your help. I'll post this in Javascript section.

Btw, this is a very large online gameing site, I doubt they would change anything any of their pages (even if it just means adding in a A name tag) just because I asked them to.

[encyclo]

Firstly, ask yourself if you have the permission of the site owner to republish their information. Your plan may fall down on this point, to the extent that if you try an

iframe

trick they could use a frame-busting script to replace your site with theirs in the user's browser, thus hijacking all your traffic. :)

If you do have the permission of the site owner, ask whether they would publish the information via RSS - then you can just parse the feed and your site will be updated autmatically. Another option is to regularly fetch the page via a server-side process (eg. with cURL), write a script to identify the container surrounding the information you require, then extracting this container and inserting it in your page. Obviously, both of these approaches require server-side scripting such as PHP, ASP, Perl...