I currently have a list of links to the left of my iframe sort of like a menu. However, I have quickly realized that is not a very scalable option. What I want to do is create a simple drop down menu with all my links inside of it, and have them still open inside of my iframe.
Example of one of my links.
<li>
<a href="http://pncw0787:24543/SoA/Team%20Folders/NOC/noc%20tool%20html%20pages/CS1000%20Name%20Change.htm"
target="iframe1">CS1000 Name Change</a>
</li>
If you want to open ALL links in your frame, then you should state this fact in your document HEAD section
<head>
<base target="iframe1">
</head>
And I think that is enough.
Okay here is another way.
first your styles for links, i just used these stysles but no doubt you have your own.
.menulink
{
color: #0000FF;
cursor: pointer;
}
.menulink:hover
{
color: #FF0000;
cursor: pointer;
}
Next the code to open the link in the IFrame
<script type="text/vbscript" id="OpenInMyFrame">
' <!--
Function OpenInMyFrame(LinkUrl)
window.document.getElementById("MyFrame1").src = LinkUrl
End Function
' -->
</script>
Finally your links and iFrame
<ul id="MyMenu">
<li class="menulink" onclick="OpenInMyFrame('http://www.bbc.co.uk')">Menu1</li>
<li class="menulink" onclick="OpenInMyFrame('http://www.google.co.uk')">Menu2</li>
<li class="menulink" onclick="OpenInMyFrame('http://www.microsoft.co.uk')">Menu3</li>
<li class="menulink" onclick="OpenInMyFrame('http://www.ibm.co.uk')">Menu4</li>
</ul>
<iframe id="MyFrame1" name="MyFrame1" style="width: 1040px; height: 682px" src="Default.aspx">
</iframe>
<select id="MyMenu">
<option class="menulink" onclick="OpenInMyFrame('http://www.bbc.co.uk')">Menu1</option>
<option class="menulink" onclick="OpenInMyFrame('http://www.google.co.uk')">Menu2</option>
<option class="menulink" onclick="OpenInMyFrame('http://www.microsoft.co.uk')">Menu3</option>
<option class="menulink" onclick="OpenInMyFrame('http://www.ibm.co.uk')">Menu4</option>
</select>
<script type="text/javascript">
//<!--
function OpenInMyFrame(var1)
{
window.document.getElementById("MyFrame1").src = var1;
}
//-->
</script>
something like this
<select id='selectLinks'>
<option value='http://pncw0787:24543/SoA/Team%20Folders/NOC/noc%20tool%20html%20pages/CS1000%20Name%20Change.htm'>CS1000 Name Change</option>
<option value='http://www.officedepot.com'>Go to Office Depot.com</option>
</select>
Then you would need some javascript to control this. I recommend jQuery library because it makes this simple.
EDIT: Updated my example to actually be correct. Also found that google doesnt like to be opened in an iframe, so it looks like it doesnt work but its just google being a pain
<script type='text/javascript'>
$(document).ready(function(){
$("#selectLink").on("change", function(){
var link = $(this).find("option:selected").val();
$("#iframe1").attr("src", link);
});
});
</script>
this is off the top of my head and I've been drinking this might not be exact
Thanks
Gentleman, thank you for the help. I was able to get it working with the following. I just needed to change the javascript to suit my needs. Thank you so much !!
<script language="javascript" type="text/javascript">
function jump(form) {
var myindex=form.menu.selectedIndex
if (form.menu.options[myindex].value != "0")
{
window.open(form.menu.options[myindex].value,
target="iframe1");
}
}
//-->
</script>
<form name="lissamenu2" ACTION=URI>
<select name="menu" onchange="jump(this.form)">
<option value="0">Select</option>
<option value="0"></option> (this adds a space).
<option value="http://pncw0787:24543/SoA/Team%20Folders/NOC/noc%20tool%20html%20pages/CS1000%20Name%20Change.htm">CS1000 Name Change</option>
</select>
</form>
