Current location: Hot Scripts Forums » General Web Coding » JavaScript » Jscript menu to open selected url in frame...?


Jscript menu to open selected url in frame...?

Reply
 
LinkBack Thread Tools Display Modes
  #1 (permalink)  
Old 03-14-05, 11:20 AM
xd40expert xd40expert is offline
New Member
  
Join Date: Mar 2005
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
Jscript menu to open selected url in frame...?
HTML Code:
<div style="position: absolute; width: 490px; height: 76px; z-index: 8; left: 10px; top: 17px" id="layer13">
	<font color="#FFFFFF">
<script language="JavaScript" type="text/javascript">
function go(){
if (document.selecter.select1.options[document.selecter.select1.selectedIndex].value != "none") 
{location = document.selecter.select1.options[document.selecter.select1.selectedIndex].value}
	}
</script>

<script language="JavaScript" type="text/javascript">

document.write('<form name="selecter"><select name="select1">');
document.write('<option value=none>Select Course below');

document.write('<option value=none>--------------------');
document.write('<option value="CCW.htm">Concealed Carry/CCW');

document.write('<option value=none>--------------------');
document.write('<option value="pistol.htm">Pistol');
document.write('<option value="pistola.htm">-Basic Pistol Shooting');
document.write('<option value="pistolb.htm">-Intermediate Pistol Shooting');
document.write('<option value="pistolc.htm">-Advanced Pistol Shooting');

document.write('<option value=none>--------------------');
document.write('<option value="shotgun.htm">Shotgun');
document.write('<option value="shotguna.htm">-Basic Shotgun Shooting');
document.write('<option value="shotgunb.htm">-Intermediate Shotgun Shooting');
document.write('<option value="shotgunc.htm">-Advanced Shotgun Shooting');

document.write('<option value=none>--------------------');
document.write('<option value="rifle.htm">Rifle');
document.write('<option value="riflea.htm">-Basic Rifle Shooting');
document.write('<option value="rifleb.htm">-Intermediate Rifle Shooting');
document.write('<option value="riflec.htm">-Advanced Rifle Shooting');
document.write('<option value="riflesniper.htm">-Long Distance Sniper');

document.write('<option value=none>--------------------');
document.write('<option value="personalsecurity.htm">Personal Security');
document.write('<option value="physicalsecurity.htm">Physical Security');
document.write('<option value="selfdefensefundamentals.htm">Self Defense Fundamentals');
document.write('<option value="cqb.htm">Close Quarters Battle Fundamentals');
document.write('<option value="crisiscombat.htm">Crisis Combat');
document.write('<option value="survivalandrescue.htm">Survival & Rescue Tactics');
document.write('<option value="landnav.htm">Land Navigation');

document.write('<option value=none>--------------------');
document.write('<option value="breeching.htm">Entry / Breeching');
document.write('<option value="shotgunentry.htm">-Shotgun Entry/Breeching');
document.write('<option value="manualentry.htm">-Manual Entry/Breeching');
document.write('<option value="mechanicalentry.htm">-Mechanical Entry/Breeching');
document.write('<option value="lockbypass.htm">-Lock By Pass');

document.write('<option value=none>--------------------');
document.write('<option value="rso.htm">Range Safety Officer');
document.write('<option value="rangeofficerincharge.htm">Range Officer In Charge');
document.write('<option value="elementsofinfo.htm">Elements of Information');

document.write('</select>');
document.write('<input type="button" value="Submit" onclick="go()"');
document.write('</form>');

</script>
&nbsp;</font></div>



<div style="position: absolute; width: 822px; height: 381px; z-index: 15; left: 21px; top: 115px" id="layer20">
<iframe name="f1" src="frame1.htm" width="627" height="336" id="f1">
			Your browser does not support inline frames or is currently configured not to display inline frames.
			</iframe></div>
		
		</p>

</body>

</html>
How do I get the "go()" function to open the selected URL in the "f1" iframe instead of in a new window. ?
Last edited by TwoD; 08-29-07 at 08:59 PM. Reason: Replaced [code] with [html] to get highlighting
Reply With Quote
  #2 (permalink)  
Old 03-14-05, 12:50 PM
xd40expert xd40expert is offline
New Member
  
Join Date: Mar 2005
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
now I have 3 different pages.
frametest.htm
menutest.htm
frame1.htm

Frametest is host for the 2 frames: menutest (menutest.htm) & f1 (frame1.htm)


The Frametest.htm:
HTML Code:
<html>
<head>
<title>Frame Testing Page</title>
</head>
<frameset rows="*,*">
	<frame name="top" src="menutest.htm" name="menu">
	<frame name="bottom" src="frame1.htm" name="f1">
	<noframes>
	<body>

	<p>This page uses frames, but your browser doesn't support them.</p>

	</body>
	</noframes>
</frameset>
</html>
The Jscript Menu is on Menutest.htm as following:
HTML Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>MENUTEST PAGE</title>
</head>
<body bgcolor="#000000">
<div style="position: absolute; width: 490px; height: 76px; z-index: 8; left: 10px; top: 17px" id="layer13">
<font color="#FFFFFF">
<script language="JavaScript" type="text/javascript">
function go(){
if (document.dropmenu.course.options[document.dropmenu.course.selectedIndex].value != "none")
 {location = document.dropmenu.course.options[document.dropmenu.course.selectedIndex].value}
	}
</script>
<script language="JavaScript" type="text/javascript">
document.write('<form name="dropmenu"><select name="course">');
document.write('<option value=none>Select Course below');
document.write('<option value=none>--------------------');
document.write('<option value="CCW.htm">Concealed Carry/CCW');
document.write('<option value=none>--------------------');
document.write('<option value="pistol.htm">Pistol');
document.write('<option value="pistola.htm">-Basic Pistol Shooting');
document.write('<option value="pistolb.htm">-Intermediate Pistol Shooting');
document.write('<option value="pistolc.htm">-Advanced Pistol Shooting');
document.write('</select>');
document.write('<input type="button" value="Submit" onclick="go()"');
document.write('</form>');
</script>
</font></div>
</body>
</html>
That is the Jscript drop down menu.
Now here is Frame1.htm:

HTML Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>frame1</title>
</head>
<body bgcolor="#000080">
FRAME 1
</body>
</html>
What I want to happen is this: Frametest.htm is loaded in browser, you see the jscript menu on top, on bottom is a blank frame.
You select an option from the menu and the corresponding page is loaded into the 'f1' frame and the 'menu' frame is reloaded.

I'm not sure how to go about this.
Last edited by TwoD; 08-29-07 at 09:00 PM. Reason: Replaced [code] with [html] to get highlighting
Reply With Quote
  #3 (permalink)  
Old 03-14-05, 01:21 PM
xd40expert xd40expert is offline
New Member
  
Join Date: Mar 2005
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
I am trying to do this with out creating a .js file, because I don't even know where to begin, I do have Visual J++, but not a clue how to use it.

Isn't there a simple way to tell the function to be executed in the 'f1' frame? not the current menutest.htm window?
Reply With Quote
  #4 (permalink)  
Old 03-15-05, 05:31 PM
TwoD TwoD is offline
Community VIP
  
Join Date: Sep 2003
Location: 404
Posts: 1,813
Thanks: 0
Thanked 0 Times in 0 Posts
You don't need Visual J++ (Which is for Java, if I'm correct, not JavaScript) at all.

You don't need a .js file, but it would make the other code on the page a bit more readable since you only need one tag to load the .js file.

I'm not sure why you use document.write() that much since it's much easier just to write it in normal HTML, instead of using JavaScript to output the same HTML to the browser.

There is currently no need to reload the menupage each time someone clicks a link, because nothing changes on it.

To change the page in a frame, reference to the frame by its id and change the src-atribute. I usually use document.getElementById('frame_id').src=something to do this.

Here's the code from your first post.

HTML Code:
<html>
<head>
<script language="JavaScript" type="text/javascript">
function go(){
if (document.selecter.select1.options[document.selecter.select1.selectedIndex].value != "none") 
{document.getElementById('f1').src = document.selecter.select1.options[document.selecter.select1.selectedIndex].value}
}
</script>
</head>
<body>
<div style="position: absolute; width: 490px; height: 76px; z-index: 8; left: 10px; top: 17px" id="layer13">
	<font color="#FFFFFF">
<form name="selecter"><select name="select1">
<option value=none>Select Course below

<option value=none>--------------------
<option value="CCW.htm">Concealed Carry/CCW

<option value=none>--------------------
<option value="pistol.htm">Pistol');
<option value="pistola.htm">-Basic Pistol Shooting
<option value="pistolb.htm">-Intermediate Pistol Shooting
<option value="pistolc.htm">-Advanced Pistol Shooting

<option value=none>--------------------
<option value="shotgun.htm">Shotgun
<option value="shotguna.htm">-Basic Shotgun Shooting
<option value="shotgunb.htm">-Intermediate Shotgun Shooting
<option value="shotgunc.htm">-Advanced Shotgun Shooting

<option value=none>--------------------
<option value="rifle.htm">Rifle');
<option value="riflea.htm">-Basic Rifle Shooting
<option value="rifleb.htm">-Intermediate Rifle Shooting
<option value="riflec.htm">-Advanced Rifle Shooting
<option value="riflesniper.htm">-Long Distance Sniper

<option value=none>--------------------
<option value="personalsecurity.htm">Personal Security
<option value="physicalsecurity.htm">Physical Security
<option value="selfdefensefundamentals.htm">Self Defense Fundamentals
<option value="cqb.htm">Close Quarters Battle Fundamentals
<option value="crisiscombat.htm">Crisis Combat
<option value="survivalandrescue.htm">Survival & Rescue Tactics
<option value="landnav.htm">Land Navigation

<option value=none>--------------------
<option value="breeching.htm">Entry / Breeching
<option value="shotgunentry.htm">-Shotgun Entry/Breeching
<option value="manualentry.htm">-Manual Entry/Breeching
<option value="mechanicalentry.htm">-Mechanical Entry/Breeching
<option value="lockbypass.htm">-Lock By Pass

<option value=none>--------------------
<option value="rso.htm">Range Safety Officer
<option value="rangeofficerincharge.htm">Range Officer In Charge
<option value="elementsofinfo.htm">Elements of Information

</select>
<input type="button" value="Submit" onclick="go()">
</form>
&nbsp;</font></div>



<div style="position: absolute; width: 822px; height: 381px; z-index: 15; left: 21px; top: 115px" id="layer20">
<iframe name="f1" src="frame1.htm" width="627" height="336" id="f1">
			Your browser does not support inline frames or is currently configured not to display inline frames.
			</iframe></div>
		
		</p>

</body>

</html>
Here's the menupage code from the second post.

HTML Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>MENUTEST PAGE</title>
<script language="JavaScript" type="text/javascript">
function go(){
if (document.dropmenu.course.options[document.dropmenu.course.selectedIndex].value != "none")
 {window.parent.frames['bottom'].document.location = document.dropmenu.course.options[document.dropmenu.course.selectedIndex].value}
}
</script>
</head>
<body bgcolor="#000000">
<div style="position: absolute; width: 490px; height: 76px; z-index: 8; left: 10px; top: 17px" id="layer13">
<font color="#FFFFFF">

<form name="dropmenu"><select name="course">
<option value=none>Select Course below
<option value=none>--------------------
<option value="CCW.htm">Concealed Carry/CCW
<option value=none>--------------------
<option value="pistol.htm">Pistol
<option value="pistola.htm">-Basic Pistol Shooting
<option value="pistolb.htm">-Intermediate Pistol Shooting
<option value="pistolc.htm">-Advanced Pistol Shooting
</select>
<input type="button" value="Submit" onclick="go()">
</form>
</font></div>
</body>
</html>
Btw, you can't tell a funcion where to execute. It will always execute on the page it's physically located at. But you can reference to other frames and windows using the window.opener.../window.parent... objects.
Window.opener is used instead of window.parent when you have used window.open() method to create the window.
Last edited by TwoD; 08-29-07 at 09:01 PM.
Reply With Quote
  #5 (permalink)  
Old 08-29-07, 10:52 AM
kaziel kaziel is offline
New Member
  
Join Date: Aug 2007
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
Jascript menu Triple Combo box
<<removed none english text>>

in the following code that annexed him to continucacion, Since I do to him so that the answer of this triple stand for casks box habra in inframe in the part of down, so and as they have it in the examples of above
__________________________________________________ _______________
HTML Code:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<FORM name="isc">
<table border="0" cellspacing="0" cellpadding="0">
  <tr align="center"> 
    <td nowrap height="11"> &nbsp;

<select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option selected>---Select1-------------</option>
<option>Gildan</option>
<option>M&O</option>
<option>Dimeo</option>
<option>Optima</option>
<option>Migliore</option>
<option>Big-Bang</option>
<option>Bibo</option>
</select>

<select name="stage2" size="1" onChange="redirect1(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select2--------------</option>
<option value=" " selected>---Select2--------------</option>
<option value=" " selected>---Select2--------------</option>
<option value=" " selected>---Select2--------------</option>
<option value=" " selected>---Select2--------------</option>
<option value=" " selected>---Select2--------------</option>
<option value=" " selected>---Select2--------------</option>
</select>

<select name="stage3" size="1" onChange="redirect2(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select3----------------</option>
<option value=" " selected>---Select3----------------</option>
<option value=" " selected>---Select3----------------</option>
<option value=" " selected>---Select3----------------</option>
<option value=" " selected>---Select3----------------</option>
<option value=" " selected>---Select3----------------</option>
<option value=" " selected>---Select3----------------</option>
</select>
<input type="button" name="test" value="Go!"
onClick="go()">
</p>
<script>
<!--

/*
Triple Combo Script Credit
By Hamid Cheheltani/ JavaScript Kit ([url]http://www.javascriptkit.com[/url])
Visit [url]http://javascriptkit.com[/url] for this and over 400+ other scripts
*/

var groups=document.isc.example.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()

group[0][0]=new Option("---Select2---"," ");

group[1][0]=new Option("Now Select This One"," ");
group[1][1]=new Option("Sudaderas y Pants","47");
group[1][2]=new Option("Playeras Cuello Redondo","46");
group[1][3]=new Option("Playeras Tipo Polo","45");


group[2][0]=new Option("Now Select This One"," ");
group[2][1]=new Option("Camison Dama","115");
group[2][2]=new Option("Playera Musculos","116");
group[2][3]=new Option("Playeras Cuello Redondo","117");
group[2][4]=new Option("Playeras Tipo Polo","118");
group[2][5]=new Option("Playera Tank Top","119");
group[2][6]=new Option("Tirantes Dama","120");


group[3][0]=new Option("Now Select This One"," ");
group[3][1]=new Option("Playeras Tipo Polo","218");

group[4][0]=new Option("Now Select This One"," ");
group[4][1]=new Option("Sudaderas y Pants","318");
group[4][2]=new Option("Pantalones","319");
group[4][3]=new Option("Playeras Cuello Redondo","320");
group[4][4]=new Option("Playeras Tipo Polo","321");

group[5][0]=new Option("Now Select This One"," ");
group[5][1]=new Option("Playeras Cuello Redondo","420");




var temp=document.isc.stage2


function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
redirect1(0)
}



var secondGroups=document.isc.stage2.options.length
var secondGroup=new Array(groups)
for (i=0; i<groups; i++)  {
secondGroup[i]=new Array(group[i].length)
for (j=0; j<group[i].length; j++)  {
secondGroup[i][j]=new Array()  }}

secondGroup[0][0][0]=new Option("---Select 3---"," ");
secondGroup[1][0][0]=new Option("---Select 3---"," ");
secondGroup[1][1][0]=new Option("Now Select This One"," ");
secondGroup[1][1][1]=new Option("Unisex","http://javascriptkit.com");


secondGroup[1][2][0]=new Option("Dama y Niña"," ");
secondGroup[1][2][1]=new Option("Unisex","http://www.dynamicdrive.com");
secondGroup[1][2][2]=new Option("Unisex Juvenil","http://www.geocities.com/ResearchTriangle/Facility/4490/");


secondGroup[1][3][0]=new Option("Unisex"," ");
secondGroup[1][3][1]=new Option("Unisex Juvenil","http://www.cgi-resources.com");


secondGroup[2][0][0]=new Option("---Select 3---"," ");
secondGroup[2][1][0]=new Option("Now Select This One"," ");
secondGroup[2][1][1]=new Option("Dama y NIña","http://www.cnn.com");

secondGroup[2][2][0]=new Option("Now Select A Page"," ");
secondGroup[2][2][1]=new Option("Caballero","http://www.news.com");

secondGroup[2][3][0]=new Option("Now Select A Page"," ");
secondGroup[2][3][1]=new Option("Dama y Niña","http://www.news.com");
secondGroup[2][3][2]=new Option("Unisex"," ");
secondGroup[2][3][3]=new Option("Unisex Juvenil","http://www.news.com");
secondGroup[2][3][4]=new Option("Unisex Manga Larga Juvenil"," ");
secondGroup[2][3][5]=new Option("Unisex Manga Larga Adulto","http://www.news.com");

secondGroup[2][4][0]=new Option("Now Select A Page"," ");
secondGroup[2][4][1]=new Option("Dama y Niña","http://www.news.com");
secondGroup[2][4][2]=new Option("Unisex","http://www.news.com");

secondGroup[2][5][0]=new Option("Now Select A Page"," ");
secondGroup[2][5][1]=new Option("Dama y Niña","http://www.news.com");
secondGroup[2][5][2]=new Option("Unisex","http://www.news.com");

secondGroup[2][6][0]=new Option("Now Select A Page"," ");
secondGroup[2][6][1]=new Option("Dama y Niña","http://www.news.com");

secondGroup[3][0][0]=new Option("---Select 3---"," ");
secondGroup[3][1][0]=new Option("Now Select This One"," ");
secondGroup[3][1][1]=new Option("Unisex","http://www.cnn.com");


secondGroup[4][0][0]=new Option("---Select 3---"," ");
secondGroup[4][1][0]=new Option("Now Select This One"," ");
secondGroup[4][1][1]=new Option("Unisex","http://www.cnn.com");

secondGroup[4][2][0]=new Option("Now Select A Page"," ");
secondGroup[4][2][1]=new Option("Caballero","http://www.news.com");

secondGroup[4][3][0]=new Option("Now Select A Page"," ");
secondGroup[4][3][1]=new Option("Dama y Niña","http://www.news.com");
secondGroup[4][3][2]=new Option("Unisex"," ");

secondGroup[4][4][0]=new Option("Now Select A Page"," ");
secondGroup[4][4][1]=new Option("Dama y Niña","http://www.news.com");
secondGroup[4][4][2]=new Option("Unisex","http://www.news.com");
secondGroup[4][4][3]=new Option("Unisex Juvenil","http://www.news.com");

secondGroup[5][0][0]=new Option("---Select 3---"," ");
secondGroup[5][1][0]=new Option("Now Select This One"," ");
secondGroup[5][1][1]=new Option("Dama y Niña","http://www.cnn.com");
secondGroup[5][1][2]=new Option("Unisex","http://www.cnn.com");
secondGroup[5][1][3]=new Option("Unisex Juvenil","http://www.news.com");

var temp1=document.isc.stage3
function redirect1(y){
for (m=temp1.options.length-1;m>0;m--)
temp1.options[m]=null
for (i=0;i<secondGroup[document.isc.example.options.selectedIndex][y].length;i++){
temp1.options[i]=new Option(secondGroup[document.isc.example.options.selectedIndex][y][i].text,secondGroup[document.isc.example.options.selectedIndex][y][i].value)
}
temp1.options[0].selected=true
}
function go(){
location=temp1.options[temp.selectedIndex].value
}

//-->
</script>

		</td>
  </tr>
</table>
</FORM>

</body>
</html>
Last edited by Christian; 08-29-07 at 12:50 PM. Reason: English please.
Reply With Quote
  #6 (permalink)  
Old 09-02-07, 11:06 AM
TwoD TwoD is offline
Community VIP
  
Join Date: Sep 2003
Location: 404
Posts: 1,813
Thanks: 0
Thanked 0 Times in 0 Posts
javascript Code:
  1. function go(){
  2. document.getElementById('f1').src=temp1.options[temp.selectedIndex].value;
  3. }
HTML Code:
<iframe name="f1" src="frame1.htm" width="627" height="336" id="f1"></iframe>
__________________
[W3Schools - learn all about the standards.] [QuirksMode - Browser Quirks] [MS's Online Reference Docs] [DOM in Gecko.]
Please pay attention to stickys, announcements and forum rules, thank you. Please also remember Code Wrappers and [SOLVED] Marking, this helps everyone.
Reply With Quote
Reply

Bookmarks

« Live Price Update | How can this be done? »

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
cross frame meni Dustyn JavaScript 3 03-17-05 01:32 AM
link to iframe//help moose JavaScript 1 01-29-05 12:26 PM
click then open menu ramez JavaScript 5 12-20-04 06:35 PM
how to have a dropdown menu w/ nothing selected? altlprsn HTML/XHTML/XML 1 06-07-04 07:55 PM
How to code the jScript to open in frame astia JavaScript 1 11-06-03 09:27 AM


All times are GMT -5. The time now is 10:43 PM.
vBulletin® Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.