h2g2 The Hitchhiker's Guide to the Galaxy: Earth Edition

I was wondering whether it would be possible to create something like the menus shown here:

http://www.warnervillage.co.uk/WVOnline44.asp?WCI=CinemaSearch&V=936

(The dual menus reacting with each other)

I know that this was probably done with ASP or CGI or something but I was wondering whether the same effect could be achieved using JavaScript as I have seen examples of menus reacting to each other in this:

http://www.webreference.com/programming/javascript/beginning/chap6/5/4.html

I relise though that being totally web knowledgable this JavaScript menu would probably be "clumbsy" and "uncompatible" but without cgi and ASP installed on the server I'm using I guess its my only hope.

CK

i have done this before, I use the direct brute force method, because I can use CGI to change the data. but it just requires you to use the DOM to clear the control and add new tags in. when a particula item is selected in the other menu. I did a realy nify thing with the upload boxes and a list box once... back in the day... last week...

tell me if you need help coading...

-- DoctorMO --

One of the ways I've seen it done is to have a JavaScript onChange call that forces a refresh to the new page. They use this method on MapQuest, for example.

DoctorMO:

I would really appreciate your help in coding this. On the Left menu I would like the months of the year and on the right menu 3-4 options which I have yet to confirm. If you clicked lets say June and then clicked option 2 then clicked the "GO" button it would take you to june2.htm (or another path which I can modify). Is it possible to code this in JavaScript?

CK

Oh yes, not a problem. I'd prefare to work with you, so you can pick up a few things. but it's realy not that hard (says this while remebering that is can sound aragant at times). OK so it is hard if you don't know what your doing. but, er... I can. er... help?

-- DoctorMO --

You can most certanly help.

So where do we start?

CK

Er, a base page. if you would do the houners of creating your GUI, you've pointed me to what you would like it to do, then I can sit down and take a stab at the JavaScript and confire with you tonight.

-- DoctorMO --

If GUI means Graphical User Interface then heres a template of the page with the lists intergrated (without the appropriate coding):

http://www.birdwatchnorthumbria.co.uk/events/tester.htm

Tell me if thats not what you mean by GUI (Lots of technobabble still goes over my head, I'm not a fully fledged yet )

CK

Yes graphical user interface.

Please wait...

-- DoctorMO --

Right I'm looking into it, let me think about how to aproch it, you may look up JavaScript refrances if you like...

-- DoctorMO --

Just thought I would jump my over-enthusiastic self back in by pointing you to the JavaScript v1.5 manual:

http://developer.netscape.com/docs/manuals/js/core/jsguide15/contents.html

To further complicate things i woudl like to add another option into the right hand column saying all events which selects all the other options in the right menu for the month (this will go to a separate page detailing all the events in the month. It may be unclear as to what I mean but I'm at school and cannot update the GUI, I will do that when i get home later tonight.

CK

Have you made any progress DoctorMo?

CK

Your right about you prevouse post being unclear. it's like a fog, I don't know what you want... I'm going to do what was fist agreed now and see if it can be modified later for what you want...

-- DoctorMO --

Mecanism is done... I just to get the file to you...

Ah I'll post it...

put this in your header, it is the JavaScript!

<!--

//Create all the Month Selector Arrays
var January = new Array('Janaury 1', 'January 2', 'Janaury 3');
var Febuary = new Array('Febuary 1', 'Febuary 2', 'Febuary 3');
var March = new Array('March 1', 'March 2', 'March 3');
var April = new Array('April 1', 'April 2', 'April 3');
var May = new Array('May 1', 'May 2', 'May 3');
var June = new Array('June 1', 'June 2', 'June 3');
var July = new Array('July 1', 'July 2', 'July 3');
var August = new Array('August 1', 'August 2', 'August 3');
var September = new Array('September 1', 'September 2', 'September 3');
var October = new Array('October 1', 'October 2', 'October 3');
var November = new Array('November 1', 'November 2', 'November 3');
var December = new Array('December 1', 'December 2', 'December 3');

//Then Create and Link a Months Array
//To fudge a 2D array we can use.
var Months = new Array();

Months[0] = January;
Months[1] = Febuary;
Months[2] = March;
Months[3] = April;
Months[4] = May;
Months[5] = June;
Months[6] = July;
Months[7] = August;
Months[8] = September;
Months[9] = October;
Months[10] = November;
Months[11] = December;

//Main event function
function ChangeEvents()
{
//Get two HTML Dropdown Objects
var MonthSel = document.getElementById('monthsel');
var EventSel = document.getElementById('eventsel');

//Select the month we want to use
var MonthArray = Months[MonthSel.selectedIndex];

//Clear Drop Down Box (not so DOM)
EventSel.innerHTML = "";

//For each Item in the selected month
for(var ArrayIndex = 0; ArrayIndex < MonthArray.length; ArrayIndex++)
{
//This is offical DOM working code!
//It will apend a New Item onto the end of
//The Events Object, the Text Node is the OPTIONs contents.
var NewOption = document.createElement('OPTION');
var NodeText = document.createTextNode(MonthArray[ArrayIndex]);
NewOption.appendChild(NodeText);
EventSel.appendChild(NewOption);
}

return true;

}

//-->


sorry about the tabbing, disapears in H2G2...

Change your SELECT Objects to


January
February
March
April
May
June
July
August
September
October
November
December


and...



<!-- put your default options in first-->
January 1
January 2
Janaury 3



Tell me if you need any help.

-- DoctorMO --

Oh and Tested in IE and Mozilla (Netscape)

-- DoctorMO --

Thanks. Not being all that good at JavaScript (As in I only know the document.write function) coudl you explain this to me a little.

When you start up the page it shows you the things you have typed into the options in the html :

"

<!-- put your default options in first-->
Day tours
Weekend Breaks
Personalised Tours

"

buts as soon as you click a month it changes them to the names in the arrays. Wouldn't it of been easier to (and this is a total guess with no JavaScript knowledge meaning its probably totally wrong) give the three options in the right menu (which always contains the same preset options) a value? Lets say:

Day tours = 1
Weekend Breaks = 2
Personalised Tours = 3

and then told the script to give the months a value.

January= Jan
February= Feb

etc

and then told it to get the user slelected option of the first list (lets use january) and then the second list (weekend breaks) and told it to make a URL out of it with http://www.websiteaddress.com/folder/ at the start to make the following URL:

http://www.websiteaddress.com/folder/Jan2

adding a .htm onto the end. All this would happen when the user clicks "Go" giving

http://www.websiteaddress.com/folder/Jan2.htm

In the script you've very kindly made me I cannot see any obvious method of going to a URL made up of the two options when you click go.

I think I have mislead you somewhat by saying the menus interact. What I meant was the script read the values of the two menus, which always have the same options, and makes a URL. Is this possible with two static menus which the script reads the options of? Sorry for the misunderstanding.

CK

CK

*sigh*

Yes you mislead me quite a bit... I didn't know what you were asking. putting the dubry thing to make a link is about as easy as making chit chat. . well thats 2 hours wasted...

just do...

document.location to set the URL.

getElementById('month').firstChild.text
getElementById('the other objects id').firstChild.text or selectedIndex for the integer. so you could construct a URL with each using standard + symbols.

I'm going to ly down now, and think about what a idot I am.

-- DoctorMO --

Sorry for wasting your time, I thought I had made it clear in earlier posts what I wanted but obivously I hadn't which is entirely my fault.

If you're not still totally I would appreciate some help in trying to understand what you suggested in your last post and soem help building it into the select lists?



CK

Stick the Select Tags in as sujested in post 15...

in the buttons onclick event (or if your feeling adventuras add a FORM tag in and put it in the onsubmit function)

function SubmitPage()
{
//Get two HTML Dropdown Objects
var MonthSel = document.getElementById('monthsel');
var EventSel = document.getElementById('eventsel');

if(MonthSel.selectedIndex > 0 && EventSel.selectedIndex > 0)
{
document.location = 'page' + MonthSel.selectedIndex + EventSel.selectedIndex + '.html';
}

}

this is the simplist rout, yo will end up with pages like page11.html for January Group Day trips...

-- DoctorMO --