Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Drop Down Menu modifying a iFrame

    Right, so i have been searching for this for ages and cant seem to find it anywhere
    I can create links to modify a iFrame

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <body>
    <SCRIPT language=javascript type="text/javascript">
    var iFrameArray = ["iframe1","iframe2","iframe3"];
    function showhideiframe(strIframeID){
    hideAllIFrames();
    document.getElementById(strIframeID).style.display = "block";
    }
    
    function hideAllIFrames(){
    for(var i=0; i<iFrameArray.length; i++){
    document.getElementById(iFrameArray[i]).style.display = "none";
    }
    }
    </SCRIPT>
    </head>
    
    <body>
    <div style="clear:both;">
    <div>
    <A HREF="" onClick="showhideiframe('iframe1'); return false;">iFrame1</a>
    <A HREF="" onClick="showhideiframe('iframe2'); return false;">iFrame2</a>
    <A HREF="" onClick="showhideiframe('iframe3'); return false;">iFrame3</a>
    </div>
    </div>
    
    <div>
    <div>
    
    <iframe name="iframe1" id="iframe1" src="PAGE GOES HERE" frameborder="0" width="100%" height="100%" style="display:block" ></iframe>
    <iframe name="iframe2" id="iframe2" src="PAGE GOES HERE" frameborder="0" width="100%" height="100%" style="display:none" ></iframe>
    <iframe name="iframe3" id="iframe3" src="PAGE GOES HERE" frameborder="0" width="100%" height="100%" style="display:none"></iframe>
    </div>
    </div>
    
    </body>
    </html>
    But i dont really want to click on a link to change the iFrame... is it possible to change this to a Dropdown Menu?

    Any help would be greatly appreciated

    Thanks
    Last edited by Hailor; 02-26-2007 at 06:19 PM.

  • #2
    ess
    ess is offline
    Regular Coder
    Join Date
    Oct 2006
    Location
    United Kingdom
    Posts
    866
    Thanks
    7
    Thanked 30 Times in 29 Posts
    You have a good solution there, though, I wouldn't load more than one IFrame. Basically, I would use one IFrame to load contents relevant to a link. In other words, the function you have created should change the source of the IFrame instead of modifying CSS properties.

    Here are a couple of references you could use to achieve what I have explained above.
    http://www.quirksmode.org/js/iframe.html
    http://www.devarticles.com/c/a/JavaS...in-JavaScript/

    Cheers,
    Ess


  •  

    Posting Permissions

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