Log in

View Full Version : Script Error "domNode is Null"


Diversions
02-24-2011, 02:08 PM
This JavaScript Code is part of the liveMenu programme from SourceForge.
I have the scripts in a separate folder and calling them to the web page (currently sitting in an unpublished Wamp site.

I am not terribly familiar with script language and have been trying to sort this out for a couple of days with no luck.

I am getting a JavaScript error message as follows: This domNode is NULL Line 99. The red line in the script snippet below is Line 99


liveMenu.Menu.prototype = {
/* Gets initial submenu DOM nodes */
getInitSubNodes: function () {
var X = liveMenu.Utils, cfg = this.config,
ulNodes = this.domNode.getElementsByTagName('ul'),
initSubNodes = [];
for (var i=0, l=ulNodes.length; i<l; i++)
if (X.hasClass(ulNodes[i], cfg.submenuClassName))
initSubNodes.push(ulNodes[i]);
return initSubNodes;
},

Is there someone here who could take the time and tell me what is wrong with this code? and, if it is not corrected, what problems will this cause?

many thanks
D
vwphillips
02-26-2011, 11:06 AM
this.domNode is defined when the script is initilised

the error is indicating that it has not been defined correctly

Have you passed the correct ID name to the script on initilisation?
Diversions
02-26-2011, 02:23 PM
this.domNode is defined when the script is initilised

the error is indicating that it has not been defined correctly

Have you passed the correct ID name to the script on initilisation?

It appears that I have not. I had thought that I had copied the files into the site without alteration with the exception of the css files for content. However reviewing the docs I am still coming up blank.

This is what is in the <head></head> tags that relates to the liveMenu files. (the actual jscripts are sitting in the following format: JSCRIPT/liveMenu.js)


<script type="text/javascript" src="JSCRIPT/liveMenu.js"></script>
<script type="text/javascript">
liveMenu.initOnLoad('JSCRIPT/liveMenu.js');
</script>
<script type="text/javascript">
liveMenu.initOnLoad('liveMenu1', { effect: 'slide', showOn: 'click',
mode: 'consecutive', duration: 300,
beforeShow: function () {
this.opener.className = 'lm-selected-item';
},
beforeHide: function () {
this.opener.className = '';
}
});
liveMenu.initOnLoad('liveMenu2', {
beforeShow: function () {
this.opener.className = 'lm-selected-item';
},
beforeHide: function () {
this.opener.className = '';
}
});
</script>

Since the actual vertical menu is called from the CSS and I cannot see anything in the CSS that has any reference to the javascript.

Is there somewhere else that I should be looking or am I totally lost here?

I appreciate your guidance on this vwphillips

D
vwphillips
02-26-2011, 04:03 PM
post a link to your page
Diversions
02-26-2011, 04:41 PM
This is on an internal server, so what I have done is uploaded the images, JSCRIPT, and style folders as well as the index.php and Vertical_menu.php files into the following url

http://www.mhacorp.com/LiveMenuTest/

And now it seems to get worse. On the hard drive server, the vertical menu slides out properly. now online, it does not!
vwphillips
02-27-2011, 11:32 AM
JSCRIPT/liveMenu.js is a HTML file I would expected javascript file
Diversions
02-27-2011, 12:14 PM
Now really confused. Both the liveMenu.js and the liveMenu.min.js are extended properly and sitting in the JSCRIPT folder. The content of both files looks like javascript to me

liveMenu.js "snippet"
/**
* LiveMenu, version 1.1
*
* Copyright (c) 2009-2010 Sergey Golubev
*
* LiveMenu is freely distributable under the terms of the MIT License.
* For details, see http://livemenu.sourceforge.net
*/
var liveMenu = {};
liveMenu.defaultConfig = {
/* Css class name of 'ul' elements, which are considered to be main menus */
mainMenuClassName: 'lm-menu',
/* Css class name of 'ul' elements, which are considered to be submenus */
submenuClassName: 'lm-submenu',
/* Css class name of a submenu container */
containerClassName: 'lm-container',
/* Css class names of horizontal and vertical submenus */
horizontalClassName: 'lm-horizontal', verticalClassName: 'lm-vertical',
/* Css class names, which determine position of a submenu */
right: 'lm-right', left: 'lm-left', up: 'lm-up', down: 'lm-down',
/* A delay in showing the submenus (in milliseconds)*/
showDelay: 80,
/* A delay in hiding a submenu (in milliseconds) */
hideDelay: 500,
/**
* An event type at which a submenu should be shown.
* Can be 'mouseenter' or 'click'
*/
showOn: 'mouseenter',
/**
* An effect that is used when showing or hiding a submenu.
* Can be 'plain', 'slide', 'fade' or smooth
*/
effect: 'plain',
/**
* Defines the way the submenus are being hidden: simultaneously or
* consecutively. Can be simultaneous or consecutive.
*/
mode: 'simultaneous', /**
* The following configuration options make sense only if the 'effect'
* option is not set to 'plain'
*/
/* The duration of showing or closing the submenus (in milliseconds) */
duration: 400,
/**
* The maximum number of simultaneously hiding sibling submenus. Makes
* sense only if the 'consecutive' mode is used, but regardless the mode,
* '0' value make the submenus hide without effects.
*/
maxHidingSubmenus: 3,
/* A transition algorithm. Can be 'linear' or 'sinoidal'. */
transition: 'sinoidal'
}
liveMenu.isReady = false; //True if the DOM is loaded
liveMenu.subsCount = 0; //Used for submenu IDs generation
liveMenu.isKonqueror = navigator.userAgent.indexOf('Konqueror') != -1;
/* Initializes the menus after the DOM is loaded */
liveMenu.initOnLoad = function (menuId, config) {
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", function() {
liveMenu.isReady = true;
new liveMenu.Menu(menuId, config);
}, false);
} else if (document.attachEvent) {
document.attachEvent("onreadystatechange", function() {
if (document.readyState === "complete") {
liveMenu.isReady = true;
new liveMenu.Menu(menuId, config);
}
});
}
liveMenu.event.add(window, "load", function () {
if (!liveMenu.isReady) new liveMenu.Menu(menuId, config);
});
}
/* The main menu constructor */
liveMenu.Menu = function (menuId, config) {
var X = liveMenu.Utils;
this.config = X.merge(liveMenu.defaultConfig, config);
if (this.config.showOn == 'click')
this.config.showDelay = 0;
if (this.config.effect == 'plain' || this.config.maxHidingSubmenus == 0)
this.config.mode = 'consecutive';
this.id = menuId;
this.domNode = document.getElementById(menuId);
this.orientation = this.getOrientation();
this.submenus = {};
this.visibleSubs = [];
this.stopHidingOn = null;
var initSubNodes = this.getInitSubNodes();
this.setSubIDs(initSubNodes);
var convertedSubNodes = this.convertMenuTree(initSubNodes);
this.initializeSubs(convertedSubNodes);
}
liveMenu.Menu.prototype = {
/* Gets initial submenu DOM nodes */
getInitSubNodes: function () {
var X = liveMenu.Utils, cfg = this.config,
ulNodes = this.domNode.getElementsByTagName('ul'),
initSubNodes = [];
for (var i=0, l=ulNodes.length; i<l; i++)
if (X.hasClass(ulNodes[i], cfg.submenuClassName))
initSubNodes.push(ulNodes[i]);
return initSubNodes;
},
/* Generates and sets submenu IDs */
setSubIDs: function (initSubNodes) {
for (var i=0, l=initSubNodes.length; i<l; i++) {
var initSub = initSubNodes[i];
initSub.id = 'submenu'+(++liveMenu.subsCount);
initSub.parentNode.id =
'submenu'+liveMenu.subsCount+'_opener';
}
},...

Or are you saying I am not calling it properly?
Diversions
02-28-2011, 10:23 PM
I am working through the problem as outlined above and still require some help.

1. I have changed the test site over to the domain where the site will ultimately reside to minimize compatibility errors. http://www.natural-health-labs.com/LiveMenuTest/

2. I have changed the format of the javascript initialization and I am now NOT getting any NULL errors.

3. Where I am having problem is the javascript for the actionable menu. The following code is the existing code that I set in a separate Menu_head.js file in the JSCRIPT file but when uploaded, the menus at the left do not slide out. Since I am only using the vertical menu (or liveMenu2) this is the code (one of a number of variables) I have tried.


liveMenu.initOnLoad('liveMenu2', {('myMenu', { effect: 'slide' });
beforeShow: function () {
this.opener.className = 'lm-selected-item';
},
beforeHide: function () {
this.opener.className = '';
}
});


I am getting the following error message
Error: invalid property id
Source File: http://www.natural-health-labs.com/LiveMenuTest/JSCRIPT/Menu_head.js
Line: 1, Column: 35
Source Code:
liveMenu.initOnLoad('liveMenu2', {('liveMenu', { effect: 'slide' });

Clearly, I am doing something wrong and if someone has any thoughts I would be most appreciative. (I am, by the way, working on Firefox but it does not work in IE either)

D
Diversions
03-03-2011, 12:23 AM
Thank you vwphillips for all of your assistance on this.

After having worked through the liveMenu JSCRIPT files, I have found the problem, corrected it, and all aspects of the menu are now working effectively and as designed.

NOTE to those having similar issues. Slow down and take a look at your file names. javascript is unforgiving when it comes to upper and lowercase letters. I had an extension that I erroneously placed a capital letter and that is what resulted in the error.

Thank you again for your help.