Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Drop Down Menu not Targeting IFrame

  1. #1
    Join Date
    Jan 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Drop Down Menu not Targeting IFrame

    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.

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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,072
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    Why:

    *myframe

    ?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jan 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,072
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jan 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

    Here is the dropdown box code:
    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 :
    Code:
    <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>

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,072
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

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

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

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Jan 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  8. #8
    Join Date
    Jan 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Do all the instances of frameid in the script need to be replaced with framename or something of that sort?
    Example:
    Code:
    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.

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,072
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    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:

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

    Code:
    <!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.
    Last edited by jscheuer1; 01-06-2007 at 08:41 AM.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    Jan 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •