Jump to content

  • Log in with Facebook Log in with Twitter Log In with Google      Sign In   
  • Create Account

Subscribe to HRA Now!

 



Are you a Google Analytics enthusiast?

Share and download Custom Google Analytics Reports, dashboards and advanced segments--for FREE! 

 



 

 www.CustomReportSharing.com 

From the folks who brought you High Rankings!



Photo
- - - - -

Inline Iframe


  • Please log in to reply
9 replies to this topic

#1 madams

madams

    HR 5

  • Active Members
  • PipPipPipPipPip
  • 504 posts
  • Location:Costa Blanca, Spain

Posted 05 August 2009 - 07:30 AM

Hi

I am delivering content to my site via an inline frame.

Cant change that end, so,...

The recommended hight of the frame is 4000px

This is fine for showing item "details" but on the products page it leaves a large empty gap at the bottom of the page because the products only take up aprox 1200px in hight.

Hope this makes sence.

I wondered if there was a way to make the inline frame adjust to the hight of the content.

Code below...

CODE
<iframe src="http://the-content.com/" width="100%" height="4000" frameborder="0" scrolling="no"></iframe>


#2 1dmf

1dmf

    Keep Asking, Keep Questioning, Keep Learning

  • Active Members
  • PipPipPipPipPipPipPip
  • 2,161 posts
  • Location:Worthing - England

Posted 05 August 2009 - 07:53 AM

I believe you can use the CSS height attribute with auto, don't know if it works on iframes.

you could try the min-height attribute, but this only works on IE7+

CODE
min-height:500px;
height:auto;


the only other way might be to set a fixed height with overflow:auto;
but that wil give you scroll bars rather than change the actual height of the element.

#3 Katy

Katy

    HR 3

  • Active Members
  • PipPipPip
  • 68 posts
  • Location:Oxford, England

Posted 05 August 2009 - 10:31 AM

The following will resize the iframe based on the height of the page being pulled into it - but it will only work if the page you're pulling into the iframe is stored on the same server/PC as the page containing it.

CODE
<html>
<head>
<title>Resizeable Iframe Example</title>
<script type="text/javascript">
function loadframe()
{
var frame1="";
frame1 = document.getElementById('NewsFrame1');

     if(frame1!=null)
     {
         //alert(frame1.contentWindow.document.body.scrollHeight);
         frame1.style.height = frame1.contentWindow.document.body.scrollHeight + "px";
     }
}
</script>


</head>
<body onload="loadframe()">
<p>This is a page with some iframes in it </p>
<h1> Frame 1</h1>
<iframe src="test2.html" style="height: 272px;width:100%;border:1px solid red" id="NewsFrame1" name="NewsFrame1" frameborder="0" border="0" scrolling="no"></iframe>


</body>
</html>


#4 1dmf

1dmf

    Keep Asking, Keep Questioning, Keep Learning

  • Active Members
  • PipPipPipPipPipPipPip
  • 2,161 posts
  • Location:Worthing - England

Posted 05 August 2009 - 10:35 AM

Note: Katy's example requires Javascript enabled browsers, so it depends on your accessibility requirements as to whether this is a viable option!

#5 madams

madams

    HR 5

  • Active Members
  • PipPipPipPipPip
  • 504 posts
  • Location:Costa Blanca, Spain

Posted 05 August 2009 - 10:56 AM

Thanks 1dmf and Katy

The page is not stored on the same server, unfortunately.

The CSS didn't work either.

#6 1dmf

1dmf

    Keep Asking, Keep Questioning, Keep Learning

  • Active Members
  • PipPipPipPipPipPipPip
  • 2,161 posts
  • Location:Worthing - England

Posted 05 August 2009 - 11:15 AM

is there any reason why you use an iframe ?

You could use some form of include perhaps?

that way it becomes part of your actual page rather than a frame and you can control the div tag as much as you like with CSS that way

#7 madams

madams

    HR 5

  • Active Members
  • PipPipPipPipPip
  • 504 posts
  • Location:Costa Blanca, Spain

Posted 05 August 2009 - 11:45 AM

Interesting 1dmf

How would I control the hight this way?

If I created an include with...

CODE
<iframe src="http://the-content.com/" width="100%" height="1000" frameborder="0" scrolling="no"></iframe>


...and placed the include into the page, what css will I need?

Is this possible?

Thanks by the way



#8 Randy

Randy

    Convert Me!

  • Moderator
  • 17,540 posts

Posted 05 August 2009 - 06:50 PM

With a normal type of include you wouldn't have to even attempt to define the height essentially. It would end up looking just like the content was a part of the page, just like other content. So it could just write to the page via the include and when it ends the page ends.

#9 1dmf

1dmf

    Keep Asking, Keep Questioning, Keep Learning

  • Active Members
  • PipPipPipPipPipPipPip
  • 2,161 posts
  • Location:Worthing - England

Posted 06 August 2009 - 03:41 AM

madams, you wouldn't use an iframe at all.

and the include command depends on the language you will be using, for PHP you could use...
CODE
<? readfile("http://example.com/b.inc"); ?>


for PERL you need to be a bit more clever using a mixture of SSI and PERL code..
CODE
<!--#include VIRTUAL="/cgi-bin/proxy.pl?http://example.com/b.inc" -->


then the PERL script...
CODE
use LWP::Simple;
print "Content-type:text/html\n\n";
getprint ($ENV{'QUERY_STRING'});


From what i can tell you can't use a straight forward SSI (Server Side Include) as it only allows files to be included that reside on the the same server!

Let me know if you need anymore help.

#10 WavyDavy

WavyDavy

    HR 1

  • Members
  • Pip
  • 1 posts
  • Location:australia

Posted 11 April 2012 - 03:01 AM


I certainly could use some help I am trying to include a page from another website which normally uses iframes (which is really bad for SEO).

This is the code I have for my htaccess file

Options +Includes<br><br>XBitHack on

This is the code for my proxy.pl file (located in cgi bin of xampp folder)

use LWP::Simple;<br>print "Content-type:text/html\n\n";<br>getprint ($ENV{'QUERY_STRING'});

This is the code for my html file except for the url which has been changed to example.com

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;<br>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;<br>&lt;head&gt;<br>&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;<br><br>&lt;/head&gt;<br><br>&lt;body&gt;<br>&lt;div class="noq-wrapper"&gt;!--#include VIRTUAL="/cgi-bin/proxy.pl?http://example.com" --&gt; &lt;/div&gt;<br>&lt;/body&gt;<br>&lt;/html&gt;





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

SPAM FREE FORUM!
 
If you are just registering to spam,
don't bother. You will be wasting your
time as your spam will never see the
light of day!