Ye Olde IE Oject Required Error [Archive]

View Full Version : Ye Olde IE Oject Required Error

jonathansf

10-06-2006, 10:41 PM

I'm getting the IE object required error on this line in the following script:

var toggleit = x.nextSibling.nextSibling.id;

The script works as expected in Firefox, Safari, and Opera.

Thanks,
JP

<script language="javascript" type="text/javascript">

function prepareLinks() {

if(!document.getElementById) return false;
if(!document.getElementsByTagName) return false;
var wrapper = document.getElementById("wrapper");
var collapse_a = wrapper.getElementsByTagName("a");

for (var i=0; i<collapse_a.length; i++) {
if(collapse_a[i].className == "collapse") {

var x = collapse_a[i];
var toggleit = x.nextSibling.nextSibling.id;

var dyn_var = toggleit + i;
var dyn_var = document.getElementById(toggleit);
dyn_var.style.display = "block";

collapse_a[i].onclick = function() {

var getcurrent = this.nextSibling.nextSibling.id;
var current_ul = document.getElementById(getcurrent);

if ( current_ul.style.display == "block" ) {
current_ul.style.display = "none";
} else if ( current_ul.style.display == "none" ) {
current_ul.style.display = "block";
}

return false;

}
}
}
}

window.onload = function() {
prepareLinks();
}

</script>

_Aerospace_Eng_

10-06-2006, 10:43 PM

We need to see your html has well. I have a feeling IE might be reading the whitespace causing your problem.

jonathansf

10-06-2006, 11:08 PM

Here is HTML and CSS. URLs have been removed. Thanks for any help.

<!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>
<title></title>

<style type="text/css">

ul { padding:0; margin:0; }
div#wrapper { width:400px; font-size:11px;}
ul#menu { width:400px; font-size:11px; float:left; list-style:none; color:#666; margin:0; padding:0; margin-bottom:20px; }
ul#menu li { float:left; padding:2px; }
p.headlink { font-size:12px; font-weight:bold; background:#f2f5fb url() 330px no-repeat; color:#000; padding:5px; }
li.header { list-style:none; }
a.collapse { text-decoration:none; }
ul.container { clear:left; margin-top:10px; padding:0; margin:0; }
ul.subgroup { list-style:none; margin-top:0; margin-left:15px; padding-left:15px; }
ul.subgroup li { padding-bottom:2px; }
span.subhead { padding-bottom:3px; font-weight:bold; }
ul.subgroup li ul li { list-style:none; padding-left:10px; margin-left:10px; }
ul.subgroup li ul li ul li { list-style-image: url(); }
ul.subgroup li ul li ul li ul li { list-style-image: url(); }
li.backtotop {text-align:right; margin: 10px 0 10px 0; list-style:none; }

</style>

<script language="javascript" type="text/javascript">

function prepareLinks() {

if(!document.getElementById) return false;
if(!document.getElementsByTagName) return false;
var wrapper = document.getElementById("wrapper");
var collapse_a = wrapper.getElementsByTagName("a");

for (var i=0; i<collapse_a.length; i++) {
if(collapse_a[i].className == "collapse") {

var x = collapse_a[i];
var toggleit = x.nextSibling.nextSibling.id;

var dyn_var = toggleit + i;
var dyn_var = document.getElementById(toggleit);
dyn_var.style.display = "block";

collapse_a[i].onclick = function() {

var getcurrent = this.nextSibling.nextSibling.id;
var current_ul = document.getElementById(getcurrent);

if ( current_ul.style.display == "block" ) {
current_ul.style.display = "none";
} else if ( current_ul.style.display == "none" ) {
current_ul.style.display = "block";
}

return false;

}
}
}
}

window.onload = function() {
prepareLinks();
}

</script>

<base target="_top">
</head>

<body>

<div id="wrapper">
<ul class="container" id="aa_container">
<li class="header" id="A" name="A"><a href="#" class="collapse" id="aa"><p class="headlink">Click Here to Collapse Menu</p></a>
<ul class="subgroup" id="aa_toggle">
<li><span class="subhead">Link</span>
<ul>
<li><a href="">Sub-link</a></li>
<li><a href="">Sub-link</a></li>
<li><a href="">Sub-link</a></li>
</ul>
</li>
<li><span class="subhead"><a href="">Link</a></span></li>
<li><span class="subhead"><a title="" href="">Link</a></span></li>
<li><span class="subhead"><a title="" href="">Link</a> <span></span></span></li>
</ul>
</li>
</ul>

</div>

</body>
</html>

_Aerospace_Eng_

10-07-2006, 12:13 AM

Try this
<!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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
ul {
margin:0;
padding:0;
}

div#wrapper {
width:400px;
font-size:11px;
}

ul#menu {
width:400px;
font-size:11px;
float:left;
list-style:none;
color:#666;
margin:0 0 20px;
padding:0;
}

ul#menu li {
float:left;
padding:2px;
}

li.header {
list-style:none;
}

a.collapse {
text-decoration:none;
}

ul.container {
clear:left;
margin:0;
padding:0;
}

ul.subgroup {
list-style:none;
margin-top:0;
margin-left:15px;
padding-left:15px;
}

ul.subgroup li {
padding-bottom:2px;
}

a.subhead,span.subhead {
padding-bottom:3px;
font-weight:700;
display:block;
}

ul.subgroup li ul li {
list-style:none;
padding-left:10px;
margin-left:10px;
}

li.backtotop {
text-align:right;
list-style:none;
margin:10px 0;
}

li.header a.collapse {
font-size:12px;
font-weight:700;
background:#f2f5fb url() 330px no-repeat;
color:#000;
display:block;
padding:5px;
}

ul.subgroup li ul li ul li,ul.subgroup li ul li ul li ul li {
list-style-image:url();
}
</style>

<script language="javascript" type="text/javascript">
function prepareLinks()
{
if(!document.getElementById) return false;
if(!document.getElementsByTagName) return false;
var wrapper = document.getElementById("wrapper");
var collapse_a = wrapper.getElementsByTagName("a");

for (var i=0; i<collapse_a.length; i++)
{
if(collapse_a[i].className == "collapse")
{
var x = collapse_a[i];
var toggleit = x.nextSibling.nextSibling.id;

var dyn_var = toggleit + i;
var dyn_var = document.getElementById(toggleit);
dyn_var.style.display = "block";

collapse_a[i].onclick = function()
{
var getcurrent = this.nextSibling.nextSibling.id;
var current_ul = document.getElementById(getcurrent);

current_ul.style.display = (current_ul.style.display == "block") ? "none" : "block";

return false;
}
}
}
}
window.onload = function()
{
prepareLinks();
}
</script>

<base target="_top" />
</head>

<body>
<div id="wrapper">
<ul class="container" id="aa_container">
<li class="header" id="a" name="a"><a href="#" class="collapse" id="aa">Click Here to Collapse Menu</a>
<ul class="subgroup" id="aa_toggle">
<li><span class="subhead">Link</span>
<ul>
<li><a href="">Sub-link</a></li>
<li><a href="">Sub-link</a></li>
<li><a href="">Sub-link</a></li>
</ul>
</li>
<li><a href="">Link</a></li>
<li><a title="" href="">Link</a></li>
<li><a title="" href="">Link</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Main issue was that paragraph in your anchor tag. You can't do that. A paragraph is a block level element. Block level elements can't go inside of inline elements like an anchor. The above is a little more sufficient and easier to read and it works.

jonathansf

10-07-2006, 12:47 AM

Awesome. Thanks!