Iframe switching

design

#1

I want to switch out two iframes. It works except for one thing. It doesn’t load both iframes when the page loads. It only loads the one that is displayed first. I don’t know an enormous amount of javascript. If someone could tell me what to do to make both of the elements load when the page loads that would be great.

Edward

Here is the 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" xml:lang="en" lang="en">

<head>

<title>switch</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 

<script type="text/javascript">
// <![CDATA[
function showDiv(obj){
if(document.getElementById){
divs=document.getElementById("cont").getElementsByTagName("DIV");
num=obj.options[obj.selectedIndex].value - 1;
for(i=0;i<divs.length;i++){
if (divs[i].className=="txt"){ 
if(i==num){
divs[i].style.display = "block";
}else{
divs[i].style.display = "none";
}
}	
}
}
}
// ]]>
</script>
</head>
<body>

<form id="form1" action=""> 
<div>
<select id="select1" onchange="showDiv(this.form.select1)"> 
<option value="1">Schedule</option> 
<option value="2">Roster</option> 
</select> 
</div>
</form>
<div id="cont">
<div class="txt" style="display:block;">
<iframe width='450' height='320' frameborder='0' scrolling='no' src='http://4n9cfo2a-a.gmodules.com/ig/ifr?up__table_query_url=http://spreadsheets1.google.com/tq?range=A1:H100&key=ppiSSeAYwznHOCuAJzhJDNw&gid=0&pub=1&up_title=football&up_last_query_hash=&up_groupbycolumn=&up__table_query_refresh_interval=0&up_showfilters=0&up_aggregateby=&up_enablegrouping=0&url=http://larkey.net/ohstable/table.xml' style='border: 1px solid #cccccc'></iframe>
</div>
<div class="txt" style="display:none;">
<iframe width='597' height='334' frameborder='0' scrolling='no' src='http://4n9cfo2a-a.gmodules.com/ig/ifr?up__table_query_url=http://spreadsheets0.google.com/tq?range=A1:H100&key=ppiSSeAYwznGmxRuAJQ5YAA&gid=0&pub=1&up_title=baseball&up_last_query_hash=&up_groupbycolumn=&up__table_query_refresh_interval=0&up_showfilters=0&up_aggregateby=&up_enablegrouping=0&url=http://larkey.net/ohstable/table.xml' style='border: 1px solid #cccccc'></iframe>
</div>

</div>
</body>
</html>

#2

The trouble with your code is that I don’t think you quite understand what ‘divs’ is. ‘divs’ is an array of HTML objects which, in your sample script, has two elements, one for each div. Inside your loop, you seem to be using it as if it is an HTML object itself, which it is not. Within your loop, you need to index into divs and if you do that, your code will work correctly.

Try this:

function showDiv(obj){ if(document.getElementById){ divs=document.getElementById("cont").getElementsByTagName("DIV"); num=obj.options[obj.selectedIndex].value - 1; for(i=0;i<divs.length;i++){ if (divs[ i ].className=="txt"){ if(i==num){ divs[ i ].style.display = "block"; }else{ divs[ i ].style.display = "none"; } } } } }


#3

Okay so do I need to change any of the html? I pasted your code into into the script tag and it still didn’t work correctly. The first iframe loads but the second does not. It only switches into the second iframe and doesn’t retrieve the content.


#4

The HTML doesn’t need to be changed at all.

What browser are you testing your code in? I’ve tried it now in Firefox 3b5 and IE 6 and in both cases it loads up both iframes just fine.

I’ve created a test page here which is what I used to validate the answer I gave above. I did tweak the HTML a little bit to call up Google and Yahoo rather than whatever pages you had there, since those original pages seemed to give me errors. Is it possible that both pages are simply returning the same error so you think that they’re not switching but in reality they are?


#5

I am using Safari 3.1.1 and Firefox 2.0.0.14. I switched them to Google and Apple and they worked fine. I will find and fix the error now. Thanks a lot for your help.


#6

Hope you manage to get that working! :slight_smile: