Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    16
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Question Full screen iFrame code

    What is the difference between this 2 codes.. The first code works fine for a full screen iframe and the other code too.. So why should I use the second code.? is there something special..? why the code is so long ? Is important to ad CSS in this page...? Is the CSS doing something special...? Im confused I dont see the difference...

    First example
    Code:
    <html><head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"></head><body bgcolor="#000000">
    <iframe name='myiframe' id='myiframe' src='http://www.mywebsite.com' 
     style='position:absolute; top:0px; left:0px; width:100%; height:100%; 
            z-index:999' onload='sendParams();' frameborder='no'>
    </iframe>
    </body></html>
    VS

    Second example

    Code:
    <!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" lang="EN">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Full Screen Iframe</title>
    <style type="text/css">
    html 
    {
     overflow: auto;
    }
     
    html, body, div, iframe 
    {
     margin: 0px; 
     padding: 0px; 
     height: 100%; 
     border: none;
    }
     
    iframe 
    {
     display: block; 
     width: 100%; 
     border: none; 
     overflow-y: auto; 
     overflow-x: hidden;
    }
    </style>
    </head>
    <body>
    
    <iframe id="tree" name="myiframe" src="http://mywebsite.com" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="auto"></iframe>
    
    </body>
    </html>

  • #2
    New Coder
    Join Date
    Jul 2011
    Posts
    16
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Well, I dont like the second code because it has a "scroll bar".. but anyways..even with out the scroll bar,
    I still dont know if will be a better option using the second code..

  • #3
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    I think this is a bad comparrison to demonstrate the benifits of CSS. The two examples aren't the same, each containing different styles, extra styles, extra HTML etc.

    Consider this CSS example. All the styles for the HTML document and iframe are contained within the CSS in the head of the page.
    Code:
    <!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" lang="EN">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Full Screen Iframe</title>
    <style type="text/css">
     
    body, iframe 
    {
     margin: 0px; 
     padding: 0px; 
    }
     
    iframe 
    {
     width: 100%; 
     height: 100%;
     border: none; 
     overflow-y: auto; 
     overflow-x: hidden;
     border: 0;
     margin: 0;
    }
    </style>
    </head>
    <body>
    
    <iframe name="myiframe" src="http://mywebsite.com"></iframe>
    
    </body>
    </html>
    Now with only HTML.
    Code:
    <!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" lang="EN">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Full Screen Iframe</title>
    
    </head>
    <body style="margin:0px; padding:0px;>
    
    <iframe name="myiframe" src="http://mywebsite.com" frameborder="no" scrolling="auto" marginheight="0" marginwidth="0" width="100%" height="100%"></iframe>
    
    </body>
    </html>
    The second one may appear simpler, but lets create a senario. Lets say you have a website with 30 pages and each one has an iframe. You decide you actually want the iframe to cover only 90% of the page width and height and for it to have a border. It's only 3 things to change, but over 30 pages that 90 changes.
    Were you to use the first example you'd simply change the values on the one simple style (of course we'd probably be using an external stylesheet in reality) and EVERY page would be effected.


  •  

    Posting Permissions

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