View Full Version : Three different outputs to a Menu Builder

Lord Kalthorn
12-22-2005, 07:11 AM
I'm not sure whether it would be easier to link the page or post the code... so I'll do both. The page is here (http://dotomega.com/forums/modcp/omega_alpha_forums.htm). The code is:

<?xml version='1.0' encoding='UTF-8'?><!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN' 'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'><html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>

<head><base href='http://forums.dotomega.com/' /><meta name='generator' content='.Omega 2006' /><meta name='copyright' content='http://copyright.dotomega.com' /><meta http-equiv='Content-Type' content='application/xhtml+xml; charset = utf-8' /><link href='themes/omega06/blue/default.css' media='screen' rel='stylesheet' /><link href='themes/modcp/blue/default.css' media='screen' rel='stylesheet' /><title>.Omega Beta Forums - .Omega Moderation Control Panel</title></head>

<body onload='omegaVMenu.build("1", "lnc", "h4");'>
<script type='text/javascript'>
var stuckPageId = '1';var siteBaseUrl = 'http://forums.dotomega.com/';var pageArray = new Array();pageArray[0] = 'blank';pageArray[1] = 'Homepage';pageArray[2] = 'Add a Forum';pageArray[3] = 'Delete a Forum';pageArray[4] = 'Usergroups';pageArray[5] = 'IP Ban';pageArray[6] = 'User Titles';
var menuOutputString = '';
var menuStart = '<div id=\'omegaGroupClass+10omegaId\' class=\'omegaGroupClass\'>';
var menuMainTab = '<div id=\'omegaClass+10omegaId\' class=\'omegaMainClass\' onclick=\'omegaModCP.openMenu("omegaId");\' onmouseover=\'omega.hover("10omegaId");\' onmouseout=\'omega.hover("10omegaId");\'><span class=\'h4\'>omegaTitle</span></div>';
var menuSubTab = '<div id=\'omegaClass+omegaId\' class=\'omegaClass\' onclick=\'omegaRequestuest.init("omegaId", "pb", null, 2, "omegaToDo", "omegaUrl", false);\'onmouseover=\'omega.hover("omegaId", "omegaClass");\' onmouseout=\'omega.hover("omegaId", "omegaClass");\'><span>omegaTitle</span></div>';
var menuGroupClass = 'lst';var menuUrlToPull = 'modcp/index.php';var menuTabClass = 'lt';var menuClass = 'lmt';var menuDivId = 'lnm';
<script type='text/javascript' src='jscript/omegaGlobal.js'></script><script type='text/javascript' src='jscript/omegaModCP.js'></script><script type='text/javascript' src='jscript/omegaVMenu.js'></script><script type='text/javascript' src='jscript/omegaWindow.js'></script>

<div class='ln'><div class='lnh'><img alt='.Omega Header Image' src='themes/modcp/blue/misc/headerLogo.gif' style='height:75px;width:92px;' title='.Omega Header Image' /></div><div id='lnm'></div></div>
<div id='mc'><div id='mh'><span>Welcome to the .Omega 2006 Moderator Control Panel</span></div><div class='s'></div><div id='st'><span>Initiating...</span></div><div class='s'></div><div id='pb'></div></div>
<div id='mcr'></div><div id='lnc' style='display:none;'>Blank,1,yes:Forum Manager,2,yes:Blank,2,no:Users,3,yes:Blank,3,no</div><div id='lnc+1' style='display:none;'>ModCP,1,GET:Forum Home Page,1001,GET:Log Out,1002,GET</div><div id='lnc+2' style='display:none;'>Add Forum,2,GET:Delete Forum,3,GET</div><div id='lnc+3' style='display:none;'>Usergroups,4,GET:IP Ban,5,GET:User Titles,6,GET</div>


var omegaVMenu = {
build : function(stringId, menuId, boldClass) {
var menuString = document.getElementById(menuId).innerHTML;
var menuDiv = document.getElementById(menuDivId);
var regExp = /:/;
var stringArray = menuString.split(regExp);
menuDiv.innerHTML = '';

for (i in stringArray) {
var regExp = /,/;
var finalArray = stringArray[i].split(regExp);
var menuItemTitle = finalArray[0];
var menuItemId = finalArray[1];
var menuOpen = finalArray[2];

if (menuItemTitle == 'Blank') {
menuDiv.innerHTML += '<div id=\'' + menuGroupClass + '+' + menuItemId + '\'></div>';
var toEdit = document.getElementById(menuGroupClass + '+' + menuItemId);

if (menuOpen == 'no') {
omegaVMenu.buildSub(menuItemId, menuId, toEdit);
} else {
menuDiv.innerHTML += '<div id=\'' + menuTabClass + '+10' + menuItemId + '\'></div>';
var toEdit = document.getElementById(menuTabClass + '+10' + menuItemId);
toEdit.setAttribute('onclick','omegaVMenu.openMenu("' + menuItemId + '");');
toEdit.setAttribute('onmouseover','omega.hover("' + menuItemId + '", "' + menuTabClass + '", "' + menuClass + '", "+10");');
toEdit.setAttribute('onmouseout','omega.hover("' + menuItemId + '", "' + menuTabClass + '", "' + menuClass + '", "+10");');
toEdit.innerHTML = '<span class=\'' + boldClass + '\'>' + menuItemTitle + '</span>'

buildSub : function(stringId, menuId, toEdit) {
var subMenuString = document.getElementById(menuId + '+' + stringId).innerHTML;
var regExp = /:/;
var subStringArray = subMenuString.split(regExp);

for (i in subStringArray) {
var regExp = /,/;
var subFinalArray = subStringArray[i].split(regExp);
var subMenuItemTitle = subFinalArray[0];
var subMenuItemId = subFinalArray[1];
var subMenuClickDo = subFinalArray[2];

toEdit.innerHTML += '<div id=\'' + menuTabClass + '+' + subMenuItemId + '\'></div>';
var subEdit = document.getElementById(menuTabClass + '+' + subMenuItemId);
subEdit.className = menuTabClass;
subEdit.setAttribute('onclick','omegaRequest.init("' + subMenuItemId + '", "pb", null, 2, "' + subMenuClickDo + '", "' + menuUrlToPull + '", false);');
subEdit.setAttribute('onmouseover','omega.hover("' + subMenuItemId + '", "' + menuTabClass + '", "' + menuTabClass + '", "+");');
subEdit.setAttribute('onmouseout','omega.hover("' + subMenuItemId + '", "' + menuTabClass + '", "' + menuTabClass + '", "+");');
subEdit.innerHTML = '<span>' + subMenuItemTitle + '</span>'

openMenu : function(elementId) {
if (document.getElementById(menuGroupClass + '+' + elementId)) {
var toOpen = document.getElementById(menuGroupClass + '+' + elementId);
var toToggle = document.getElementById(menuTabClass + '+10' + elementId);

if (toOpen.style.display == 'none') {
toOpen.style.display = '';
toToggle.className = menuClass + 't';
} else {
toOpen.style.display = 'none';
toToggle.className = menuClass + 'h';

toggle : function() {
if (document.getElementById('lt+' + stuckPageId)) {
var toHover = document.getElementById('lt+' + stuckPageId);

toHover.className = 'ltt';

Now this page was working fine a week or so ago; the requests were working perfectly and everything (my question is not about the requests, although I did clean that up too so it probably doesn't work anymore either). Basically I am writing a Mod Control Panel Template (the PHP is being done by another group of people) which has no refreshes (it is a theme for the Forum Software), and I decided for the first time to throw some of the HTML into the PHP, it worked perfectly (there were some returning glitches, but they were fine to fix) but the guy in charge of the PHP said the HTML was two disorganised (the menu was hard coded) and in its long string form to save space in the file the code was dreadful to fiddle with so he could add menu items. I decided we needed a self building menu that the PHP could just give a string, and the Menu would be built from that string. I had done this before, but it was only for one tier. The Menu as you can see on the page itself is two tiered, with toggling menus. I am not sure whether that is the problem or something else (it needs to be two tiered).

Eitherway, I get three different outputs in the three browsers I test in (Internet Explorer, Opera, and Firefox). In Internet Explorer the page is rendered the most off original design; the menus first off don't actually hide themselves, meaning that the 'if (menuOpen == 'no') {toEdit.setAttribute('style','display:none;');}' is not working which partially insinuates perhaps the code isn't picking up the last piece of the split string, but in Opera, the menus are all displayed and hidden as they should be, as well as in Firefox. In Internet Explorer, all of the Tabs hover, except the bottom one. Even when I add another subTab called End which returns the function before doing any editting the last subTab does not hover, even though the hovering code is obviously there when you copy and paste the page contents. The funny thing being; in Opera, only the bottom subTab hovers! In Firefox, they all Hover. Indeed, in Firefox, they all Hover, they all Toggle, they all do basically what they're meant to. In Opera, you cannot Toggle a subMenu. In the page I have linked, I toggled the bottom menu so that it is possible to see the bottom subTab hovering. But in Internet Explorer; it does Toggle just fine even though it does not properly use the command to hide the subMenus in the startup code. Of course also, in Internet Explorer, the bottom set of subTabs aren't even indented or aligned, even though the styling on the span within the subTab is obviously working.

Its an awefully long post, considering I never come here (the last time I was here, the first time, was ironically to work out why the for loop for the code to the original menu I did didn't work; but I was helped there by being told to put 'i in stringArray' into the code rather than trying to define i in an Array without that in the loop) and its probably just a really stupidly simple answer. But I hope this place can do that trick again and sort out my dreadful coding practices!

Thanks if you have read this far, Rob.

12-22-2005, 02:13 PM
overuse of setAttribute


cold be toEdit.style.display='none';


think IE expects className for this

try simple - toEdit.className='menuClass';

toEdit.setAttribute('onclick','omegaVMenu.openMenu("' + menuItemId + '");');

easiest & XBrowser
toEdit.menuItemId ='fred';
toEdit.onclick=function(){ omegaVMenu.openMenu(this.menuItemId); }

number of these wich will cause problems

not fully evaluated but above may help

Lord Kalthorn
12-22-2005, 09:07 PM
Sounded like a fantastic idea, but when I tried it it stopped toggling in all the browsers. With className = is did no different, which it looked like it should which was odd. However, style.display = 'none' worked perfectly for setting the displays in each browser, so thanks! :D

Still trying to work out why only in Opera the Toggling is not working, and why the Hovering is upsidedown in both Opera and Internet Explorer. I might put the Toggling problem into the Opera Forums actually, because that sounds like a very specific problem if it is the only browser not doing it.

12-22-2005, 09:15 PM


Lord Kalthorn
12-23-2005, 07:27 AM
I'm afraid I do not quite get what that thread about changing classes has to do with the problem?

I did however go through with asking the guys on the Opera Forums; which helped out a load with at least one problem. They pointed out perhaps it doesn't like the " (which I used because had I been writing it into the HTML, I would have had to use "" because I use '' for encasing the item in the first place). So I tried that out and it all works perfectly in Opera Toggling and hovering, which is great. So I figured maybe it was a roll on effect from there in Internet Explorer, so I put back the '.className =' and the '.onclick =' as you suggested, but they do not work to get the bottom item hovering; and the defining of '.onclick =' has just led to stopping the toggling again in Internet Explorer.

Nobody seems to have any idea about it...