/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Drop down menu that opens in an iframe

Copy linkTweet thisAlerts:
Jan 12.2009

As you can see at [url]http://www.kchek.com/bus/blue/index2.html[/url] I have used javascript (copied from some tutorial) so that if an option from the drop down menu is selected, it will open a link in an iframe underneath the form. For instance, if you choose “North Garage”, you will see the page north.html populate the iframe beneath the dropdown menu.

Is there anyway to accomplish this same feat without the need for a separate page? In other words, I would like to put the source code of north.html somewhere in index2.html, and when the “North Garage” option is selected, it should automatically display in the iframe.

To sum up, I would like the web site to operate in the same way that it currently does – but I only want to have ONE html page (the index) with the sources of all the options stored in it.

to post a comment
JavaScript

19 Comments(s) ↴

Copy linkTweet thisAlerts:
@MrNobodyJan 13.2009 — Code the options as the HTML source of multiple, separate DIV blocks. When the page loads, you can hide these DIV blocks ([B]obj.style.display="none"[/B]) and selectively display ([B]obj.style.display="block"[/B]) just the one selected.
Copy linkTweet thisAlerts:
@clueless22authorJan 13.2009 — Could you give me an example?

What would i put after value="" for each option?
Copy linkTweet thisAlerts:
@MrNobodyJan 13.2009 — There is no "value" for what I'm talking about. Are you talking about your menu options? I don't know anything about how your menu options work. So, can't say. Give me an example.
Copy linkTweet thisAlerts:
@clueless22authorJan 13.2009 — Right now, I have the following code in my header:

<script type="text/javascript">
<!--//
function nav(mySelect) {
PageIndex=mySelect.selectedIndex; {
if(mySelect.options[PageIndex].value != "none") {

frames['iframe2'].location.href = mySelect.options[PageIndex].value; } } }
//-->
</script>

In the body, I have a drop-down menu:

<form name="form">
<select name="select" style="font-size:16px" onchange="nav(this.form.select)">
<option value="1.html">North Garage</option>
<option value="etc.html">etc.</option>
</select>
</form>

My question is, what would I link to in <option value=" ">?
Copy linkTweet thisAlerts:
@MrNobodyJan 13.2009 — OK, you would put the ID of the associated DIV block in the [B]option[/B] value. Then, instead of this:
[CODE]frames['iframe2'].location.href = mySelect.options[PageIndex].value;[/CODE]
you would do this:
[CODE]document.getElementById(mySelect.options[PageIndex].value).style.display = 'block';[/CODE]
But you would need to save that reference in a global variable so that the next selection can hide the previous selection and display the new selection.
Copy linkTweet thisAlerts:
@clueless22authorJan 13.2009 — But you would need to save that reference in a global variable so that the next selection can hide the previous selection and display the new selection.[/QUOTE]

You have been so helpful, and I am much closer! See: http://www.kchek.com/bus/blue/index2.html

Could you elaborate or give me a brief how-to regarding your last point - saving the reference in a global variable? I have no idea how to do this, and I am experiencing what you predicted if I didn't - where new selections simply add to instead of replace the old ones.

Thanks again!
Copy linkTweet thisAlerts:
@MrNobodyJan 13.2009 — [CODE]var prevSelect = null;
function nav(mySelect)
{
if (prevSelect)
{
prevSelect.style.display = 'none';
prevSelect = null;
}
var PageIndex = mySelect.selectedIndex;
if(mySelect.options[PageIndex].value != "none")
{
prevSelect = document.getElementById(mySelect.options[PageIndex].value);
prevSelect.style.display = 'block';
}
return true;
}[/CODE]
Copy linkTweet thisAlerts:
@clueless22authorJan 13.2009 — Perfect! Thanks again!
Copy linkTweet thisAlerts:
@MrNobodyJan 13.2009 — no problem
Copy linkTweet thisAlerts:
@clueless22authorJan 13.2009 — Would it be possible to do this with two levels, so that the menu options reveal a hidden DIV with more menu options that reveal the data?

So as an example, a user would select Blue Line, and another drop down box would appear beneath it with the list of stop names. Then that user would select North Garage, and the data (in this case, timepoints) would appear below that.

What would I have to change or add?
Copy linkTweet thisAlerts:
@clueless22authorJan 13.2009 — See what I am going for @ http://kchek.com/bus/
Copy linkTweet thisAlerts:
@clueless22authorJan 13.2009 — The problem that I'm having is that when I click on an item in the second level of options (i.e. North Garage), it hides the dropdown menu. I would like each of the menus to remain visible - the second level should only disappear if a different option in the first level of choices is selected.
Copy linkTweet thisAlerts:
@MrNobodyJan 13.2009 — Pass a parameter to your function which indicates the level of the menu. Also make your global variable into an array where each element in the array represents a level in your menu structure. That way you can keep your levels separate.

Or... Just use a different function and a different global variable for each level of your menu structure.
Copy linkTweet thisAlerts:
@clueless22authorJan 13.2009 — Or... Just use a different function and a different global variable for each level of your menu structure.[/QUOTE]


Which is the global variable? Could I just copy and paste the original code you gave me and add a 2 to whatever needs changing?
Copy linkTweet thisAlerts:
@MrNobodyJan 13.2009 — Could I just copy and paste the original code you gave me and add a 2 to whatever needs changing?[/QUOTE]
Yep.
Copy linkTweet thisAlerts:
@clueless22authorJan 13.2009 — Nevermind - I think I got it!

var prevSelect = null;
function nav(mySelect)
{
if (prevSelect)
{
prevSelect.style.display = 'none';
prevSelect = null;
}
var PageIndex = mySelect.selectedIndex;
if(mySelect.options[PageIndex].value != "none")
{
prevSelect = document.getElementById(mySelect.options[PageIndex].value);
prevSelect.style.display = 'block';
}
return true;
}

var prevSelect2 = null;
function nav2(mySelect)
{
if (prevSelect2)
{
prevSelect2.style.display = 'none';
prevSelect2 = null;
}
var PageIndex = mySelect.selectedIndex;
if(mySelect.options[PageIndex].value != "none")
{
prevSelect2 = document.getElementById(mySelect.options[PageIndex].value);
prevSelect2.style.display = 'block';
}
return true;
}
Copy linkTweet thisAlerts:
@clueless22authorJan 13.2009 — Thanks, you can mark this thread as RESOLVED!
Copy linkTweet thisAlerts:
@clueless22authorJan 13.2009 — Nevermind - I think I got it!

var prevSelect = null;
function nav(mySelect)
{
if (prevSelect)
{
prevSelect.style.display = 'none';
prevSelect = null;
}
var PageIndex = mySelect.selectedIndex;
if(mySelect.options[PageIndex].value != "none")
{
prevSelect = document.getElementById(mySelect.options[PageIndex].value);
prevSelect.style.display = 'block';
}
return true;
}

var prevSelect2 = null;
function nav2(mySelect)
{
if (prevSelect2)
{
prevSelect2.style.display = 'none';
prevSelect2 = null;
}
var PageIndex = mySelect.selectedIndex;
if(mySelect.options[PageIndex].value != "none")
{
prevSelect2 = document.getElementById(mySelect.options[PageIndex].value);
prevSelect2.style.display = 'block';
}
return true;
}[/QUOTE]

Or perhaps more accurately:
var prevSelect = null;
var prevSelect2 = null;
function nav(mySelect)
{
if (prevSelect)
{
prevSelect.style.display = 'none';
prevSelect = null;
}
var PageIndex = mySelect.selectedIndex;
if(mySelect.options[PageIndex].value != "none")
{
prevSelect = document.getElementById(mySelect.options[PageIndex].value);
prevSelect.style.display = 'block';
}
if (prevSelect2)
{
prevSelect2.style.display = 'none';
prevSelect2 = null;
}
return true;
}

function nav2(mySelect)
{
if (prevSelect2)
{
prevSelect2.style.display = 'none';
prevSelect2 = null;
}
var PageIndex2 = mySelect.selectedIndex;
if(mySelect.options[PageIndex2].value != "none")
{
prevSelect2 = document.getElementById(mySelect.options[PageIndex2].value);
prevSelect2.style.display = 'block';
}
return true;
}
Copy linkTweet thisAlerts:
@MrNobodyJan 13.2009 — Thanks, you can mark this thread as RESOLVED![/QUOTE]
No, [I][U]YOU[/U][/I] can mark this thread resolved. ? See the link at the top of the thread for "Thread Tools."
×

Success!

Help @clueless22 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...