Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Iframe challenges

  1. #1
    Join Date
    Jul 2011
    Posts
    21
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default Iframe challenges

    Please i really need great help on something i am working on, i want to create a website where i will load the content of an external website using iframe to dynamically display the content on a 100% width and height, or if there is any means of making the external content fit in to an iframe. see examples of what i meant here @

    http://www.nairahub.com/demo/iframe.html {this is the one i will like to perfect on so i can have space for ads at the top, side and footer}

    http://www.nairahub.com/demo/test.html

    http://www.nairahub.com/demo/test2.html

    plz i really need your helps.

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,881
    Thanks
    49
    Thanked 266 Times in 258 Posts
    Blog Entries
    56

  3. #3
    Join Date
    Jul 2011
    Posts
    21
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    Sir i am a newbie and i have tried to understand how to impliment the script and just dont know where to start, please give me some heads up...thanks i appreciate your kind help.

  4. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,881
    Thanks
    49
    Thanked 266 Times in 258 Posts
    Blog Entries
    56

    Default

    I don't know exactly what you are trying to achieve, but if you want something like THIS, then put the following in index.html:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    <title></title>
    
    <style type="text/css">
    body,html {overflow:hidden; height:100%; width:100%}
    body {background: #dedede; font-family: verdana; font-size: 90%}
    #header {position: absolute; left: 150px; top: 10px; right:150px; height: 70px; border: 1px solid black; overflow: auto; padding: 5px; text-align: center; background: white}
    #footer {position: absolute; left: 150px; bottom: 10px; right:150px; height: 70px; border: 1px solid black; overflow: auto; padding: 5px; text-align: center; background: white}
    </style>
    
    <script type="text/javascript">
    contentURL = top.document.URL.substring(top.document.URL.indexOf('?')+1, top.document.URL.length);
    if (top.location == contentURL)top.location.href='index.html?http://www.nairahub.com/forum';
    
    document.write('<div style="position:absolute; left:150px;top: 100px; right: 150px; bottom: 100px"><iframe  style="position:absolute;width:100%;height:100%; border:1px solid black;background:white;" frameborder=0 src="' + contentURL + '"><\/iframe><\/div>');
    </script>
    
    </head>
    
    <body ><div>
    <div id="header">
    HEADER<br>This is my header
    </div>
    
    <div id="footer">
    FOOTER<br>This is my footer
    </div>
    
    <div style="position: absolute; left:10px; top: 40%; width: 100px; height: 60px; overflow: auto; border: 1px solid black; padding:10px">
    <a href="javascript: void(0)" onclick="top.location.href='?http://www.nairahub.com/forum'">nairahub</a><br>
    <a href="javascript: void(0)" onclick="top.location.href='?http://mavtrevor.com'">mavtrevor</a><br>
    <a href="javascript: void(0)" onclick="top.location.href='?http://www.google.com'">Google</a><br>
    </div>
    
    </div></body>
    
    </html>
    WARNING:
    This does not work well on your hard disk if you are using Internet Explorer or Google Chrome, but everything works fine on the Internet. So it should work if your upload index.html to your server.
    ===
    Arie.

  5. The Following User Says Thank You to molendijk For This Useful Post:

    mavtrevor (07-29-2011)

  6. #5
    Join Date
    Jul 2011
    Posts
    21
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    Awesome this is exactly what i wanted....you are the best. Thanks very much, then i wont wanna display this url for the sites, i want to use a url shortner, any ideas?

  7. #6
    Join Date
    Jul 2011
    Posts
    21
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    please how can i remove the scrollbar and make the content dynamically fit in to the iframe even if the scrollbar will have to appear on the windows not anywhere inside the page?

  8. #7
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,881
    Thanks
    49
    Thanked 266 Times in 258 Posts
    Blog Entries
    56

    Default

    Alas, a shorter url and a scrollbar outside the iframe aren't possible if you want to load external files (foreign domain) into the iframe.
    ===
    Arie.

  9. The Following User Says Thank You to molendijk For This Useful Post:

    mavtrevor (07-30-2011)

  10. #8
    Join Date
    Jul 2011
    Posts
    21
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    Thanks i appreciate, but how can i make the content area bigger to cover the right hand side of the page cos there is unused space at that corner. i tried expanding from 90% to 120% and it showed a scrollbar at the bottom. i hope yu understand me.

  11. #9
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,881
    Thanks
    49
    Thanked 266 Times in 258 Posts
    Blog Entries
    56

    Default

    I thought you wanted space for ads there. Anyhow, to make the iframe stretch from the extreme left to the extreme right, replace:
    Code:
    document.write('<div style="position:absolute; left:150px;top: 100px; right: 150px; bottom: 100px"><iframe  style="position:absolute;width:100%;height:100%; border:1px solid black;background:white;" frameborder=0 src="' + contentURL + '"><\/iframe><\/div>');
    with:
    Code:
    document.write('<div style="position:absolute; left:1px;top: 100px; right: 1px; bottom: 100px"><iframe  style="position:absolute;width:100%;height:100%; border:1px solid black;background:white;" frameborder=0 src="' + contentURL + '"><\/iframe><\/div>');
    You can stretch the header and footer in the same way (see the css in the head section).
    ===
    Arie.
    EDIT: Sorry, I made a mistake. Since you only want the extreme right area, you should do:
    style="position:absolute; left:150px;top: 100px; right: 1px; bottom: 100px"
    Last edited by molendijk; 07-30-2011 at 12:12 PM. Reason: Correction

  12. The Following User Says Thank You to molendijk For This Useful Post:

    mavtrevor (07-30-2011)

  13. #10
    Join Date
    Jul 2011
    Posts
    21
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    you are perfecting this script for me thanks for all, i wanna ask a question, plz is there a way for the iframe to dynamically determine the height of the external site and adjust its own height automatically to match that one so that when a page loads, it will display the content of the external source with same height?

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
  •