[RESOLVED] "Object Required" Error in IE

Hey all,

I’m having some trouble with a script that hacks rollover functionality into IE and also swaps text and images into and out of the layout when you roll the mouse over certain list items. You can view a [URL=”http://a.parsons.edu/%7Ejrandolph/test/corevalues.php”]working version in Firefox or Safari[/URL] but note that it will give an error message in IE.

The error is “Object Required” on line 40 in the JS code, and I’m not sure why because it is already an object. I’m using IE conditional comments to serve up different JS and HTML to IE than to other browsers, and I don’t know if this might be affecting that.

Links to files you can work with:
[URL=”http://a.parsons.edu/%7Ejrandolph/test/corevalues.php”]HTML[/URL]
[URL=”http://a.parsons.edu/%7Ejrandolph/test/initIE.js”]JavaScript[/URL]

And the code here for you to see:

Javascript –

[code=php]
// JavaScript to start all the functions – IE does not like to have more than one function call on body load

function startAllFunctions() {
startArrows();
startList();
}

// JavaScript for Dropdowns – IE hack
// Based on “Suckerfish Dropdowns” code from alistapart.com

function startList() {
if (document.all && document.getElementById) {
navRoot = document.getElementById(“navlist”);
for (i = 0; i < navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName == “LI”) {
node.onmouseover = function() {
this.className += ” over”;
}
node.onmouseout = function() {
this.className = this.className.replace(” over”, “”);
}
}
}
}
}

// JavaScript for rollover bubbles in main content area – IE hack to make arrows move
// Based on “Suckerfish Dropdowns” code from alistapart.com

function startArrows() {
if (document.all && document.getElementById) {
navRoot = document.getElementById(“scrollPoints_links”);
for (i = 0; i < navRoot.childNodes.length; i++) { // ERROR ON THIS LINE
node = navRoot.childNodes[i];
if (node.nodeName == “LI”) {
if (node.id == “li1″) {
node.onmouseover = function() {
this.className += ” over”;
hideSpans(‘blurb1’);
swapImage(‘picArea’, ‘images/corevalues_focus.jpg’);
}
} else if (node.id == “li2″) {
node.onmouseover = function() {
this.className += ” over”;
hideSpans(‘blurb2’);
swapImage(‘picArea’, ‘images/corevalues_teamwork.jpg’)
}
} else if (node.id == “li3″) {
node.onmouseover = function() {
this.className += ” over”;
hideSpans(‘blurb3’);
swapImage(‘picArea’, ‘images/corevalues_commitment.jpg’)
}
}

node.onmouseout = function() {
this.className = this.className.replace(” over”, “”);
}
}
}

// liRoot = document.getElementById(“liRoot”);
// for (i = 0; i < liRoot.childNodes.length; i++) {
// node = liRoot.childNodes[i];
//
// }
}

}

// JavaScript to show and hide spans in the light blue boxes
// Based on “Let Them Eat Cake” code from alistapart.com

function hideSpans(exempt) {
if (!document.getElementsByTagName) {
return null;
}
if (!exempt) exempt = “”;
var spans = document.getElementsByTagName(“span”);
for (var i = 0; i < spans.length; i++) {
var span = spans[i];
var id = span.id;
if (id != exempt) {
span.className = “hidden”;
}
else {
span.className = “shown”;
}

}
}

// JavaScript to switch the side picture onmouseover

function swapImage(image, UrlFrom) {
if (typeof UrlFrom == “object” || UrlFrom == “[object]”) {
document.getElementById(image).src = UrlFrom.src;
}
else {
document.getElementById(image).src = UrlFrom;
}
}
[/code]

HTML –

[code=html]
<div id=”wrapper”>
<div id=”content”>
<p>Since its foundation, Merlco has been governed by its core values. They shape the culture and define the character of our company. They guide how we behave and make decisions.</p>

<!–[if IE]>
<ul id=”scrollPoints_links”>
<li id=”li1″>Focus</li>
<li id=”li2″>Teamwork</li>
<li id=”li3″>Commitment</li>
</ul>

<p id=”scrollPoints_text”>
<span id=”blurb1″><b>Focus</b>: In order to overcome the challenges with doing business in China; Merlco feels it is vital to understand the big picture and also the precise details of what the client wants.</span>
<span id=”blurb2″><b>Teamwork</b>: Merlco strives to be an extension of our clients and their needs. Proper communication and honesty are significant traits that are needed to accomplish these tasks.</span>
<span id=”blurb3″><b>Commitment</b>: Merlco is devoted to quality and continuously improving our services to achieve the highest standard for our clients. We are driven to exceed our clients’ expectations.</span>
</p>

</div>
</div>
<div id=”picture”>
<img id=”picArea” src=”images/corevalues_focus.jpg” title=”Core Values” alt=”Core Values” />
</div>
<![endif]–>

<![if !IE]>
<ul id=”scrollPoints_links”>
<li onMouseOver=”hideSpans(‘blurb1’); swapImage(‘picArea’, ‘images/corevalues_focus.jpg’);”>Focus</li>
<li onMouseOver=”hideSpans(‘blurb2’); swapImage(‘picArea’, ‘images/corevalues_teamwork.jpg’);”>Teamwork</li>
<li onMouseOver=”hideSpans(‘blurb3’); swapImage(‘picArea’, ‘images/corevalues_commitment.jpg’);”>Commitment</li>
</ul>

<p id=”scrollPoints_text”>
<span id=”blurb1″><b>Focus</b>: In order to overcome the challenges with doing business in China; Merlco feels it is vital to understand the big picture and also the precise details of what the client wants.</span>
<span id=”blurb2″><b>Teamwork</b>: Merlco strives to be an extension of our clients and their needs. Proper communication and honesty are significant traits that are needed to accomplish these tasks.</span>
<span id=”blurb3″><b>Commitment</b>: Merlco is devoted to quality and continuously improving our services to achieve the highest standard for our clients. We are driven to exceed our clients’ expectations.</span>
</p>
</div>
</div>

<div id=”picture”>
<img id=”picArea” src=”images/corevalues_focus.jpg” title=”Core Values” alt=”Core Values” />
</div>
<![endif]
[/code]

And I’ve attached a zip with files you can download and work with.

Thanks for any help you can provide!

[upl-file uuid=b11b42ee-b84b-4a8a-9e6e-8728df3bb8eb size=58kB]JSTest.zip[/upl-file]

Also in #JavaScript _↴