View Full Version : Creating menus using classes question

11-10-2006, 12:49 PM
Hi! :)

I'm fairly new to using classes in JS so I got a bit of a problem...
I'm trying to make a class to create and control a menu box...
The menu consists of 2 parts...
the trigger (div) and the box (div) that is the actuall menu...
each menu has a sticky option that forces the box not to close when active.

when the user clicks someplace other than the trigger or the box there is a check if the box is sticky and if not closes the box....

this is the working NON class box but is a mess... :) just to see what needs to happen! :P

my first problem is that I can't find a way to add an Event handler to the document from *inside* the class that will check each menu...

one other thing is after this is fixed how to insert in the check function what element was clicked... in the normal version this was pretty easy...
but I got NO idea how to do this in a class...

thanx a million for even reading this! :)
really appreciated!

the code is like this for now...

<!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">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">

function addEvent(obj, evType, fn){
if (obj.addEventListener){
obj.addEventListener(evType, fn, true);
return true;
} else if (obj.attachEvent){
var r = obj.attachEvent("on"+evType, fn);
return r;
} else {
return false;

function menu(el, trigger, boxid, x) {
this.el = el;

this.triggerid = trigger[0];
this.triggerclass = trigger[1];
this.triggertitle = trigger[2];

this.boxid = boxid[0];
this.boxclass = boxid[1];
this.items = boxid[2];

this.boxopen = 0;
this.triggeropen = 0;
this.boxsticky = 0;
this.triggersticky = 0;
this.boxstate = 0;

if (typeof(_menu_prototype_called) == 'undefined') {
_menu_prototype_called = true;
menu.prototype.klik = klik;

html = '<div class="'+this.triggerid+'" onclick="'+this.el+'.klik()" id="'+this.triggerid+'">'+this.triggertitle+'</div>'+
'<div class="'+this.boxid+'" id="'+this.boxid+'">links</div>';
$(this.el).innerHTML = html;

$(this.triggerid).className = 'inactive';
$(this.boxid).style.display = 'none';

function klik() {
if (($(this.boxid).style.display == 'none') && (this.boxsticky == 0)) {
$(this.boxid).style.display = '';
} else {
$(this.boxid).style.display = 'none';


addEvent(document, 'click', this.check);


function check() {

function init() {
mone = new menu('mone', ['tr', 'tr', 'trigger name'], ['bx', 'class', 'lalala']);
<body onload="init()">

<div id="mone"></div>