Results 1 to 6 of 6

Thread: Drop Down Menu w/ Descriptions wont open in a iframe

  1. #1
    Join Date
    Jul 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Drop Down Menu w/ Descriptions wont open in a iframe

    1) Script Title: Drop Down Menu w/ Descriptions

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

    3) Describe problem: I have this drop down menu.
    http://www.dynamicdrive.com/dynamici...bodescribe.htm

    I would like to have some links open im my frame named (iframe1), and some ina newwin. The newwin works. I noticed the jumptolink code below and the is a if statment for (newwin). Maybe I need to add a id statment for (iframe1) and then tell it what to do. If any one knows what to write or if this is the wrong aproach, PLEASE HELP!!!

    I have the code customized to look like this (my actual code):

    Code:
    <!--Drop Down Menu-->						
    							
    							<form name="form1" method=>
    							<select name="select1" size="1" style="background-color:#FFFFD7" onChange="displaydesc(document.form1.select1, thetext1, 'textcontainer1')">
    							<option selected value="home.html" >Home</option>
    							<option>-----------</option>
    							<option value="foodservices/cafmenutemplate.htm"  >Lunch Menu</option>
    							<option value="http://wired.com">Parents</option>
    							<option value="http://www.news.com" >Teacher Mail</option>
    							<option value="https://staff.west.org" target="newwin" >WCCS Secured</option>
    							</select>
    							
    							<input type="button" value="Go" 
    							onClick="jumptolink(document.form1.select1)" ><br>
    							<span id="textcontainer1" align="left" style="font:italic 13px Arial">
    							</span>
    							</form>
    and the other part:

    Code:
    <!--  Code For Drop Down Quik Links -->
    	<script type="text/javascript">
    	
    		/***********************************************
    		* Drop down menu w/ description- © Dynamic Drive (www.dynamicdrive.com)
    		* This notice must stay intact for use
    		* Visit http://www.dynamicdrive.com/ for full source code
    		***********************************************/
    							
    		//1) CUSTOMIZE TEXT DESCRIPTIONS FOR LINKS ABOVE
    		var thetext1=new Array()
    		thetext1[0]=""
    		thetext1[1]=""
    		thetext1[2]=""
    		thetext1[3]=""
    		thetext1[4]=""
    		thetext1[5]=""
    						
    		function displaydesc(which, descriptionarray, container){
    		if (document.getElementById)
    		document.getElementById(container).innerHTML=descriptionarray[which.selectedIndex]
    		}
    		
    		function jumptolink(what){
    		var selectedopt=what.options[what.selectedIndex]
    		if (document.getElementById && selectedopt.getAttribute("target")=="newwin")
    		window.open(selectedopt.value)
    		else
    		window.location=selectedopt.value
    		}
    		
    		displaydesc(document.form1.select1, thetext1, 'textcontainer1')
    		
    	</script>
    I am preaty new too all of this but I searched every where and I cant seem to get it to work.

    THANK YOU ALL!!!

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    I've modified the original script to support opening a link within a specific iframe as well:

    Code:
    <!--Example drop down menu 1-->
    
    <form name="form1">
    <select name="select1" size="1" style="background-color:#FFFFD7" onChange="displaydesc(document.form1.select1, thetext1, 'textcontainer1')">
    <option selected value="http://www.javascriptkit.com">JavaScript Kit </option>
    <option value="http://freewarejava.com">Freewarejava.com</option>
    <option value="http://wired.com" target="newwin">Wired News</option>
    <option value="http://www.news.com" target="iframe1" >News.com</option>
    <option value="http://www.codingforums.com" target="newwin">Coding Forums</option>
    </select>
     <input type="button" value="Go" 
    onClick="jumptolink(document.form1.select1)"><br>
    <span id="textcontainer1" align="left" style="font:italic 13px Arial">
    </span>
    </form>
    
    <!--Example drop down menu 2-->
    
    <form name="form2">
    <select name="select2" size="1" style="background-color:#E3FFDF" onChange="displaydesc(document.form2.select2, thetext2, 'textcontainer2')">
    <option selected value="http://www.cnn.com">CNN</option>
    <option value="http://www.msnbc.com">MSNBC</option>
    <option value="http://news.bbc.co.uk">BBC News</option>
    <option value="http://www.theregister.com/">The Register</option>
    </select>
     <input type="button" value="Go" 
    onClick="jumptolink(document.form2.select2)"><br>
    <span id="textcontainer2" align="left" style="font:italic 13px Arial">
    </span>
    </form>
    
    
    
    <!--IMPORTANT: Below script should always follow all of your HTML codes above, and never proceed them-->
    <!--To be safe, just add below script at the end of your page-->
    
    <script type="text/javascript">
    
    /***********************************************
    * Drop down menu w/ description- © Dynamic Drive (www.dynamicdrive.com)
    * This notice must stay intact for use
    * Visit http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    //1) CUSTOMIZE TEXT DESCRIPTIONS FOR LINKS ABOVE
    var thetext1=new Array()
    thetext1[0]="Comprehensive JavaScript tutorials and over 400+ free scripts"
    thetext1[1]="Direct link to hundreds of free Java applets online!"
    thetext1[2]="Up to date news on the technology front"
    thetext1[3]="News.com- The #1 technology News site."
    thetext1[4]="Web Coding and development forums"
    
    /// You may define additional text arrays if you have multiple drop downs:
    var thetext2=new Array()
    thetext2[0]="CNN- US and World News."
    thetext2[1]="MSNBC- NBC News online."
    thetext2[2]="BBC News- Updated every minute of every day."
    thetext2[3]="TheRegister- Daily IT news."
    
    // Now, see 2) below for final customization step
    
    function displaydesc(which, descriptionarray, container){
    if (document.getElementById)
    document.getElementById(container).innerHTML=descriptionarray[which.selectedIndex]
    }
    
    function jumptolink(what){
    var selectedopt=what.options[what.selectedIndex]
    if (document.getElementById && selectedopt.getAttribute("target")=="newwin")
    window.open(selectedopt.value)
    else if (selectedopt.getAttribute("target")!=null)
    document.getElementById(selectedopt.getAttribute("target")).src=selectedopt.value
    else
    window.location=selectedopt.value
    }
    
    //2) Call function displaydesc() for each drop down menu you have on the page
    //   This function displays the initial description for the selected menu item
    //   displaydesc(name of select menu, name of corresponding text array, ID of SPAN container tag):
    //   Important: Remove the calls not in use (ie: 2nd line below if there's only 1 menu on your page)
    
    displaydesc(document.form1.select1, thetext1, 'textcontainer1')
    displaydesc(document.form2.select2, thetext2, 'textcontainer2')
    
    </script>
    
    <iframe id="iframe1" style="width: 800px; height: 500px"></iframe>
    The code in red is new.

  3. #3
    Join Date
    Jul 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    That didnt work for me an I copt and pasted your code right in and the target doesnt work. Any one else out there want to help PLEASE!!!

  4. #4
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    Hi:
    It does work. The menu item News.com in the first drop down loads in the iframe.

  5. #5
    Join Date
    Jul 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Ok I understand it works in your code. However I can garentee that I have tried just what you typed. It does not work in mine. If you have time perhaps you can play with my code and see what happens.

    Thanks also!! I have posted this on two websites and your the only reply in 2 weeks.

    THANKS-NICK

  6. #6
    Join Date
    Jul 2006
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I am very sorry I owe you an apollogy. I found my error. Your code modification worked perfectly for me. Thanks again so much this helped me out big time.

    Thanks-NICK

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
  •