homepage Welcome to WebmasterWorld Guest from 54.161.236.229
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Visit PubCon.com
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




msg:4018259
 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




msg:4018298
 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




msg:4018309
 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