I know the title sounds easy but I am looking for an example that extracts the dynamic menu from a javascript file and displays it in a html webpage. The catch to it is that the javascript file that contains the dynamic menu has the style in which to display the menu and I don’t want the style. I want the manu items so I can use my own css with it.
I am a beginner in javascript. So bear with me while I try to paint you a picture.
I have a .js file which contains the dynamic menu (mmLoadmenus()) with a style built into the document.write() function.
I use mmLoadMenus(); to call the function from the loaded javascript. It loads with the styles in place. I cannot overwrite the styles with my css. How can I load the menu and use my own css.
I have tried jquery functions and there does not seems to be anything that would strip the .js of the styles. And re-write the .js menu file is not an option as its being called by various parties.
Does anyone have a solution for this or encountered this issue and has a solution for it?
I have attached the code to question now…
.js file code:
function mmLoadMenus() {
menu1 = new Array();
menu1Links = new Array();
menu2 = new Array();
menu2Links = new Array();
AddItem(menu1, menu1Links, "Google", "http://www.google.com/");
AddItem(menu1, menu1Links, "Yahoo", "http://www.yahoo.com/");
AddItem(menu2, menu2Links, "Google 2", "http://www.google.com/");
AddItem(menu2, menu2Links, "Yahoo 2", "http://www.yahoo.com/");
document.write("<table width='1003' height='33' border='0' cellspacing='0' cellpadding='0'><tr valign='top'><td width='174'> </td><td width='20'> </td><td bgcolor='#FFFFFF' width='809'>");
document.write("<table width='100%' border='0' cellspacing='0' cellpadding='0'><tr><td height='20' class='Menulist' width='100%'><table height='19' border='0' cellspacing='0' cellpadding='0' width='100%'><tr>");
document.write("<td class='Bulletlist1'> </td><td width='124' height='19' onMouseOver='showMenu(1);' onMouseOut='hideMenu(1);'><a href='#'><div class='Menu' id='Menu1'>Menu list 1</div></a>");
writeMenu(1, menu1, menu1Links);
document.write("</td><td class='Bulletlist2'> </td><td width='124' height='19' onMouseOver='showMenu(2);' onMouseOut='hideMenu(2);'><a href='#'><div class='Menu' id='Menu2'>Menu list 2</div></a>");
writeMenu(2, menu2, menu2Links);
document.write("</td><td width='141' height='19'> </td></tr><tr><td height='1' bgcolor='#999999' colspan='11'></td></tr></table></td></tr></table></td></tr></table>");
}
function AddItem(myMenu, myMenuLinks, myTitle, myLink) {
myMenu.push(myTitle);
myMenuLinks.push(myLink);
}
function writeMenu(myMenuID, myMenu, myMenuLinks) {
myMenuColor = new Array("", "#79155a", "#cc333d", "#e57e00", "#98b000", "#00b5a9");
document.write("<div id='menuLayer"+ myMenuID +"' style='position:absolute;z-index:1;top:28px;visibility:hidden;'>");
document.write("<TABLE cellspacing=0 cellpadding=4 style='border-top: 1px solid #777777; border-left: 1px solid #777777; background-color: #F2F2F2; FONT-FAMILY: Verdana; FONT-SIZE: 9px; width: 193px; cursor: hand;'>");
for (i=0; i<myMenu.length; i++) {
document.write("<TR><TD style='border-bottom: 1px solid #777777; border-right: 1px solid #777777; COLOR: "+myMenuColor[myMenuID]+";' onclick='document.location=\""+ myMenuLinks[i] + "\"' onmouseover='this.style.color=\"#f2f2f2\"; this.bgColor=\""+myMenuColor[myMenuID]+"\"' onmouseout='this.style.color=\""+myMenuColor[myMenuID]+"\"; this.bgColor=\"#f2f2f2\"'><B> "+ myMenu[i] +"</B></TD></TR>");
}
document.write("</TABLE></div>");
}
function showMenu(myMenuID) {
document.getElementById("menuLayer" + myMenuID).style.visibility = "visible";
}
function hideMenu(myMenuID) {
document.getElementById("menuLayer" + myMenuID).style.visibility = "hidden";
}
.html code
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Dummy Index page</title>
<script language="text/javascript" src="resources/jquery-1.4.4.min.js"></script>
<script language="JavaScript1.2" src="resources/TopNav3.js"></script>
</head>
<body>
<div>
<script language="JavaScript1.2">mmLoadMenus();</script>
</div>
</body>
</html>
There is actually a jquery function to easily do just what you want.
More info on this and related jquery functions to add and remove classes can be found here: http://api.jquery.com/toggleClass/