Web Analytics Made Easy - StatCounter Change an Iframe - CodingForum

Announcement

Collapse
No announcement yet.

Change an Iframe

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    Change an Iframe

    I'm creating a webpage that has an Iframe and a drop down menu to change the contents of Iframe when the link is changed. I don't know very much javascript because I'm just starting to learn it. It works perfectly in Internet Explorer(no error messages), but in Mozilla FireFox the menu pops down, but the Iframe is not displayed, or change. If I put http://www.google.com as the src it will display but will not change. It says "moles" is not defined. I looked through my code and could not find a non defined "moles". Help!

    Error: moles is not defined
    Source File: file:///C:/Documents%20and%20Settings/Dave/Desktop/Mol/Index.html
    Line: 73
    Line 73:
    divX = eval(x);
    Code:
    <html>
<head>



<script>
if(typeof clientInformation != 'undefined')
{
	// success
}

else
{
	alert('This page only works in Microsoft Internet Explorer. Please reload this page using Internet Explorer. Sorry for the innconvience.')// fail
}

</script>
<style>
td{
border:2px solid silver;
}

#showMoleConversions{
text-align:center;
font-family:Tahoma;
border-bottom:solid black 1px;
}

#moles{
position:absolute;
top:24px;
font-family:NewZurica;
height:10px;
border-bottom:solid black 1px;
}

#repParts{
position:absolute;
top:48px;
font-family:NewZurica;
height:10px;
border-bottom:solid black 1px;
}

#mass{
position:absolute;
top:48px;
font-family:NewZurica;
height:10px;
border-bottom:solid black 1px;
}

#volume{
position:absolute;
top:48px;
font-family:NewZurica;
height:10px;
border-bottom:solid black 1px;
}

</style>
<title>Mol Conversions</title>

<script language="javascript">
//  *****Test for IE*****
function showdiv(x)
{
	var divX;
	divX = eval(x);

	if (divX.style.visibility == "hidden") {
  divX.style.visibility = "visible"
  }
	else {
  divX.style.visibility = "hidden"
	}

}
//  *****End Test for IE*****


// *****Source Changing*****
function changeToRep(){
document.getElementById('main').src="MassToRep.html"
}

function changeToVolume(){
document.getElementById('main').src="MassToVolume.html"
}

function changeToMass(){
document.getElementById('main').src="MassToMass.html"
}

function changeToRep(){
document.getElementById('main').src="VolumeToRep.html"
}

function changeToVolume(){
document.getElementById('main').src="VolumeToVolume.html"
}

function changeToMass(){
document.getElementById('main').src="VolumeToMass.html"
}

function changeToRep(){
document.getElementById('main').src="RepToRep.html"
}

function changeToVolume(){
document.getElementById('main').src="RepToVolume.html"
}

function changeToMass(){
document.getElementById('main').src="RepToMass.html"
}
</script>
</head>
<body topmargin="0" style="background-color:dimgray">


<!--****************************Change the Conversions****************************************-->   
<table style="width:100%; background-color:tan"> 
<tr>
<td id="showMoleConversions" onclick="showdiv('moles');getElementById('mass').style.visibility='hidden';getElementById('volume').style.visibility='hidden';getElementById('repParts').style.visibility='hidden'">Mole Conversions</td>
<tr>
</table>






<!--****************************Change the Links*********************************************-->
<div id="moles" style="visibility:hidden">
<table style="width:100%; background-color:green"">
<tr>
<td style="text-align:center; width:33%" onclick="showdiv('repParts');getElementById('mass').style.visibility='hidden';getElementById('volume').style.visibility='hidden'">Representative Particles</td>
<td style="text-align:center; width:33%" onclick="showdiv('mass');getElementById('repParts').style.visibility='hidden';getElementById('volume').style.visibility='hidden'">Mass</td>
<td style="text-align:center; width:33%" onclick="showdiv('volume');getElementById('repParts').style.visibility='hidden';getElementById('mass').style.visibility='hidden'">Volume</td>
</tr>
</table>
</div>



<!--****************************Change the Iframe*********************************************-->
<div id="repParts" style="visibility:hidden">
<table style="width:100%; background-color:black; color:white;">
<tr>
<td style="text-align:center; width:33%" onclick="changeToRep()">To Representative Particles</td>
<td style="text-align:center; width:33%" onclick="changeToMass()">To Mass</td>
<td style="text-align:center; width:33%" onclick="changeToVolume()">To Volume</td>
</tr>
</table>
</div>

<div id="mass" style="visibility:hidden">
<table style="width:100%; background-color:blue">
<tr>
<td style="text-align:center; width:33%" onclick="changeToRep()">To Representative Particles</td>
<td style="text-align:center; width:33%" onclick="changeToMass()">To Mass</td>
<td style="text-align:center; width:33%" onclick="changeToVolume()">To Volume</td>
</tr>
</table>
</div>

<div id="volume" style="visibility:hidden">
<table style="width:100%; background-color:red">
<tr>
<td style="text-align:center; width:33%" onclick="changeToRep()">To Representative Particles</td>
<td style="text-align:center; width:33%" onclick="changeToMass()">To Mass</td>
<td style="text-align:center; width:33%" onclick="changeToVolume()">To Volume</td>
</tr>
</table>
</div>

<!--***********************************Iframe*************************************************-->
<iframe id="main" src="blank.html" style="position:absolute; top:80; width:100%; height:100%; border:none 0 white">
Not supported by your browser
</iframe>





<!--***********************************Information********************************************-->
<br />
<span style="position:absolute; top:575;">
Calculator! Used to find molar Mass and do other simple calculations. If you do not fill up all the boxes leave as "0".<br />
<form>
<input type="textbox" value="0" id="a" />
+
<input type="textbox" value="0" id="b" />
+
<input type="textbox" value="0" id="c" />
+
<input type="textbox" value="0" id="d" />
+
<input type="textbox" value="0" id="e" />
+
<input type="textbox" value="0" id="f" />
+
<input type="textbox" value="0" id="g" />
+
<input type="textbox" value="0" id="h" />
+
<input type="textbox" value="0" id="i" />
+
<input type="textbox" value="0" id="j" />
=
<span id="mathAnswer" style="color:red"></span>
<br />
<input type="button" value="Find the answer" onclick="doSomeMath()" />

</form>

</span>


<script language="javascript">
function doSomeMath(){
var a=document.getElementById('a').value;
var b=document.getElementById('b').value;
var c=document.getElementById('c').value;
var d=document.getElementById('d').value;
var e=document.getElementById('e').value;
var f=document.getElementById('f').value;
var g=document.getElementById('g').value;
var h=document.getElementById('h').value;
var i=document.getElementById('i').value;
var j=document.getElementById('j').value;

document.getElementById('mathAnswer').innerHTML=parseFloat(a)+parseFloat(b)+parseFloat(c)+parseFloat(d)+parseFloat(e)+parseFloat(f)+parseFloat(g)+parseFloat(h)+parseFloat(i)+parseFloat(j);
}
</script>
</body>
</html>
    Sorry for posting the whole code but I do not know where my error is.
    Tags: None
  • #2
    Try:

    function showdiv(x)
    {
    if (document.getElementById(x).style.visibility == "hidden") {
    document.getElementById(x).style.visibility = "visible"
    }
    else {
    document.getElementById(x).style.visibility = "hidden"
    }
    }


    And

    Several times onclick you have

    getElementById(id)style...

    replace with

    document.getElementById(id)style...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

    Comment

    • #3
      Thanks for taking the time to read my code. It got the menu drops down, but the positioning isn't the same as it is in IE. Also the Iframe still does not show up.
      Code:
      <iframe id="main" src="blank.html" style="position:absolute; top:80; width:100%; height:100%; border:none 0 white">
Not supported by your browser
</iframe>
      blank.html is a file in the same folder. It does work with http://www.google.com in that the frame shows up. I would like not to use the entire file path, since I'm going to be uploading it to a site, so I would have to go back and change them all.

      Comment

      • #4
        Are you asking why the border of the iframe doesn't show up?

        If so, remove this: "border:none 0 white"


        Are you asking why you see nothing when blank.html is loaded?

        If so, try loading a local html file with some content.
        hmm... ?

        Comment

        • #5
          :'(. I feel like such a moron now. It worked perfectly. I was expecting a white page to load, but instead , a page with the same background loads. Oh well. Thanks for all the help .

          One more thing. The way I have my menu set up, is there an easier way to do it? When one of the links are clicked I want all the other links to be hidden if they were open. I'm thinking about changing it if there is not an easier way. I still have more pages to add under a different sections so it could be a pain to add to that code.
          Last edited by squirellplaying; Feb 21, 2004, 04:21 PM.

          Comment

          • #6
            When one of the links are clicked I want all the other links to be hidden if they were open.
            But how can you see the hidden one again?
            KOR
            Offshore programming
            -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

            Comment

            • #7
              Click the link that opens them back up. Like how it works now, but without all the document.getElementById('mass').style.visibility='hidden';
              in the
              onclick="showdiv('repParts');document.getElementById('mass').style.visibility='hidden';getElementByI d('volume').style.visibility='hidden'"
              Right now there is only 3, but as I add more links there will be more, which will be a pain to code.

              Comment

              • #8
                Code:
                function hideDivs(){
  var obj;
  for (var j=0;j<arguments.length;j++){
    obj = document.getElementById(arguments[j]);
    if (obj) obj.style.visibility='hidden';
  }
}
...
<td id="showMoleConversions" onclick="showdiv('moles');hideDivs('mass', 'volume', 'repParts')">Mole Conversions</td>
                You can specify as many ids of the divs to hide in the hideDivs() function. The parameters passed are accessed using the arguments array.
                Glenn
                vBulletin Mods That Rock!

                Comment

                Previous template Next
                Working...
                X