Reduce content of iframe

**stefaneh** · 02-27-2007, 11:44 AM

http://www.dynamicdrive.com/dynamici...loatiframe.htm

I like to reduce the size of the content which I am showing in an iframe. I don't want to use scroll for the iframe. I my dream would be to just zoom out the the content of the page I am showing. The content I am showing is a page for the web so I don't have a way to change and ad scripts there.

I found a php script but I was wondering any other way. If not could I show the content in a lightbox or graybox but the would really my second choice

Cheers

**jscheuer1** · 02-27-2007, 12:33 PM

You cannot access the content of an iframe from another domain to change it without something like PHP. However, in IE you can do zoom style. With PHP as a fall back for other browsers it might be good to use the IE method for those browsers that support it (less server overhead). Here is an example (IE only):

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
iframe {
zoom:50%;
border:2px solid black;
}
</style>
</head>
<body>
<iframe src="http://www.google.com/" width="500" height="400" scrolling="auto" frameborder="1"></iframe>
</body>
</html>

**stefaneh** · 02-27-2007, 01:40 PM

Thanks John that works for IE same not for Firefox. I try now to block the horizontal scroll bar . I tried to use "vertScroll" to display only the vertical bar but still the horizontal shows up. How can I do this? As well anyway I can crap the content of the iframe and move it with my mouse rather then with the scroll bar?

Thanks again John you are a legend

**stefaneh** · 02-27-2007, 09:48 PM

John,
I fixed the scrollbar issue via CSS overflow. Any chance I can disable hyperlinks shown inside the iframe?

Thanks

**jscheuer1** · 02-27-2007, 10:06 PM

There are probably various ways to do that, here's one:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
iframe {
zoom:50%;
border:2px solid black;
}
</style>
</head>
<body>
<div style="position:relative;width:250px;height:200px;">
<iframe src="http://www.google.com/" width="500" height="400" scrolling="auto" frameborder="1"></iframe>
<div style="position:absolute;width:500px;height:400px;zoom:50%;top:0;left:0;background-color:white;filter:alpha(opacity=1);opacity:0.01;"></div>
</div></body>
</html>

The styles can be set in the stylesheet if you prefer (probably a good idea).

Thread: Reduce content of iframe

Thread Tools

Search Thread

Reduce content of iframe

fix the scrollbar

Bookmarks

Bookmarks

Posting Permissions