...

View Full Version : Resolved Help with an "If... Else" Statement for loading an Iframe based on Resolution



DeMaster
06-20-2010, 02:47 PM
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)




<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)




<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:




<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>

Philip M
06-20-2010, 03:27 PM
Here you are:-


<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):-


<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?"

DeMaster
06-20-2010, 04:00 PM
Thank you, that worked well and the code was not as complex as I thought it would be.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum