Menu won't work! 1

[EvertonFC]

Hello

I have a nice DHTML menu (with submenus):

ITEM A ITEM B ITEM C ITEM D

Under ITEM D, for example, I have Link 1, Link 2, Link 3, Link 4, etc in a vertical column. The code looks like this:

['Contact', null, null,
['John'],
['Paul'],
['Fred'],
['Mary']

],

I also have a HTML file called Mary.html.

What I wish to do it bring Mary.html into the browser when a visitor clicks on Mary in my menu, but I am unsure how to do it.

Is it something like: ['Mary', 'mary.html']? Yet this doesn't work when I try it. Both the menu and Mary.html are in the same folder on my server.

Many thanks.

EvertonFC

 

[BillyRayPreachersSon]

What I wish to do it bring Mary.html into the browser when a visitor clicks on Mary in my menu, but I am unsure how to do it.

Is it something like: ['Mary', 'mary.html']?

That really depends on the menu code you're using. Without knowing anything about it (which we don't), commenting would be futile.

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[BillyRayPreachersSon]

This is almost like ringing a garage and asking if pressing the 3rd button from the left on your dashboard will turn on the windscreen wipers... without them knowing anything about the make and model of your car.

I'm sure you get the idea ;-)

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[ca8msm]

You'll have to provide an example of the actual menu (a URL would be nice!) as we have no idea how the menu is supposed to work.

Also, it may be beneficial to take notice of Vragabond's suggestion in thread215-1182932.


____________________________________________________________

Need help finding an answer?

Try the Search Facility or read FAQ222-2244 on how to get better results.

 

[EvertonFC]

OK, my apologies for the lack of information in my original post. I do not have a URL because this will be part of an Intranet site.

Here is the code for the two main files:

menu.js (name of file)


function menu (a_items, a_tpl) {

if (!document.body || !document.body.style)
return;


this.a_config = a_items;

this.a_tpl = a_tpl;

this.n_id = A_MENUS.length;


this.a_index = [];
this.a_children = [];

this.expand = menu_expand;
this.collapse = menu_collapse;

this.onclick = menu_onclick;
this.onmouseout = menu_onmouseout;
this.onfiltered= menu_onmouseover;
this.onfiltered= menu_onmousedown;


this.a_tpl_def = {
'block_top' : 16,
'block_left' : 16,
'top' : 20,
'left' : 4,
'width' : 120,
'height' : 22,
'hide_delay' : 0,
'expd_delay' : 0,
'css' : {
'inner' : '',
'outer' : ''
}
};

parent item
this.getprop = function (s_key) {
return this.a_tpl_def[s_key];
};

this.o_root = this;
this.n_depth = -1;
this.n_x = 0;
this.n_y = 0;

for (n_order = 0; n_order < a_items.length; n_order++)
new menu_item(this, n_order);


A_MENUS[this.n_id] = this;

for (var n_order = 0; n_order < this.a_children.length; n_order++)
this.a_children[n_order].e_oelement.style.visibility = 'visible';
}

function menu_collapse (n_id) {

clearTimeout(this.o_showtimer);


var n_tolevel = (n_id ? this.a_index[n_id].n_depth : 0);
for (n_id = 0; n_id < this.a_index.length; n_id++) {
var o_curritem = this.a_index[n_id];
if (o_curritem.n_depth > n_tolevel && o_curritem.b_visible) {
o_curritem.e_oelement.style.visibility = 'hidden';
o_curritem.b_visible = false;
}
}

if (!n_id)
this.o_current = null;
}

function menu_expand (n_id) {


if (this.o_hidetimer)
return;

var o_item = this.a_index[n_id];

if (this.o_current && this.o_current.n_depth >= o_item.n_depth)
this.collapse(o_item.n_id);
this.o_current = o_item;

if (!o_item.a_children)
return;


for (var n_order = 0; n_order < o_item.a_children.length; n_order++) {
var o_curritem = o_item.a_children[n_order];
o_curritem.e_oelement.style.visibility = 'visible';
o_curritem.b_visible = true;
}
}


function menu_onclick (n_id) {

return Boolean(this.a_index[n_id].a_config[1]);
}

function menu_onmouseout (n_id) {


var o_item = this.a_index[n_id];


o_item.e_oelement.className = o_item.getstyle(0, 0);
o_item.e_ielement.className = o_item.getstyle(1, 0);


o_item.upstatus(7);


this.o_hidetimer = setTimeout('A_MENUS['+ this.n_id +'].collapse();',
o_item.getprop('hide_delay'));
}

function menu_onmouseover (n_id) {

// cancel mouseoute menu close and item open delay
clearTimeout(this.o_hidetimer);
this.o_hidetimer = null;
clearTimeout(this.o_showtimer);

// lookup new item's object
var o_item = this.a_index[n_id];

// update status line
o_item.upstatus();

// apply rollover
o_item.e_oelement.className = o_item.getstyle(0, 1);
o_item.e_ielement.className = o_item.getstyle(1, 1);

// if onclick open is set then no more actions required
if (o_item.getprop('expd_delay') < 0)
return;

// run expand timer
this.o_showtimer = setTimeout('A_MENUS['+ this.n_id +'].expand(' + n_id + ');',
o_item.getprop('expd_delay'));

}

function menu_onmousedown (n_id) {


var o_item = this.a_index[n_id];

// apply mouse down style
o_item.e_oelement.className = o_item.getstyle(0, 2);
o_item.e_ielement.className = o_item.getstyle(1, 2);

this.expand(n_id);

}



function menu_item (o_parent, n_order) {

// store parameters passed to the constructor
this.n_depth = o_parent.n_depth + 1;
this.a_config = o_parent.a_config[n_order + (this.n_depth ? 3 : 0)];

// return if required parameters are missing
if (!this.a_config) return;

// store info from parent item
this.o_root = o_parent.o_root;
this.o_parent = o_parent;
this.n_order = n_order;

// register in global and parent's collections
this.n_id = this.o_root.a_index.length;
this.o_root.a_index[this.n_id] = this;
o_parent.a_children[n_order] = this;

// calculate item's coordinates
var o_root = this.o_root,
a_tpl = this.o_root.a_tpl;

// assign methods
this.getprop = mitem_getprop;
this.getstyle = mitem_getstyle;
this.upstatus = mitem_upstatus;

this.n_x = n_order
? o_parent.a_children[n_order - 1].n_x + this.getprop('left')
: o_parent.n_x + this.getprop('block_left');

this.n_y = n_order
? o_parent.a_children[n_order - 1].n_y + this.getprop('top')
: o_parent.n_y + this.getprop('block_top');

// generate item's HMTL
document.write (
'<a id="e' + o_root.n_id + '_'
+ this.n_id +'o" class="' + this.getstyle(0, 0) + '" href="' + this.a_config[1] + '"'
+ (this.a_config[2] && this.a_config[2]['tw'] ? ' target="'
+ this.a_config[2]['tw'] + '"' : '')
+ (this.a_config[2] && this.a_config[2]['tt'] ? ' title="'
+ this.a_config[2]['tt'] + '"' : '') + ' style="position: absolute; top: '
+ this.n_y + 'px; left: ' + this.n_x + 'px; width: '
+ this.getprop('width') + 'px; height: '
+ this.getprop('height') + 'px; visibility: hidden;'
+' z-index: ' + this.n_depth + ';" '
+ 'onfiltered="return A_MENUS[' + o_root.n_id + '].onclick('
+ this.n_id + ');" onfiltered="A_MENUS[' + o_root.n_id + '].onmouseout('
+ this.n_id + ');" onfiltered="A_MENUS[' + o_root.n_id + '].onmouseover('
+ this.n_id + ');" onfiltered="A_MENUS[' + o_root.n_id + '].onmousedown('
+ this.n_id + ');"><div id="e' + o_root.n_id + '_'
+ this.n_id +'i" class="' + this.getstyle(1, 0) + '">'
+ this.a_config[0] + "</div></a>\n"
);
this.e_ielement = document.getElementById('e' + o_root.n_id + '_' + this.n_id + 'i');
this.e_oelement = document.getElementById('e' + o_root.n_id + '_' + this.n_id + 'o');

this.b_visible = !this.n_depth;

// no more initialization if leaf
if (this.a_config.length < 4)
return;

// node specific methods and properties
this.a_children = [];

// init downline recursively
for (var n_order = 0; n_order < this.a_config.length - 3; n_order++)
new menu_item(this, n_order);
}


function mitem_getprop (s_key) {

// check if value is defined for current level
var s_value = null,
a_level = this.o_root.a_tpl[this.n_depth];

// return value if explicitly defined
if (a_level)
s_value = a_level[s_key];

// request recursively from parent levels if not defined
return (s_value == null ? this.o_parent.getprop(s_key) : s_value);
}

function mitem_getstyle (n_pos, n_state) {

var a_css = this.getprop('css');
var a_oclass = a_css[n_pos ? 'inner' : 'outer'];

// same class for all states
if (typeof(a_oclass) == 'string')
return a_oclass;

// inherit class from previous state if not explicitly defined
for (var n_currst = n_state; n_currst >= 0; n_currst--)
if (a_oclass[n_currst])
return a_oclass[n_currst];
}

function mitem_upstatus (b_clear) {
window.setTimeout("window.status=unescape('" + (b_clear
? ''
: (this.a_config[2] && this.a_config[2]['sb']
? escape(this.a_config[2]['sb'])
: escape(this.a_config[0]) + (this.a_config[1]
? ' ('+ escape(this.a_config[1]) + ')'
: ''))) + "')", 10);
}


menu_items.js (name of the file)


var MENU_ITEMS = [
['Home', null, null,
['Home1', null, null,
['Link', null, null,
['Link'],
['Link'],
['Link'],
['Link'],
['Link']
],
['Home2', null, null,
['Link'],
['Link1'],
['Link2'],
['Link3'],
['Link4']
],
['Notes', null, null,
['Notes1'],
['Notes2']
]
],
['Appendix', null, null,
['Appendix2'],
['Appendix3']
],
['Results', '

http://www.results.com'

],
],
['Paper', null, null,
['Paper1'],
['Paper2'],
['Paper3'],
['Paper4'],
['Paper5'],
['Paper6'],
],
['Motion', null, null,
['Link1'],
['Link2'],
['Link3'],
['Link4'],
['Link5l']
],
['Contact', null, null,
['Staff1'],
['Staff2'],
['Staff3'],
['Mary']
],
];

Again, my question relates to how I can insert a link from Mary (or any of the others) to a separate .html page or even a certain location (top, middle, bottom, etc) of a .html page.

Many thanks.

EvertonFC

 

[Foamcow]

There seems to be an awful lot of javascript there to do something essentially pretty simple.
I don't know maybe there are fancy effects on the menu... I'm not going to disassemble the js to find out!

Have you considered doing the menus another way? For example, with CSS. As this makes the management of links alot easier and you simply wouldnt be having this difficulty.

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

 

[Foamcow]

Looking at the menu_items.js more closely I noticed

['Paper', null, null,
  ['Paper1'],
  ['Paper2'],
  ['Paper3'],
  ['Paper4'],
  ['Paper5'],
  ['Paper6'][COLOR=red],[/color]
 ],
 ['Motion', null, null,
  ['link1'],
  ['link2'],
  ['link3'],
  ['link4'],
  ['Link5l']
 ],
 ['Contact', null, null,
  ['Staff1'],
  ['Staff2'],
  ['Staff3'],
  ['Mary']
 ]

There is a comma at the end of the menu defined as "Paper" (and the preceding ones) but not one at the ends of the "Motion" and "Contact" menus.
I don't know if this might be causing a parsing problem or not, but it may be worth checking.

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

 

[Tarwn]

Cheap plug, here is a link to an easy to manufacture CSS menu (based loosely on the Suckerfish ones) that only needs a few lines of javascript to make IE work correctly and is based off standard HTML list tags:

http://tiernok.com/tt/dropdown/

And a graphically challenged fake site using both the vertical and horizantal menus (only requires changing a single classname in your ul tag):

http://tiernok.com/tt/dropdown/caffeine.html

-T