Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 12
  1. #1
    Junior Member
    Join Date
    Apr 2009
    Posts
    9
    Member #
    18738
    Hello,
    my first post here.

    I'm trying to create this:

    __________
    Header + menu
    __________
    content area
    __________
    Footer
    __________

    The problem I have lies in content area. I'm currently trying to use iframe that open pages I link from menu. The problem I have is that I want to iframe and content div to scale in height according to iframe target pages height. I managed to get iframe scaling on blank test page with few links but when I implemented it on real page inside div and open short page after opening long page the div doesnt shrink to fit long page.

    Html code for scaling iframe:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    </head>

    <script language="javascript" type="text/javascript">
    function calcHeight(id)
    {
    var the_height=
    document.getElementById(id).contentWindow.
    document.body.scrollHeight;
    document.getElementById(id).height=
    (the_height+50);
    }
    </script>


    <iframe width="800" name="search" id="iframe" scrolling="NO" frameborder="0" onload="calcHeight(this.id)" src="content.html" ></iframe>
    <body>
    <a href="testi.html" target="search">Link</a> <a href="footer.html" target="search">Link</a>
    </body>
    </html>

    div code for iframe div: (This is the problem, how to make it to refresh when iframe content changes?)

    <div class="iframe">


    <iframe width="800" name="contentarea" id="iframe" scrolling="auto" frameborder="0" onload="calcHeight(this.id)" src="footer.html" ></iframe>
    </div>


    This works perfectly but the problem is that once it loads long page and after you load short page div will stay same height long page is. The thing is: How I do get the div to match height of iframe inside the div? Basically I think when clicking on menu link item it would need to refresh div iframe is located inside but I dont know how to do that.

    Appreciate help, thanks in advance.

    Edit: managed to get div scale but it wont scale to full lenght, aka long pages will not appear as long iframe but semilong with scrollbars.

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    Why are you using an <iframe>?
    Explain the purpose.

    I mention this because (I think) it's impossible to determine the height,
    and you're going to end-up with a mess ... getting it to look right in
    all browsers.

    Problem #2,
    Any links that exist within that frame will only open other pages
    inside the frame. You will essentially lose control over it. The only
    salvation you would have is if the pages within the <iframe> are your
    own pages .. only if you can control their content and links.

    It sounds like you want to display other people's web pages within yours...
    and I'm not sure why anyone would want to do that.

    If the content you're trying to display in your <iframe> is your own pages (content),
    then you wouldn't need an <iframe> ... that's the irony.


    .


  4. #3
    Junior Member
    Join Date
    Apr 2009
    Posts
    9
    Member #
    18738
    Quote Originally Posted by mlseim
    Why are you using an <iframe>?
    Explain the purpose.

    I mention this because (I think) it's impossible to determine the height,
    and you're going to end-up with a mess ... getting it to look right in
    all browsers.

    Problem #2,
    Any links that exist within that frame will only open other pages
    inside the frame. You will essentially lose control over it. The only
    salvation you would have is if the pages within the <iframe> are your
    own pages .. only if you can control their content and links.

    It sounds like you want to display other people's web pages within yours...
    and I'm not sure why anyone would want to do that.

    If the content you're trying to display in your <iframe> is your own pages (content),
    then you wouldn't need an <iframe> ... that's the irony.


    .
    Problem solved actually. I ended to rework my page with php includes, working as intended now. And no, I did not want to show other peoples pages

  5. #4
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    I'm glad you are using PHP includes instead of <iframe> or <frame>.
    you did the right thing. We don't flame people here ... show us your stuff,
    we'd really be interested to see it.


  6. #5
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Yeah, don't leave us hangin'!

  7. #6
    Junior Member
    Join Date
    Apr 2009
    Posts
    9
    Member #
    18738
    Quote Originally Posted by mlseim
    I'm glad you are using PHP includes instead of <iframe> or <frame>.
    you did the right thing. We don't flame people here ... show us your stuff,
    we'd really be interested to see it.
    I will, actually I can link it now but be warned, code is not tidyed and its not validated, graphics are placeholders and it does not have any content yet (and I havent built css for content yet either :P) Just finished infrastructure.

    PS: PhP might be horrible because I had not coded PhP ever at all 2 days ago.

    My goal was to build easy to update no fuzz base for my coming site. Header will be in seperate PhP from where it is easy to update, new links only need to be added to case list contained in index. Footer is also contained in separate file so basically when I add/update content I can do it with ease. I did not want to use any CMS system so basically this is "my CMS"

    http://d-media.comuf.com

    Remember, theyre very much in WIP state.

    TODO:
    - Graphics
    - Content
    - system that works with php includes for multipage section navigation, I have vision for it .

  8. #7
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    If you make a separate file called "style.css" and put all of your CSS
    stuff in that file, you can use the same CSS stylesheet for all of your pages.

    You then put this in your <head> section on all pages ...
    <link href="style.css" rel="stylesheet" type="text/css" media="all" />

    To get rid of the blue border around images ...

    img {
    border:none;
    }

    Good start though ...
    Good idea about a global header.php and footer.php

    And content could also be "PHP includes" to stick plain text files within the page(s).


  9. #8
    Junior Member
    Join Date
    Apr 2009
    Posts
    9
    Member #
    18738
    Quote Originally Posted by mlseim
    If you make a separate file called "style.css" and put all of your CSS
    stuff in that file, you can use the same CSS stylesheet for all of your pages.

    You then put this in your <head> section on all pages ...
    <link href="style.css" rel="stylesheet" type="text/css" media="all" />

    To get rid of the blue border around images ...

    img {
    border:none;
    }

    Good start though ...
    Good idea about a global header.php and footer.php

    And content could also be "PHP includes" to stick plain text files within the page(s).
    Content is includes and as I include header.php which has link to stylesheet it gets automatically included in all pages that gets included in content area, so only page I have attached stylesheet is header.php. Here is php code for my index2.php which takes care of all content:


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>D-Media - WIP</title>

    <?php include 'header.php'; ?>

    <?php
    switch($_GET['page']){

    case main:
    include("content.php");
    break;

    case about:
    include("about.php");
    break;

    case "":
    include("content.php");
    break;

    default:
    include("404_sivu.php");
    }
    ?>

    <?php include 'footer.php'; ?>
    </html>

    (tags not appearing here get included from header and footer)

    Thanks for reminding me about border:none; I forgot it totally, thats what it does when you dont sleep at nights Have to add that to stylesheet immediately and attach style sheet to intro page.

    I assume you mean 1st page with intro pic with that attaching style sheet as style sheet comes included into all other pages from header.php? template.php that I use as base for new pages I add to site is blank.

  10. #9
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,693
    Member #
    5580
    Liked
    717 times
    I see, you're putting the CSS in the included "header.php".
    One reason to have an actual "separate" .css style sheet file is the ability
    to switch those if needed. Some people like to have alternate style sheets
    to use with their templates ... one for viewing, one for printouts.

    But in the end, it all comes out the same ... it's just an issue of future flexibility.


  11. #10
    Junior Member
    Join Date
    Apr 2009
    Posts
    9
    Member #
    18738
    Quote Originally Posted by mlseim
    I see, you're putting the CSS in the included "header.php".
    One reason to have an actual "separate" .css style sheet file is the ability
    to switch those if needed. Some people like to have alternate style sheets
    to use with their templates ... one for viewing, one for printouts.

    But in the end, it all comes out the same ... it's just an issue of future flexibility.
    Ahh thats true btw. Hmm gotta try to figure out alternative if I am going to change it.

    One option might be create include before header.html where scripts and css files would be loaded, if those would need t be changed that would be simple using case switch.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

html how to scale a web page to fit in an iframe

,

iframe scaling

,

scale page inside fit iframe

,

scale webpage to fit frame

,

scale webpage to fit iframe

,

scaling content inside an iframe

Click on a term to search for related topics.
All times are GMT -6. The time now is 03:07 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com