novartic Posted May 27, 2009 Share Posted May 27, 2009 Hello all.I am well aware that this is a big issue as I have spent quite a few hours trying to get a solution, though to no avail. I am fluent in HTML and I know enough CSS and PHP to get me by.First off, the website in question is here: http://www.oakmead.bournemouth.sch.ukNow, what I am trying to do it the following.When you go to a page, the height of the IFrame adjusts to the height of the internal page. There for having no scroll bar in the IFrame and also extending the site down the page as if it were a normal site. A bit like the include function in PHP and ASP script.The internal IFrame pages are a mixture of word based pages and correct HTML/CSS pages, that can not be altered at all due to the limited programming skills of the pages authors and due to the structure of the internal and external site.What I have thought up is the following. Though I wish to have some support if possible with the programming of this code as I am very week with Java script. First, the script detects the internal height of the document inside of the IFrame. Second, this script then takes the height, converts it into what ever to make the IFrames height exact to the height of the internal document. If we can then add 10 Pixles onto the end of the total number, this should then ensure that there are no scroll bars. If some one could please help me out with this, it would be much appreciated.Many thanks,Dan. Link to comment Share on other sites More sharing options...
Ingolme Posted May 27, 2009 Share Posted May 27, 2009 Maybe the offsetHeight property of the <body> element inside the iframe would tell you the height.Iframes are a bad choice for layout. I recommend using the PHP include function, and it's better if you don't use tables for laying out your site, since they take a whole lot more mark-up and are not as flexible. Link to comment Share on other sites More sharing options...
novartic Posted May 27, 2009 Author Share Posted May 27, 2009 I totally agree with you with regards to the IFrames. Though if I go down the include() layout route, everything just goes way out of proportion and the site will brake. Unfortunately, it needs to be in an IFrame much to my annoyance.For example. If I included the home page, this would be fine. But due to the nature of the layout of the site internally to the school, if I were to click another link it would show the page outside of the current site style. Plus CSS would become a nightmare to handle.Also, it would need to be ASP if I were to do it. :)EDIT:var iDocHeight = document.body.offsetHeight;Would that do the trick? ^^Im useless with JS. :)EDIT:I have seen about that you can get the contents of the IFrame into a DIV. Though this does not work correctly with Firefox. Also CSS although a pain, I can manage this a I have tested this out already. Link to comment Share on other sites More sharing options...
Ingolme Posted May 27, 2009 Share Posted May 27, 2009 Well, give your iframe an ID to access it, and then see if you can get the height of the body. <iframe id="myFrame" onload="sizeFrame()"... ... > function sizeFrame() { var F = document.getElementById("myFrame"); F.height = F.contentDocument.body.offsetHeight;}window.onload = sizeFrame; When you develop pages in the future, prepare for using more advanced and proper techniques. Link to comment Share on other sites More sharing options...
novartic Posted May 27, 2009 Author Share Posted May 27, 2009 Well I kinda tried it with just an iframe and google as the source. and it does nothing...Really, with JS I have not got a clue what to do with it.With regards to your last comment. I try to only use CSS and PHP. like my site http://www.risingsunuk.comPlease don't take my attempt at the school site my first attempt. I have made a fair few. Link to comment Share on other sites More sharing options...
Ingolme Posted May 27, 2009 Share Posted May 27, 2009 The script will only work if the source is within the same domain as the page. It's a Javascript security thing. Link to comment Share on other sites More sharing options...
novartic Posted May 27, 2009 Author Share Posted May 27, 2009 The script will only work if the source is within the same domain as the page. It's a Javascript security thing.(Now at home)did an iframe, directed it to a page thats big... both are located on the desktop.Source is this:<html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><script>function sizeFrame() { var F = document.getElementById("myFrame"); F.height = F.contentDocument.body.offsetHeight;}window.onload = sizeFrame;</script></head><body><iframe id="myFrame" onload="sizeFrame()" src="staff.htm"></iframe></body></html> What am I doing wrong :)EDIT:Tested with Fire fox and it works.Tested with IE8 it does not.Tested with Google Chrome and it works. Odd.EDIT: As you said, tables are a pain. Get in the way they do. Might have to use CSS to locate the images etc... and lay out the site. This will be a challenge. Link to comment Share on other sites More sharing options...
novartic Posted May 27, 2009 Author Share Posted May 27, 2009 Awsome. Got it working good. Even added something to it too <script>function sizeFrame() {var F = document.getElementById("myFrame");F.height = F.contentDocument.body.offsetHeight+20;}window.onload = sizeFrame;</script> Is there a way to get this script to work on pages that are not currently in the same directory? As it stands at the moment it will only work if that page is in the current.EDIT: got it working :)I think this should be made a sticky.Everyone is after this code.Though IE8 has an issue with it. Which I am worried about. Link to comment Share on other sites More sharing options...
Ingolme Posted May 28, 2009 Share Posted May 28, 2009 No good web developers are searching for such a script, I wouldn't sticky this. Passing on old techniques is the best way to prevent people from trying to learn the newer and more correct ones.Apparently, Internet Explorer 7 and under don't support the contentDocument property. Do this: <script type="text/javascript">function sizeFrame() {var F = document.getElementById("myFrame"); if(F.contentDocument) { F.height = F.contentDocument.body.offsetHeight+20; } else { F.height = document.frames["myFrame"].document.body.offsetHeight+20; }}window.onload = sizeFrame;</script> Link to comment Share on other sites More sharing options...
novartic Posted May 28, 2009 Author Share Posted May 28, 2009 No good web developers are searching for such a script, I wouldn't sticky this. Passing on old techniques is the best way to prevent people from trying to learn the newer and more correct ones.But remember, this is not like any normal layed out standard site.The way the site its structured is so that on the system teachers and alike can alter certain pages which they have permission for. With out having access/viewing to other pages. Unfortunately we had to make all the pages in there own separate directory's down from the root of the index which I was not happy about. Hence the need for iframes so that no user brakes any of the template. Most the users use word to do the pages which I also dont like. But we do not have time to train these people to use applications like dreamweaver.Using include was an option which I had a look at, but when you come to click on a link, the main site template with the links etc.. went.This site needs to be very simple and low code maintenance, due to the fact if i was not here, some one else with no skills could take over. Hence why I have commented though out the script and tryed to make it as easy as possible with out having thousands of pages.If there was another way, then I would do it. There probably is, but I have not yet learned about it.EDIT: Just added this source to every page and it works. Thank you very very very much for your help here. I have spent countless hours trying to find a way around it and you are the star. Although its some what not standard what we have done here, it will hopefully be the last and first time I will ever need to use it. Thanks.I will do further testing before I upload what we now have here on the Intranet to the Internet. Link to comment Share on other sites More sharing options...
novartic Posted July 13, 2009 Author Share Posted July 13, 2009 Sorry to bring this up again. The script does not work correctly still in IE7. Found this out the other day. Are there any other ways of obtaining the hight from the main document? <script type="text/javascript">function sizeFrame() { var F = document.getElementById("myFrame"); if(F.contentDocument) {alert("running frame hight method 1"); F.height = F.contentDocument.body.offsetHeight+30; } else if{alert("running frame hight method 2 as 1 does not work"); } else {alert("running frame hight method 3 as 1 and 2 does not work"); F.height = document.frames["myFrame"].document.body.offsetHeight+40; }alert("loading page title junk that dont work");}window.onload = sizeFrame;</script> I gathered I have to use an else if before the else. Is this correct? Link to comment Share on other sites More sharing options...
Ingolme Posted July 13, 2009 Share Posted July 13, 2009 You only need else if() if you have another condition to test.What exactly is not working? I tested my code and it works just fine in all the browsers I tried. Link to comment Share on other sites More sharing options...
novartic Posted July 14, 2009 Author Share Posted July 14, 2009 Interesting, as you are correct as it works fine one Fire fox V3.0.11, Google Chrome 2.0.172.33 were as on IE7 V7.0.5730.11 it does not.If the page was constructed by tables (which it is), would this affect the final output? I mean like, the JS might only get the overall hight of the document from the content, and will ignore the fact there are brakes and tables etc.. if you get were I am coming from.What's not working is the following.If you have a long document, its only expanding half of the way or three quarters of the way down. There for leaving a scroll bar for the iframe still. Link to comment Share on other sites More sharing options...
Ingolme Posted July 14, 2009 Share Posted July 14, 2009 Try checking document.documentElement.offsetHeight to see if it gives a better result. Margins of nested elements get placed outside the outmost container if there's nothing between them. Some of these margins might be placed around the <body> element.And if not, maybe clientHeight will work better for this purpose than offsetHeight. Link to comment Share on other sites More sharing options...
novartic Posted July 14, 2009 Author Share Posted July 14, 2009 sorry, i edited my post. Link to comment Share on other sites More sharing options...
Ingolme Posted July 14, 2009 Share Posted July 14, 2009 sorry, i edited my post.I'd have to see the page in question myself to find out what exactly isn't working. Until then, I can only make guesses. Link to comment Share on other sites More sharing options...
novartic Posted July 14, 2009 Author Share Posted July 14, 2009 OK, its the Home page and the Curriculum pages.http://www.oakmead.dorset.sch.uk/But that link does not have the modd's I am currently doing, but it does the the original iframe hight JS code that we were dealing with.With what were doing now though..... on the curriculum page.Method 1 does nothing.Method 2 processes, but then totally makes the iframe or its contents totally disappear.Method 3 works, but only expands the iframe for half of the document.Method 4, 4b works fine for the home page only. <script type="text/javascript">function sizeFrame() { var F = document.getElementById("myFrame"); if(F.contentDocument) {alert("Running frame hight method 1"); F.height = document.documentElement.offsetHeight; } else if(F.document) {alert("Running frame hight method 2"); F.height = document.documentElement.clientHeight; } else {alert("Running frame hight method 3"); F.height = document.frames["myFrame"].document.body.offsetHeight; }}window.onload = sizeFrame;</script> Method 4 <script type="text/javascript">function sizeFrame() { var F = document.getElementById("myFrame"); if(F.contentDocument) {alert("running frame hight method 4a"); F.height = F.contentDocument.body.offsetHeight+30; } else if(F.document) {alert("running frame hight method 4b"); F.height = document.documentElement.offsetHeight; } else {alert("running frame hight method 4c"); F.height = document.frames["myFrame"].document.body.offsetHeight+40; }}window.onload = sizeFrame;</script> Link to comment Share on other sites More sharing options...
Ingolme Posted July 14, 2009 Share Posted July 14, 2009 I was referring to document.frames["myFrame"].document.documentElement.offsetHeight.By logic, the document I'm trying to measure isn't the current one, it's the one inside the iframe. Link to comment Share on other sites More sharing options...
novartic Posted July 14, 2009 Author Share Posted July 14, 2009 So you mean like this? <script type="text/javascript">function sizeFrame() { var F = document.getElementById("myFrame"); if(F.contentDocument) {alert("running frame hight method 1"); F.height = F.contentDocument.documentElement.offsetHeight+30; } else if(F.document) {alert("running frame hight method 2 as 1 does not work"); F.height = document.documentElement.offsetHeight; } else {alert("running frame hight method 3 as 1 and 2 does not work"); F.height = document.frames["myFrame"].document.documentElement.offsetHeight+40; }}window.onload = sizeFrame;</script> <script type="text/javascript">function sizeFrame() { var F = document.getElementById("myFrame"); if(F.contentDocument) {alert("running frame hight method 1"); F.height = document.documentElement.offsetHeight; } /*else if(F.contentdocument) {alert("running frame hight method 2"); F.height = document.documentElement.clientHeight; }*/ else {alert("running frame hight method 3"); F.height = document.frames["myFrame"].document.documentElement.offsetHeight; }}window.onload = sizeFrame;</script> Link to comment Share on other sites More sharing options...
novartic Posted July 14, 2009 Author Share Posted July 14, 2009 Im lost Sorry.... Link to comment Share on other sites More sharing options...
Ingolme Posted July 14, 2009 Share Posted July 14, 2009 This line isn't going to work: F.height = document.documentElement.offsetHeight; Do you understand the code?What you're doing is assigning the height of the parent document to the iframe, which isn't what you want to do. Link to comment Share on other sites More sharing options...
novartic Posted July 14, 2009 Author Share Posted July 14, 2009 EDIT:"Do you understand the code?" = Hardy at all... but getting there via this. = http://www.w3schools.com/js/js_if_else.aspI haven't yet looked at your last post. But... (comments are inside.) <script type="text/javascript">function sizeFrame() { var F = document.getElementById("myFrame"); if(F.contentDocument) {//In fire fox, Home and Curriculum works ok with this one.alert("running frame hight method 1"); F.height = F.contentDocument.documentElement.offsetHeight; }//In IE7, home works ok with this one.//In IE7 Curriculum chooses this one. But the page does nothing at all.else if(F.document) {alert("running frame hight method 2"); F.height = document.documentElement.offsetHeight; } else {alert("running frame hight method 3"); F.height = document.frames["myFrame"].document.documentElement.offsetHeight; }}window.onload = sizeFrame;</script> Link to comment Share on other sites More sharing options...
Ingolme Posted July 14, 2009 Share Posted July 14, 2009 EDIT:"Do you understand the code?" = Hardy at all... but getting there via this. = http://www.w3schools.com/js/js_if_else.aspI haven't yet looked at your last post. But... (comments are inside.)<script type="text/javascript">function sizeFrame() { var F = document.getElementById("myFrame"); if(F.contentDocument) {//In fire fox, Home and Curriculum works ok with this one.alert("running frame hight method 1"); F.height = F.contentDocument.documentElement.offsetHeight; }//In IE7, home works ok with this one.//In IE7 Curriculum chooses this one. But the page does nothing at all.else if(F.document) {alert("running frame hight method 2"); F.height = document.documentElement.offsetHeight; } else {alert("running frame hight method 3"); F.height = document.frames["myFrame"].document.documentElement.offsetHeight; }}window.onload = sizeFrame;</script> You're complicating the script a lot, and you need to indent your code in a more readable way.Put this on your page and see what it does:function sizeFrame() { var F = document.getElementById("myFrame"); if(F.contentDocument) { F.height = F.contentDocument.documentElement.offsetHeight; } else { F.height = document.frames["myFrame"].document.documentElement.offsetHeight; }} Link to comment Share on other sites More sharing options...
novartic Posted July 14, 2009 Author Share Posted July 14, 2009 Nope, the curriculum page still does not work correctly in IE7 with this. Also, you took out method 2 that did work for home but not curriculum. Link to comment Share on other sites More sharing options...
Ingolme Posted July 14, 2009 Share Posted July 14, 2009 Your "method 2" has this line: F.height = document.documentElement.offsetHeight; And that line is not adopting the height of the document that's in the frame, it's adopting the height of the document that contains the frame.While it may appear to be working for one page, it might not work for others because the document inside the frame is taller than the document that contains the frame.----You can try this to see if it works: function sizeFrame() { var F = document.getElementById("myFrame"); if(F.contentDocument) { F.height = F.contentDocument.documentElement.offsetHeight; } else if(F.contentWindow) { F.height = F.contentWindow.document.documentElement.offsetHeight; } else { F.height = document.frames["myFrame"].document.documentElement.offsetHeight; }} Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.