homepage Welcome to WebmasterWorld Guest from 23.23.8.131
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
calling an instance of an object in javascript
Sarah Atkinson

10+ Year Member



 
Msg#: 4018257 posted 3:56 pm on Nov 3, 2009 (gmt 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");
});

 

Sarah Atkinson

10+ Year Member



 
Msg#: 4018257 posted 4:43 pm on Nov 3, 2009 (gmt 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();
});

Fotiman

WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4018257 posted 4:55 pm on Nov 3, 2009 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved