HTML Help

emu1616 · Joined: 16 Oct 2009 Posts: 4

I am having trouble getting my links to open in the correct frame.

I have a basic set up with two frames, one has drop down boxes to different systems and links that i use and also has a view of my folder.

The other is a blank frame until a link is called to open in it. <-- which isn't working.

Here is the code I'm using:

Quote:
<HTML>
<HEAD>
<TITLE>Gibbo's Interface</TITLE>
</HEAD>

<FRAMESET COLS="*, 79%" FRAMEBORDER=NO FRAMESPACING=0 BORDER=0>
<FRAME SRC="W:/Orange/Department/Collections/Agents/Gibbo/HTML Stuff/Interface/Frame1.html" NAME="Frame1">
<FRAME SRC="W:/Orange/Department/Collections/Agents/Gibbo/HTML Stuff/Interface/Frame2.html" NAME="Frame2">

</FRAMESET>

</HTML>

This is the main page code

Quote:
<form name="form1">
<select name="select1" size="1" style="background-color:#FFFFD7" onChange="displaydesc(document.form1.select1, thetext1, 'textcontainer1')">
<option selected value="blank"</option>
<option value="http://iismbr04/orangepdq" target="Frame2">PDQ Form</option>
<option value="http://iismbr04/datacapture/default.aspx?wfid=46" target="Frame2">Transfer From</option>
<option value="W:\Orange\Department\Collections\Agents\Gibbo\Misc\Notes.txt" target="Frame2">Notes</option>
<option value="https://extranet.orange.co.uk:9007/SCOUTPRD/signon.html" target="Frame2">Scout</option>
<option value="https://extranet.orange.co.uk:9009/orangeuk/ccil/" target="Frame2">Guru</option>
<option value="http://192.168.105.65/EAMWeb/" target="Frame2">Empower</option>
<option value="http://horis/" target="Frame2">Horis</option>
<option value="https://signup.orangehome.co.uk/admin/vendor.ahtml" target="Frame2">Vendor View</option>
<option value="http://www.adslchecker.bt.com/pls/adsl/totl.welcome" target="Frame2">TOL</option>
<option value="http://www.wanadoo2.netlynkdirect.com/login.asp" target="Frame2">Netlynk</option>
</select>
<input type="button" value="Go"
onClick="jumptolink(document.form1.select1)"><br>
<span id="textcontainer1" align="left" style="font:italic 12px Arial">
</span>
</form>

<Drop Down Menu 2>

<form name="form2">
<select name="select2" size="1" style="background-color:#FFFFD7" onChange="displaydesc(document.form2.select2, thetext2, 'textcontainer2')">
<option selected value="blank"</option>
<option value="http://www.google.com target="Frame2">Google</option>
<option value="http://www.thesun.co.uk" target="Frame2">The Sun</option>
<option value="http://news.bbc.co.uk" target="Frame2">BBC News</option>
<option value="http://www.orange.co.uk" target="Frame2">Orange Home page</option>
</select>
<input type="button" value="Go"
onClick="jumptolink(document.form2.select2)"><br>
<span id="textcontainer2" align="left" style="font:italic 12px Arial">
</span>
</form>

<script type="text/javascript">

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')
displaydesc(document.form2.select2, thetext2, 'textcontainer2')

</script>

<td width="50%" bgcolor="#000000" body background="transparent" text="white"align="center">
<font face="arial" size="3" color="#FFFFFF"><b>My Folder</b></font>
<br>
<iframe src="W:\Orange\Department\Collections\Agents\Gibbo" width="100%" height="80%"></iframe>

This is the code being used in Frame 1.

Frame two has an .html document but is a blank document.

If anyone can help it would be greatly appriciated. I'm still a novice at this but I cannot get my head around why it's not working as everything looks ok.

NB: if anyone was wanting to access the links to test them, the majority of them won't work as the link to internal systems/drives.

Thanks.

emu1616 · Joined: 16 Oct 2009 Posts: 4

Any help with this?

sticks464 · Joined: 31 Dec 2006 Posts: 2311

Why is it necessary to use two forms with list boxes when it could be done with a simple dropdown list? It is not a wise idea to show blank pages on entering a site. There should at least be a page that says to choose a menu item so users don't think the site is broken or not working.

Frame1.html
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Drop menu</title>
<style type="text/css">
ul#nav, ul#nav ul {
margin: 0;
padding: 0;
list-style: none;
}

ul#nav li {
position: relative;
float: left;
width:149px;
}

#nav li ul {
position: absolute;
margin-left: -999em; /* hide menu from view */
top: auto;
left:0;
}

/* Styles for Menu Items */
ul#nav li a {
display: block;
text-decoration: none;
color: #777;
background: #ffffcc; /* IE6 Bug */
padding: 5px;
border: 1px solid #ccc;
margin-bottom:-1px;
min-height:0;
}
/* commented backslash mac hiding hack \*/
* html ul#nav li a {height:1%; position:relative;}
/* end hack */

/* this sets all hovered lists to red */
#nav li:hover a,#nav li.over a,
#nav li:hover li a:hover,#nav li.over li a:hover {
color: #fff;
background-color: red;}

/* set dropdown to default */
#nav li:hover li a,#nav li.over li a {
color: #777;
background-color: #ffffcc;
}
#nav li ul li a { padding: 2px 5px; } /* Sub Menu Styles */
#nav li:hover ul,#nav li.over ul {margin-left:0; } /* show menu*/

</style>

</head>

<body>
<ul id="nav">
<li><a href="#">Internal Links</a>
<ul>
<li><a href="http://iismbr04/orangepdq" target="Frame2">PDQ Form</a></li>
<li><a href="http://iismbr04/datacapture/default.aspx?wfid=46" target="Frame2">Transfer From</a></li>
<li><a href="W:\Orange\Department\Collections\Agents\Gibbo\Misc\Notes.txt" target="Frame2">Notes</a></li>
<li><a href="https://extranet.orange.co.uk:9007/SCOUTPRD/signon.html" target="Frame2">Scout</a></li>
<li><a href="https://extranet.orange.co.uk:9009/orangeuk/ccil/" target="Frame2">Guru</a></li>
<li><a href="http://192.168.105.65/EAMWeb/" target="Frame2">Empower</a></li>
<li><a href="http://horis/" target="Frame2">Horis</a></li>
<li><a href="https://signup.orangehome.co.uk/admin/vendor.ahtml" target="Frame2">Vendor View</a></li>
<li><a href="http://www.adslchecker.bt.com/pls/adsl/totl.welcome" target="Frame2">TOL</a></li>
<li><a href="http://www.wanadoo2.netlynkdirect.com/login.asp" target="Frame2">Netlynk</a></li>
</ul>
</li>
<li><a href="#">External Links</a>
<ul>
<li><a href="http://www.google.com" target="Frame2">Google</a></li>
<li><a href="http://www.thesun.co.uk" target="Frame2">The Sun</a></li>
<li><a href="http://news.bbc.co.uk" target="Frame2">BBC News</a></li>
<li><a href="http://www.orange.co.uk" target="Frame2">Orange Home page</a></li>
</ul>
</li>
</ul>

</body>
</html>

emu1616 · Joined: 16 Oct 2009 Posts: 4

Hi,

Thanks for your reply, I've only just got round to getting it :S

I have copied what you supplied into frame1.html but when opening the main interface I only get a webpage with text - INTERNAL LINKS & EXTERNAL LINKS. I cannot click or hoover on these to bring up the actual links.

Is there something I need to change or add?
Like i said I'm a bit of a newbie at this so bear with me.

The blank webpage is not an issue as it's only going to be myself that is using it.

Thanks

sticks464 · Joined: 31 Dec 2006 Posts: 2311

My bad, I gave you the layout for a horizontal menu instead of a vertical. Here's the new code.

Frame1.html
Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Drop menu</title>
<script type="text/javascript">
// JavaScript Document

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>

<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style: none;
width:150px
}

ul li {
position: relative;
width:148px;
border: 1px solid #ccc;
}
/* keep folowing styles together..........................*/
* html ul ul {
margin-left:-16px;/* ie5 fix */
voice-family: "\"}\"";
voice-family: inherit;
}
* html ul li {float:left;/* hide float from ie5*/}
* html ul ul {
width:148px;
voice-family: "\"}\"";
voice-family: inherit;
}
* html ul ul {margin-left:0;/* hide margin from ie5*/}

/* keep above styles together .............*/

li ul {
display:none;
background:#ffffcc
}
li ul li{border:none;}
/* Styles for Menu Items */
ul li a {
display:block;
text-decoration: none;
color: #777;
background: #ffffcc ;
line-height:2em;
height:2em;
padding:0 5px
}
/* this sets all hovered lists to red */
li:hover a, li.over a,
li:hover li a:hover, li.over li a:hover {
color: #fff;
background-color: red;
}

/* set dropdown to default */
li:hover li a, li.over li a {
color: #777;
background-color: #fff;
}
li ul li a { } /* Sub Menu Styles */
li:hover ul, li.over ul { display:block } /* The magic */

</style>

</head>

<body>
<ul id="nav">
<li><a href="#">Internal Links</a>
<ul>
<li><a href="http://iismbr04/orangepdq" target="Frame2">PDQ Form</a></li>
<li><a href="http://iismbr04/datacapture/default.aspx?wfid=46" target="Frame2">Transfer From</a></li>
<li><a href="W:\Orange\Department\Collections\Agents\Gibbo\Misc\Notes.txt" target="Frame2">Notes</a></li>
<li><a href="https://extranet.orange.co.uk:9007/SCOUTPRD/signon.html" target="Frame2">Scout</a></li>
<li><a href="https://extranet.orange.co.uk:9009/orangeuk/ccil/" target="Frame2">Guru</a></li>
<li><a href="http://192.168.105.65/EAMWeb/" target="Frame2">Empower</a></li>
<li><a href="http://horis/" target="Frame2">Horis</a></li>
<li><a href="https://signup.orangehome.co.uk/admin/vendor.ahtml" target="Frame2">Vendor View</a></li>
<li><a href="http://www.adslchecker.bt.com/pls/adsl/totl.welcome" target="Frame2">TOL</a></li>
<li><a href="http://www.wanadoo2.netlynkdirect.com/login.asp" target="Frame2">Netlynk</a></li>
</ul>
</li>
<li><a href="#">External Links</a>
<ul>
<li><a href="http://www.google.com" target="Frame2">Google</a></li>
<li><a href="http://www.thesun.co.uk" target="Frame2">The Sun</a></li>
<li><a href="http://news.bbc.co.uk" target="Frame2">BBC News</a></li>
<li><a href="http://www.orange.co.uk" target="Frame2">Orange Home page</a></li>
</ul>
</li>
</ul>

</body>
</html>

Your frameset page should look like this. Replace the
<frame src="Frame1.html"
<frame src="Frame2.html"
with the correct sources
Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Gibbo's Interface</title>
</head>

<frameset cols="*, 79%" frameborder=NO framespacing=0 border=0>
<frame src="Frame1.html" name="Frame1">
<frame src="Frame2.html" name="Frame2">

</frameset>
<noframes><body>
</body>
</noframes>
</html>

Make sure your links are correct;
frame1.html and Frame1.html are two different documents.

emu1616 · Joined: 16 Oct 2009 Posts: 4

Hey thanks it's all working now, I will learn all this one day.

Thanks again :D

nsavalas · Joined: 16 Nov 2009 Posts: 4 Location: Los Angeles, CA US

Please read my post at:

http://www.htmlcodetutorial.com/help/ftopic2976.html