Welcome to WebmasterWorld Guest from 54.144.80.75

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)

Preferred Member

10+ Year Member

joined:Apr 29, 2003
posts:424
votes: 0


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)

Preferred Member

10+ Year Member

joined:Apr 29, 2003
posts:424
votes: 0


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)

Senior Member from US 

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

joined:Oct 17, 2005
posts:4966
votes: 10


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");
});
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members