www.webdeveloper.com
Results 1 to 10 of 10

Thread: iFrames ... please don't hate me

  1. #1
    Join Date
    Apr 2011
    Posts
    4

    iFrames ... please don't hate me

    Ok, please don't hate me for this, but I am going to ask if someone would actually make me a webpage. I have tried and tried for so long to get this to work. I have consulted forum after forum, but I still don't know how. It must be something fairly simple tooooooo...oh.uhuhumbluberblubber....

    Here it is - real simple. I want a page and at the top it should have two buttons. One shows/hides a first iframe. One show/hides a second iframe. When the page loads, both iframes display below the buttons, each taking up 50% of the page. But when button 1 is pressed, the first iframe disappears and the second expands to take up the whole page. When button 1 is pressed again, the first iframe reappears and takes up 50% again. Same for the second button. Easy or what? I KNOW...IT SOUNDS SO EASY!!!! So why can't I make it work...

    Why O why can't I make it work????????????????

    Any help would be GREATLY appreciated!!!

  2. #2
    Join Date
    Dec 2005
    Posts
    2,984
    what have you tried? post the code and we'll help you build on it
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  3. #3
    Join Date
    Apr 2011
    Posts
    4

    Thank you!

    This is just one of my many attempts:




    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <title>hide/show iframe</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>

    <style type="text/css">
    <!--
    html,body {
    height:100%;
    background-color:#eef;
    }
    #click {
    width:300px;
    line-height:30px;
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:16px;
    color:#667;
    text-align:center;
    background-color:#fff;
    border:3px double #667;
    cursorointer;
    margin:20px auto;
    }
    #click2 {
    width:300px;
    line-height:30px;
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:16px;
    color:#667;
    text-align:center;
    background-color:#fff;
    border:3px double #667;
    cursorointer;
    margin:20px auto;
    #FIRSTframe {
    width:100%;
    height:75%;
    }
    #SECONDframe {
    width:100%;
    height:75%;
    }
    -->
    </style>

    <script type="text/javascript">
    <!--
    function HideFrame1() {
    var fra = document.getElementById ("FIRSTframe");
    if(fra.style.display=="none") {
    fra.style.display="block";
    }
    else {
    fra.style.display="none";

    }
    var frb = document.getElementById ("SECONDframe");
    if(frb.style.display=="none") {
    fra.style.width="50%";
    }
    else {
    fr.style.width="100%";
    }
    }
    function HideFrame2() {
    var fr = document.getElementById ("SECONDframe");
    if(fr.style.display=="none") {
    fr.style.display="block";
    }
    else {
    fr.style.display="none";
    }
    }

    //-->
    </script>

    </head>
    <body>

    <div id="click2" onclick="HideFrame1();">hide/show first iframe</div>
    <div id="click" onclick="HideFrame2()">hide/show second iframe</div>




    <iframe id="FIRSTframe" src="http://www.webdeveloper.com/" frameborder="1" style="width: 100%; height: 75%"></iframe>
    <iframe id="SECONDframe" src="http://www.internet.com/it/" frameborder="1" style="width: 100%; height :75%"></iframe>


    </body>
    </html>

  4. #4
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    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">
    <head>
    <title>hide/show iframe</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
    
    <style type="text/css">
    <!--
    html,body {
    height:100&#37;;
    background-color:#eef;
    }
    #click {
    width:300px;
    line-height:30px;
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:16px;
    color:#667;
    text-align:center;
    background-color:#fff;
    border:3px double #667;
    cursorointer;
    margin:20px auto;
    }
    #click2 {
    width:300px;
    line-height:30px;
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:16px;
    color:#667;
    text-align:center;
    background-color:#fff;
    border:3px double #667;
    cursorointer;
    margin:20px auto;
    }
    #FIRSTframe {
    display:block;
    }
    #SECONDframe {
    display:block;
    }
    -->
    </style>
    
    </head>
    <body>
    <div id="click2" onclick="HideFrame1();">hide/show first iframe</div>
    <div id="click" onclick="HideFrame2()">hide/show second iframe</div>
    
    <iframe id="FIRSTframe" src="http://www.google.com/" frameborder="1" style="width: 100%; height: 40%"></iframe>
    <iframe id="SECONDframe" src="http://www.internet.com/it/" frameborder="1" style="width: 100%; height :40%"></iframe>
    <script type="text/javascript">
    <!--
    
    var fra = document.getElementById("FIRSTframe");
    var frb = document.getElementById("SECONDframe");
    
    function HideFrame1() {
    if(fra.style.display == "none") {
    fra.style.height="80%";
    fra.style.display = "block";
    }
    else {
    fra.style.display="none";
    }
    }
    function HideFrame2() {
    if(frb.style.display == "none") {
    frb.style.height="80%";
    frb.style.display = "block";
    }
    else {
    frb.style.display="none";
    }
    }
    //-->
    </script>
    </body>
    </html>

  5. #5
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    another alternative ( sorry i switched one of the frame source to google the 2 sites look too similar so I did this for testing)


    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">
    <head>
    <title>hide/show iframe</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
    
    <style type="text/css">
    <!--
    html,body {
    height:100&#37;;
    background-color:#eef;
    }
    #click {
    width:300px;
    line-height:30px;
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:16px;
    color:#667;
    text-align:center;
    background-color:#fff;
    border:3px double #667;
    cursorointer;
    margin:20px auto;
    }
    #click2 {
    width:300px;
    line-height:30px;
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:16px;
    color:#667;
    text-align:center;
    background-color:#fff;
    border:3px double #667;
    cursorointer;
    margin:20px auto;
    }
    #FIRSTframe {
    display:block;
    }
    #SECONDframe {
    display:block;
    }
    -->
    </style>
    
    </head>
    <body>
    <div id="click2" onclick="SwitchFrames();">Switch Frames</div>
    <div id="click" onclick="ShowBoth()">Show both</div>
    
    <iframe id="FIRSTframe" src="http://www.google.com/" frameborder="1" style="width: 100%; height: 40%"></iframe>
    <iframe id="SECONDframe" src="http://www.internet.com/it/" frameborder="1" style="width: 100%; height :40%"></iframe>
    <script type="text/javascript">
    <!--
    
    var fra = document.getElementById("FIRSTframe");
    var frb = document.getElementById("SECONDframe");
    
    function SwitchFrames() {
    if(fra.style.display == "none") {
    fra.style.height="80%";
    fra.style.display = "block";
    frb.style.display="none";
    }
    else {
    fra.style.display="none";
    frb.style.height="80%";
    frb.style.display = "block";
    }
    }
    function ShowBoth() {
    fra.style.height="40%";
    fra.style.display = "block";
    frb.style.height="40%";
    frb.style.display = "block";
    }
    
    //-->
    </script>
    </body>
    </html>

  6. #6
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    also a few tips. Since your dealing with Iframes, you need to put the script on the bottom of the page or call it on window.load becuase it appears the browser will not recognize the Iframe as an object until it's done loading, which takes a moment, my preference is to put it at the bottom.

    also, it's not logical to show the iframe at 100&#37; unless you contain it in a wrapper so I went with 80%

    and I would recommend against declaring height and width via CSS and inline css, use one or the other.

    if I'm off on any of this please feel free to correct me

  7. #7
    Join Date
    Apr 2011
    Posts
    4

    Thanks

    Thank you very much! Unfortunately, this is not quite what I was trying to do. I really appreciate your help anyway though!

    I should have made myself more clear: I am looking for am iframe which takes up half the page, but I meant half the page vertically, both iframes being side by side on the page, rather than one above another. I trying to make the frame page display two documents side by side, but then if the user only wants to see one, he can switch off one iframe as it were, and view the one he wants across the full width of the page.

    Don't feel you have to help again - it was very kind of you to try helping already!

  8. #8
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    ohhhhh. ya gotta be specific bud . easy enough ( I used 49% width because of the scroll bars)

    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">
    <head>
    <title>hide/show iframe</title>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
    
    <style type="text/css">
    <!--
    html,body {
    height:100%;
    background-color:#eef;
    }
    #click {
    width:300px;
    line-height:30px;
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:16px;
    color:#667;
    text-align:center;
    background-color:#fff;
    border:3px double #667;
    cursor:pointer;
    margin:20px auto;
    }
    #click2 {
    width:300px;
    line-height:30px;
    font-family:verdana,arial,helvetica,sans-serif;
    font-size:16px;
    color:#667;
    text-align:center;
    background-color:#fff;
    border:3px double #667;
    cursor:pointer;
    margin:20px auto;
    }
    #FIRSTframe {
    	display:inline;
    }
    #SECONDframe {
    	display:inline;
    }
    -->
    </style>
    
    </head>
    <body>
    <div id="click2" onclick="SwitchFrames();">Switch Frames</div>
    <div id="click" onclick="ShowBoth()">Show both</div>
    
    <iframe id="FIRSTframe" src="http://www.google.com/" frameborder="1" style="width: 49%; height: 80%"></iframe>
    <iframe id="SECONDframe" src="http://www.internet.com/it/" frameborder="1" style="width: 49%; height :80%"></iframe>
    <script type="text/javascript">
    <!--
    
    var fra = document.getElementById("FIRSTframe");
    var frb = document.getElementById("SECONDframe");
    
    function SwitchFrames() {
    if(fra.style.display == "none") {
    fra.style.width="100%";
    fra.style.display = "inline";
    frb.style.display="none";
    }
    else {
    fra.style.display="none";
    frb.style.width="100%";
    frb.style.display = "inline";
    }
    }
    function ShowBoth() {
    fra.style.width="49%";
    fra.style.display = "inline";
    frb.style.width="49%";
    frb.style.display = "inline";
    }
    
    //-->
    </script>
    </body>
    </html>

  9. #9
    Join Date
    Apr 2011
    Posts
    4

    Smile Thank you!!!!

    WOW. THANK YOU VERY MUCH! THIS WORKS PERFECTLY!!!


    THANK YOU!!!!!! it is really very kind of you to do this for a complete stranger!

  10. #10
    Join Date
    Apr 2010
    Location
    Salem,Ma
    Posts
    623
    no problem It's good practice

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles