Welcome to WebmasterWorld Guest from 107.22.87.205

Forum Moderators: open

Message Too Old, No Replies

calling an instance of an object in javascript

     
3:56 pm on Nov 3, 2009 (gmt 0)

10+ Year Member



I want to create an object with function in it then call instances of it.
right now the way i have it the second call overrides the first variables. Scope problem?


var ManMenu =
{
//This fuction sets up the list. it take the parent ul id as a variable finds all li in the ul and adds listener events to them. It also defines divGroup by finding one of the div the list links to then finding the parent of that div.
init: function(thisOverUl, thisDivList)
{
ManMenu.overUl=thisOverUl;
ManMenu.divList=thisDivList;
ManMenu.hideAll();
$("#" + ManMenu.overUl + " li a").bind("mouseover",ManMenu.showMenuListener);
},
hideAll: function()
{
$("#" + ManMenu.divList + " div").addClass('menuHide');
},
//this function starts by hiding all the menues
showMenu: function(element)
{
ManMenu.hideAll();
var elementLink = element.href;
var matchingDiv = elementLink.substring(elementLink.indexOf('#'));
$(matchingDiv).removeClass('menuHide');
$(matchingDiv).addClass('menuShow');
},
showMenuListener: function(event)
{
ManMenu.showMenu(this);
}
};
$(document).ready(function() {
var Women = ManMenu.init("womanhumanbody","womanlist");
var Man = ManMenu.init("humanbody","manlist");
});
4:43 pm on Nov 3, 2009 (gmt 0)

10+ Year Member



I came up with this... it works but it seems to me there should be a better way.

var ManMenu =
{
overUl: "humanbody",
divList: "manlist",
//This fuction sets up the list. It finds all li in the ul and adds listener events to them. It also hides all of them although they should already be hidden.
init: function()
{
ManMenu.hideAll();
$("#" + ManMenu.overUl + " li a").bind("mouseover",ManMenu.showMenuListener);
},
//hides all div under the div list by adding a hidding class
hideAll: function()
{
$("#" + ManMenu.divList + " div").addClass('menuHide');
},
//this function starts by hiding all the menues , then it gets the link from each element(LI) and breaks off the div id from them. it removes any hidemenu classes and adds the show menu class.
showMenu: function(element)
{
ManMenu.hideAll();
var elementLink = element.href;
var matchingDiv = elementLink.substring(elementLink.indexOf('#'));
$(matchingDiv).removeClass('menuHide');
$(matchingDiv).addClass('menuShow');
},
showMenuListener: function(event)
{
ManMenu.showMenu(this);
}
};
var WomenMenu =
{
overUl: "womanhumanbody",
divList: "womanlist",
init: function()
{
WomenMenu.hideAll();
$("#" + WomenMenu.overUl + " li a").bind("mouseover",WomenMenu.showMenuListener);
},
hideAll: function()
{
$("#" + WomenMenu.divList + " div").addClass('menuHide');
},
showMenu: function(element)
{
WomenMenu.hideAll();
var elementLink = element.href;
var matchingDiv = elementLink.substring(elementLink.indexOf('#'));
$(matchingDiv).removeClass('menuHide');
$(matchingDiv).addClass('menuShow');
},
showMenuListener: function(event)
{
WomenMenu.showMenu(this);
}
};
$(document).ready(function() {
WomenMenu.init();
ManMenu.init();
});
4:55 pm on Nov 3, 2009 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



Basically, you are creating static public properties overUl and divList of ManMenu. They are not instance variables. Try this instead: (note, I am not certain that the "this" in the showMenu method will have the correct scope when it executes... if it does not, one option might be to pass in the object to the showMenu function, or instead of binding to showMenuListener which just calls showMenu, bind to showMenu directly).

function ManMenu(thisOverUl, thisDivList) {
this.overUl = thisOverUl;
this.divList = thisDivList;
this.hideAll();
$("#" + this.overUl + " li a").bind("mouseover", this, this.showMenuListener);
}
ManMenu.prototype = {
hideAll: function () {
$("#" + this.divList + " div").addClass('menuHide');
},
showMenu: function (element) {
this.hideAll();
var elementLink = element.href;
var matchingDiv = elementLink.substring(elementLink.indexOf('#'));
$(matchingDiv).removeClass('menuHide');
$(matchingDiv).addClass('menuShow');
},
showMenuListener: function (event) {
event.data.showMenu(this);
}
};
$(document).ready(function () {
var Women = new ManMenu("womanhumanbody", "womanlist");
var Man = new ManMenu("humanbody", "manlist");
});
 

Featured Threads

Hot Threads This Week

Hot Threads This Month