Drop Down Menu not Targeting IFrame

[Hangar1]

1) Script Title: IFrame SSI Script II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...iframessi2.htm

3) Describe problem:
I can't get my dropdown menu to target the IFrame in Firefox... it works perfectly in IE.

<CENTER>
<form action="dummy" method="post">
  <select name="choice" size="1" onChange="jump(this.form)">
    <option value="http://planet.fastwhb.com/~hangar1/images/pleaseselect.jpg*myframe" selected>- Choose a Date -</option>
    <option value="http://planet.fastwhb.com/~hangar1/weekdays.jpg*myframe">Wednesday, Jan. 3rd</option>
    <option value="http://planet.fastwhb.com/~hangar1/weekdays.jpg*myframe">Thursday, Jan. 4th</option>
    <option value="http://planet.fastwhb.com/~hangar1/weekend.jpg*myframe">Friday, Jan. 5th</option>
    <option value="http://planet.fastwhb.com/~hangar1/weekend2.jpg*myframe">Saturday, Jan. 6th</option>
<option value="http://planet.fastwhb.com/~hangar1/weekend3.jpg*myframe">Sunday, Jan. 7th</option>
<option value="http://planet.fastwhb.com/~hangar1/weekdays2.jpg*myframe">Monday, Jan. 8th</option>
<option value="http://planet.fastwhb.com/~hangar1/weekdays2.jpg*myframe">Tuesday, Jan. 9th</option>
<option value="http://planet.fastwhb.com/~hangar1/weekdays2.jpg*myframe">Wednesday, Jan. 10th</option>
<option value="http://planet.fastwhb.com/~hangar1/weekdays2.jpg*myframe">Thursday, Jan. 11th</option>
  </select>
</form></CENTER>
<iframe id="myframe" src="http://planet.fastwhb.com/~hangar1/images/pleaseselect.jpg" scrolling="no" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" style="overflow:visible; width:100%; display:none"></iframe>

[jscheuer1]

Why:

*myframe

?

[Hangar1]

myframe is the name of the Iframe. I used the * to target it, idk why lol.. it works in IE. When I select an option from the dropdown menu, i just need it to load in the Iframe that is named myframe. Thanks.

[jscheuer1]

Well, unless there is code in the script to support that use of the * symbol, it is an IE only thing or is some deprecated convention. Either way, one that I have never heard of before. If there is code in the script to support that use of the * symbol, that code needs to be upgraded to work with FF as well as with IE.

Even if it is an old deprecated convention, the script could probably be made to use it in other browsers that do not natively support it. Perhaps not. But, some method of targeting is always possible, it is just a matter of adding it to the script. Since the code in question is not a part of the script you linked to in your original post, I cannot be of much more help without seeing it. Could you supply a link to your page that this is happening on?

At the very least, I would need to see the jump() function.

[Hangar1]

Sorry, I did include it in my other thread i made a few days ago. Here it is.

Here is the dropdown box code:

><script>
<!--
function land(ref, target)
{
lowtarget=target.toLowerCase();
if (lowtarget=="_self") {window.location=loc;}
else {if (lowtarget=="_top") {top.location=loc;}
else {if (lowtarget=="_blank") {window.open(loc);}
else {if (lowtarget=="_parent") {parent.location=loc;}
else {parent.frames[target].location=loc;};
}}}
}
function jump(menu)
{
ref=menu.choice.options[menu.choice.selectedIndex].value;
splitc=ref.lastIndexOf("*");
target="myframe";
if (splitc!=-1)
{loc=ref.substring(0,splitc);
target=ref.substring(splitc+1,1000);}
else {loc=ref; target="_self";};
if (ref != "") {land(loc,target);}
}
//-->
</script>

And here is the Iframe code which I don't think i've changed from this website :

<script type="text/javascript">

/***********************************************
* IFrame SSI script II- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com)
* Visit DynamicDrive.com for hundreds of original DHTML scripts
* This notice must stay intact for legal use
***********************************************/

//Input the IDs of the IFRAMES you wish to dynamically resize to match its content height:
//Separate each ID with a comma. Examples: ["myframe1", "myframe2"] or ["myframe"] or [] for none:
var iframeids=["myframe"]

//Should script hide iframe from browsers that don't support this script (non IE5+/NS6+ browsers. Recommended):
var iframehide="no"

var getFFVersion=navigator.userAgent.substring(navigator.userAgent.indexOf("Firefox")).split("/")[1]
var FFextraHeight=parseFloat(getFFVersion)>=0.1? 16 : 0 //extra height in px to add to iframe in FireFox 1.0+ browsers

function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
resizeIframe(iframeids[i])
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display="block"
}
}
}

function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
if (currentfr && !window.opera){
currentfr.style.display="block"
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight+FFextraHeight; 
else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
if (currentfr.addEventListener)
currentfr.addEventListener("load", readjustIframe, false)
else if (currentfr.attachEvent){
currentfr.detachEvent("onload", readjustIframe) // Bug fix line
currentfr.attachEvent("onload", readjustIframe)
}
}
}

function readjustIframe(loadevt) {
var crossevt=(window.event)? event : loadevt
var iframeroot=(crossevt.currentTarget)? crossevt.currentTarget : crossevt.srcElement
if (iframeroot)
resizeIframe(iframeroot.id);
}

function loadintoIframe(iframeid, url){
if (document.getElementById)
document.getElementById(iframeid).src=url
}

if (window.addEventListener)
window.addEventListener("load", resizeCaller, false)
else if (window.attachEvent)
window.attachEvent("onload", resizeCaller)
else
window.onload=resizeCaller

</script>

[jscheuer1]

Pretty sloppy code. However, the only reason that it will not work in FF is that selecting a frame like so:

else {parent.window.frames[target].location=loc;};

technically requires that [target] be the [name] of the iframe. IE and some others will let you slide with it being the [id] but, that isn't in the specification so, it will fail in browsers like FF which are more standards compliant.

Since the other script relies upon the iframe's id, keep that but add the name (they can be the same):

<iframe id="myframe" name="myframe" src="http . . .

Note: Opening an image (as opposed to a page) in a dimensionless iframe in FF may cause the image to resize, throwing off the iframe resizing script.

[Hangar1]

I tried what you said and I'm still not having any luck . Is there any way you could quick grab that code and rewrite it for me? Maybe i'm completely overlooking something.. but im just not having any luck. I tried to add a

target="myframe"

into the option code, but that didn't work, it simply bring it up in a new window. Im about to pull my hair out.. I know you probably don't have time, but if anyone could rewrite that code for me I'd be SOOOOO greatful. I wanna use that script, and you see above in my coding for the dropdown box what pages i'm trying to load.. any help would be a God Send!

[Hangar1]

Do all the instances of frameid in the script need to be replaced with framename or something of that sort?
Example:

function resizeCaller() {
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++){
if (document.getElementById)
resizeIframe(iframeids[i])
//reveal iframe for lower end browsers? (see var above):
if ((document.all || document.getElementById) && iframehide=="no"){
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display="block"
}

Does firefox not recognize it because it's looking for iframeids ? I'm seriously a noob to javascript.. i appologize if these are all stupid questions.

[jscheuer1]

I don't see any reason to change the iframe ssi script. I cannot easily test it with your setup because it will not work cross domain or from a local page to a domain. However, below I have simplified the function jump(menu) and the way that it is called by the form element. I have also changed the iframe so that it should work OK without the iframe ssi script and probably will work fine with it as well:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Iframe Jump - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>

function jump(menu){
var loc_tar=menu.options[menu.selectedIndex].value.split('*');
window.open(loc_tar[0],loc_tar[1]? loc_tar[1] : '_self');
}

</script>

</head>
<body>
<center>
  <select name="choice" size="1" onchange="jump(this)">
    <option value="http://planet.fastwhb.com/~hangar1/images/pleaseselect.jpg*myframe" selected>- Choose a Date -</option>
    <option value="http://planet.fastwhb.com/~hangar1/weekdays.jpg*myframe">Wednesday, Jan. 3rd</option>
    <option value="http://planet.fastwhb.com/~hangar1/weekdays.jpg*myframe">Thursday, Jan. 4th</option>
    <option value="http://planet.fastwhb.com/~hangar1/weekend.jpg*myframe">Friday, Jan. 5th</option>
    <option value="http://planet.fastwhb.com/~hangar1/weekend2.jpg*myframe">Saturday, Jan. 6th</option>
<option value="http://planet.fastwhb.com/~hangar1/weekend3.jpg*myframe">Sunday, Jan. 7th</option>
<option value="http://planet.fastwhb.com/~hangar1/weekdays2.jpg*myframe">Monday, Jan. 8th</option>
<option value="http://planet.fastwhb.com/~hangar1/weekdays2.jpg*myframe">Tuesday, Jan. 9th</option>
<option value="http://planet.fastwhb.com/~hangar1/weekdays2.jpg*myframe">Wednesday, Jan. 10th</option>
<option value="http://planet.fastwhb.com/~hangar1/weekdays2.jpg*myframe">Thursday, Jan. 11th</option>
  </select><br>
<iframe id="myframe" name="myframe" src="http://planet.fastwhb.com/~hangar1/images/pleaseselect.jpg" scrolling="auto" marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" width="160" height="300" style="margin-top:1ex;"></iframe></center>
</body>
</html>

However, for what you are trying to do, show an image on a page depending upon the selection made in a drop down combo box, this is all that is required:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Image Jump - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>

function jump(menu){
var loc_tar=menu.options[menu.selectedIndex].value.split('*');
document.images[loc_tar[1]].src=loc_tar[0];
}

</script>

</head>
<body>
<center>
  <select name="choice" size="1" onchange="jump(this)">
    <option value="http://planet.fastwhb.com/~hangar1/images/pleaseselect.jpg*myimage" selected>- Choose a Date -</option>
    <option value="http://planet.fastwhb.com/~hangar1/weekdays.jpg*myimage">Wednesday, Jan. 3rd</option>
    <option value="http://planet.fastwhb.com/~hangar1/weekdays.jpg*myimage">Thursday, Jan. 4th</option>
    <option value="http://planet.fastwhb.com/~hangar1/weekend.jpg*myimage">Friday, Jan. 5th</option>
    <option value="http://planet.fastwhb.com/~hangar1/weekend2.jpg*myimage">Saturday, Jan. 6th</option>
<option value="http://planet.fastwhb.com/~hangar1/weekend3.jpg*myimage">Sunday, Jan. 7th</option>
<option value="http://planet.fastwhb.com/~hangar1/weekdays2.jpg*myimage">Monday, Jan. 8th</option>
<option value="http://planet.fastwhb.com/~hangar1/weekdays2.jpg*myimage">Tuesday, Jan. 9th</option>
<option value="http://planet.fastwhb.com/~hangar1/weekdays2.jpg*myimage">Wednesday, Jan. 10th</option>
<option value="http://planet.fastwhb.com/~hangar1/weekdays2.jpg*myimage">Thursday, Jan. 11th</option>
  </select><br>
<img name="myimage" src="http://planet.fastwhb.com/~hangar1/images/pleaseselect.jpg" border="0" style="margin-top:1ex;"></center>
</body>
</html>

No iframe, no iframe ssi script. Images will resize themselves.

[Hangar1]

Oh wow, did ever mention I freakin love you!? Script works perfectly. I didn't even use Iframe.... I really need to learn javascript. Thanks so much man.