Results 1 to 9 of 9

Thread: resizable iframe help

  1. #1
    Join Date
    Apr 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default resizable iframe help

    I need some help building a resizable iframe I need to load a external pager were I don't have control over the size of the page. I'll appreciate your help

  2. #2
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,486
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    You can specify width and height to :auto in CSS. But this doesn't include the padding and margins when done. I would say to use :inherit, but no version of IE uses that.

    or set overflow: visible (it just overlaps the container box, or overflow:auto, to keep it in the container box and add scrollbar(s).
    {CWoT - Riddle } {OSTU - Psycho} {Invasion - Team}
    Follow Me on Twitter: @Negative_Chaos
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  3. #3
    Join Date
    Dec 2009
    Posts
    48
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default similar question

    Hello, I actually have a similar question. I have multiple basic html pages that I need to load into another page displaying information.

    Here's my line of code I use to insert the pages:

    Code:
    <iframe name="pagewindow" style="border:3px double #6f1346" width=700 height=1500 src="link_to_pages.html"></iframe>
    The thing is... that I link to one of the starting pages and from there, people can click on links or linked images that will lead to another page, which is loaded into the same frame.

    However, these pages don't all have the same size. I do not work (at least for these pages) with SQL, so is there another possibility? If not, how do I use the SQL? I'd prefer it if the page resizes to the maximum length of the pages it has to load. That way, I don't get the horrible scroll bar.

    Also, there is a border around the frame. Is there a way to get rid of it? I know I can say border none or border size 0, but that way, it'll still leave some traces of a border, so then it's better to have a recognisable border.

    Thank you for helping me out!

  4. #4
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,486
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    Same answer. Just use width and height set to auto. Or leave them off at all. default is set to auto. Remember though your iframe is inside your page, which has borders even if you set them to 0. (borders like edges of the page, not like colored decorations). Therefore the iframe has a size limit set automagically before a scroll bar is introduced. Basically the page the iframe is on is only so big, but if you pull in a page that is set to a larger size then the iframe can stretch in it's own internal limits you will have a scroll bar. You can set overflow to hidden, but then the content wont be 100% viewable.

    As for the colored type borders, just use CSS to style the iframe just as you would any element. iframe by itself is a CSS ready element, so it doesn't need a container p or div...

    Code:
    iframe {
    	height: 100%;
    	width: 100%;
    	margin: 0 0;
            border-style: none;
            border:0;
    }
    {CWoT - Riddle } {OSTU - Psycho} {Invasion - Team}
    Follow Me on Twitter: @Negative_Chaos
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  5. #5
    Join Date
    Dec 2009
    Posts
    48
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    well, the reason I asked... is cos that doesn't work. it works for the width, but not for the height.

    When I use your suggestion (through a css in the document, an external css file and inside the iframe code line), I just get a small iframe and the horrid scroll bar since the pages are longer than the iframe.

    I cannot put the css lines in the documents that'll be inserted in the iframe, but it has to go on the main document, right? Well it seems as if the document doesn't know how long the file is, since I get the same height (with height:100% and height:auto) with all the documents (which is about 150px and I need at least 1500px for most of the pages).

    That was why I asked, I was hoping there was another way to do this, since this option doesn't work.

    Thnx for the reply, I hope you got another option, if not, I'll need to stick with a fixed height and ignore the fact that there are about 30 pages (out of 250) that have a height of around 300px instead of the approximately 1500px for the rest.

  6. #6
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,486
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    Yes, the CSS is for the page with the iframe on it, not for the pages loaded into the iframe.

    Also, on your "old" code you have styling there:

    style="border:3px double #6f1346" width=700 height=1500 src="link_to_pages.html"
    If this is still there, it will override the CSS for the iframe in the CSS file. So that needs to go.

    If you know the height you want the iframe to be, then just use that...

    Code:
    iframe {
    	width: 100%;
            height: 1500px;
    	margin: 0 0;
            border-style: none;
            border:0;
    }
    And if none of that works have a look at this page I just found. Read part 1 and part 2 for an understanding of the iframe situation you are experiencing.
    {CWoT - Riddle } {OSTU - Psycho} {Invasion - Team}
    Follow Me on Twitter: @Negative_Chaos
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  7. #7
    Join Date
    Dec 2009
    Posts
    48
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Of course I had already deleted the styling part in the iframe code itself.

    And the whole reason why I asked this, is because some of the pages only need a height of 300px (approximately) instead of the 1500px for most of the other pages. And all are approximately.

    Meaning, on a whole lot of pages, there's a (big) empty space at the bottom. So therefore, I asked if it were possible to get an auto height, so I won't have any blank space that isn't filled, but just stretches the page.

    Also, I've got a 'back' button on the pages, which automatically goes to the last visited page. However, if I was on a long page when I press the back button, and I go back to a short page, I view the blank space of the previous page. So if there would be an auto height, I wouldn't be viewing blank space.

    I hope you understand what I'm saying. And I don't really know why it's not working...

  8. #8
    Join Date
    Aug 2005
    Location
    Other Side of My Monitor
    Posts
    3,486
    Thanks
    5
    Thanked 105 Times in 104 Posts
    Blog Entries
    1

    Default

    Did you read the link I posted above? It's more or less a tutorial. I am out of options at this point as we have officially reached my limit of understanding of iFrames.
    {CWoT - Riddle } {OSTU - Psycho} {Invasion - Team}
    Follow Me on Twitter: @Negative_Chaos
    PHP Code:
    $result mysql_query("SELECT finger FROM hand WHERE id=3");
    echo 
    $result

  9. #9
    Join Date
    Dec 2009
    Posts
    48
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Well I only saw it after your post, lol.

    Anyway, I've been searching the web endlessly for a solution, but I still haven't found anything that works in IE, FF and Chrome at the same time. I do have a solution for IE or Chrome, none for FF and still none for all three of them. (disregarding the rest of the browsers).

    I understand that I've reached your limits of knowledge at this point, but maybe you can help me out with something else.... Well, a little bit different then... haha

    The only way I am using a frame, is because I've got a whole lot of pages (app. 1000 pages or even more) I need to load into my site. My site is build with Joomla, so creating all of those pages is a lot more work then copy and paste the code in basic html.

    So, I only need SOMETHING to add this into my main page. Is there something else I can use to add a page into another page, except iframes? If there's another way to do this, maybe I'll/we'll find a solution for the page height sooner.

    Any idea's?

Bookmarks

Posting Permissions

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