TinyPortal

Development => Block Codes => Topic started by: Lord Anubis on January 17, 2008, 01:06:22 AM

Title: 100% Height Iframe
Post by: Lord Anubis on January 17, 2008, 01:06:22 AM
Have you ever had problems creating an Iframe with 100% height?

Well using the code:

<iframe width=100% height=100%></iframe>

DOES NOT WORK WITH MOST BROWSERS, so here is a simple solution for SMF forums...

WARNING: Whenever editing code, be sure to make a backup so you can restore it if anything goes wrong!!!


In the index.template.php for YOUR THEME find:

</head>

Add before


<script language="JavaScript">
<!--
function resize_iframe()
{

var height=window.innerWidth;//Firefox
if (document.body.clientHeight)
{
height=document.body.clientHeight;//IE
}
//resize the iframe according to the size of the
//window (all these should be on the same line)
document.getElementById("glu").style.height=parseInt(height-
document.getElementById("glu").offsetTop-8)+"px";
}

// this will resize the iframe every
// time you change the size of the window.
window.onresize=resize_iframe;

//Instead of using this you can use:
// <BODY onresize="resize_iframe()">


//-->
</script>


Then create a TP article (or custom action) and insert this code (into the source):

<iframe width="100%" scrolling="no" onload="resize_iframe()" id="glu" src="http://your-iframe-source.php"> </iframe>

CHANGE http://your-iframe-source.php to the location of your Iframe


Hope this helps  ;)
Title: Re: 100% Height Iframe
Post by: noxe on January 28, 2008, 06:13:36 AM
Omg thank you, I needed this badly!
Title: Re: 100% Height Iframe
Post by: Smoky on January 28, 2008, 07:24:31 AM
nice, m'lord, thanks!!  :D
Title: Re: 100% Height Iframe
Post by: falguni1 on January 28, 2008, 02:57:26 PM
I will try this.
Title: Re: 100% Height Iframe
Post by: falguni1 on January 28, 2008, 03:07:11 PM
it says

The file you tried to save generated the following error:
Parse error: syntax error, unexpected T_STRING, expecting ',' or ';' in index.template.php on line 117
Title: Re: 100% Height Iframe
Post by: tick on January 28, 2008, 03:23:02 PM
attach your index template here and we can look at why you are getting that error
Title: Re: 100% Height Iframe
Post by: Hairy on February 05, 2008, 09:50:02 AM
I get the error also, file is attached.
Title: Re: 100% Height Iframe
Post by: Lord Anubis on February 05, 2008, 01:49:17 PM
What editor were you using Hairy, I ask because your head tag was in the wrong spot

I think I fixed it, give this a try  ;)

Title: Re: 100% Height Iframe
Post by: Gargoyle on February 06, 2008, 11:58:26 PM
I tried to integrate this all onto one page with no luck. My coppermine currently loads in an SMF page to keep the overall look of the site. I like the concept of your idea. Just haven't successfully implemented it yet.

Looks like some good work there and very helpful
Title: Re: 100% Height Iframe
Post by: Hairy on February 07, 2008, 12:59:40 AM
Quote from: Lord Anubis on February 05, 2008, 01:49:17 PM
What editor were you using Hairy, I ask because your head tag was in the wrong spot

I think I fixed it, give this a try  ;)



I use Notepad++ but I don't know what was used by the original theme author.

I just tested the new index.template.php but it gives me the following error:

Template Parse Error!
There was a problem loading the /Themes/Pirates-SAMS/index.template.php template or language file. Please check the syntax and try again - remember, single quotes (') often have to be escaped with a slash (\). To see more specific error information from PHP, try accessing the file directly.

You may want to try to refresh this page or use the default theme.
--------------------------------------------------------------------------------


Parse error: syntax error, unexpected T_FUNCTION in .../Themes/Pirates-SAMS/index.template.php on line 30

21:
22: The menu sub template should display all the relevant buttons the user
23: wants and or needs.
24:
25: For more information on the templating system, please see the site at:
26: http://www.simplemachines.org/
27: */
28:
29: // Initialize the template... mainly little settings.
30: function template_init()31: {
32: global $context, $settings, $options, $txt;
33:
34: /* Use images from default theme when using templates from the default theme?
Title: Re: 100% Height Iframe
Post by: Lord Anubis on February 07, 2008, 01:04:07 AM
Can you post your original untouched index.template.php and I will add the code for ya ;)
Title: Re: 100% Height Iframe
Post by: Hairy on February 07, 2008, 01:20:36 AM
Here is the one currently being used, it's not the original because I changed a few little things to suit my current theme, I didn't touch <head> tags  :-\

*added arcade button
*changed image names to show my new images
*some footer changes for copyright/images

Cheers
Title: Re: 100% Height Iframe
Post by: Hairy on February 07, 2008, 01:23:14 AM
That's strange, last attachment is larger then the previous  :o
Title: Re: 100% Height Iframe
Post by: Lord Anubis on February 07, 2008, 03:06:12 AM
Okay I figured out my mistake on the code (didn't need to use echo in the code between the head tags :uglystupid2: )

Here is a fixed copy with the Iframe intact, give the iframe code I posted a try and let me know if it does it correctly ;)
Title: Re: 100% Height Iframe
Post by: Hairy on February 07, 2008, 11:58:17 AM
Thanks for that, no errors and I now see how it works.

Is there anyway of getting it to resize when the page inside the IFrame changes size instead/also when you resize your own browser?

To see what I mean check this out http://www.samclan.com/index.php?page=60

This IFrame is for someone to put in a gameserver IP and then it loads pictures within the IFrame from that gameserver.

But it doesn't resize by itself, I need to keep resizing my browser to be able to see the new pictures loaded since last resize.

Put our gameserver IP (8.3.7.120) in there and you can see what I mean (there is ~500 pictures that will eventually load)

Cheers
Hairy  :up:


PS. here's the one we currently use http://www.samclan.com/index.php?page=59 but I was hoping to get rid of the scrollbar for the IFrame  ^-^
Title: Re: 100% Height Iframe
Post by: Lord Anubis on February 07, 2008, 04:32:46 PM
If you could automatically have your game servers IP in there I think it would auto resize to all to the content, but I have yet to get this to resize it dynamically to content that isn't there on the initial page load...I am sure there might be a way, but I haven't figured that yet :'(
Title: Re: 100% Height Iframe
Post by: Ken. on February 07, 2008, 05:21:08 PM
LA, have you looked at whats available on DynamicDrive to see if any of their code will help you?

There are several threads here on TP where their code has worked well for auto-resizing iframes for the Coppermine gallery and other things.

Heres one example of the DD iframe code:
http://www.dynamicdrive.com/dynamicindex17/dowiframe.htm
Title: Re: 100% Height Iframe
Post by: Lord Anubis on February 07, 2008, 05:29:17 PM
Hmmm, I might have to mess with that :up:
Title: Re: 100% Height Iframe
Post by: Hairy on February 07, 2008, 09:48:38 PM
Quote from: Lord Anubis on February 07, 2008, 04:32:46 PM
If you could automatically have your game servers IP in there I think it would auto resize to all to the content, but I have yet to get this to resize it dynamically to content that isn't there on the initial page load...I am sure there might be a way, but I haven't figured that yet :'(

The site I'm linking to is provided externally by our anti-cheat friends so I don't know how I can get the IP to load by itself, also if it was mainly for our server I could just set a size that would cover our pics, other servers can have several thousand pics instead so that wouldn't be good.

Good luck  8)