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 to the CF scene
    Join Date
    Jun 2010
    Location
    Cleveland, Ohio
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Help with an "If... Else" Statement for loading an Iframe based on Resolution

    Hi, I was working on my web page and noticed that depending on the width of the screen, the Iframe I created would not display correctly. Because of that I needed to come up with a piece of code that would detect the screens horizontal resolution and pick the right Iframe to be loaded. Below are the scenarios that specify which one should be loaded. I am very bad with javascript so could someone help me come up with a piece of code that would load the right frame? Thanks. The web address where the code will go is www.jumbledfun.com/nasa.html.



    If the horizontal resolution of the screen is less then 1600 I would like this Iframe to be loaded: (It Would Go Under The If Part)

    Code:
    <iframe src="http://www.jumbledfun.com/nasaframes/nasalivelr.html"  width= "55%" height= "580%" scrolling="no" frameborder="0"/> </iframe>
    If the horizontal resolution of the screen is 1600 or more I would like this Iframe to be loaded: (It Would Go Under The Else Part)

    Code:
    <iframe src="http://www.jumbledfun.com/nasaframes/nasalive.html"  width= "100%" height= "300%" scrolling="no" frameborder="0"/> </iframe>
    This is the format that I would want it in:

    Code:
    <script type="text/javascript">
    
    if (condition)
      {
      code to be executed if condition is true
      }
    else
      {
      code to be executed if condition is not true
      }
    
    </script>
    Last edited by DeMaster; 06-20-2010 at 05:36 PM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,159
    Thanks
    203
    Thanked 2,549 Times in 2,527 Posts
    Here you are:-

    Code:
    <script type = "text/javascript">
    var sw = screen.width;
    if (sw <1600) {
    document.write('<iframe name="myFrame" frameborder="0" scrolling="no" height="580%" width="55%"  src="http://www.jumbledfun.com/nasaframes/nasalivelr.html"></iframe>'); 
    }
    else {
    document.write('<iframe name="myFrame" frameborder="0" scrolling="no" height="300%" width="100%"  src ="http://www.jumbledfun.com/nasaframes/nasalive.html"></iframe>');
    }
    
    </script>
    Another way (ensure iframe is loaded before script executes):-

    Code:
    <iframe id = "myFrame" frameborder = "no" scrolling = "no"></iframe>
    
    <script type = "text/javascript">
    var sw = screen.width
    var iframe = document.getElementById('myFrame'); 
    
    if (sw <1600) {
    
    iframe.src = "http://www.jumbledfun.com/nasaframes/nasalivelr.html"; 
    var iframeElement = parent.document.getElementById('myFrame'); 
    iframeElement.style.height = "55%"; // or use px
    iframeElement.style.width = "580%"; // or use px 
    }
    
    else {
    iframe.src = "http://www.jumbledfun.com/nasaframes/nasalive.html"; 
    var iframeElement = parent.document.getElementById('myFrame'); 
    iframeElement.style.height = "100%"; 
    iframeElement.style.width = "350%"; 
    }
    
    </script>
    It is preferable to express the dimensions in pixels rather than as a percentage.




    A teacher informed my son that "There are two words which you should never use in school homework - one is cool and the other is gross". "No problem", replied the boy, "What are the two words?"
    Last edited by Philip M; 06-20-2010 at 04:05 PM. Reason: typo

  • #3
    New to the CF scene
    Join Date
    Jun 2010
    Location
    Cleveland, Ohio
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you, that worked well and the code was not as complex as I thought it would be.


  •  

    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
    •