Snoken99
02-08-2011, 03:26 PM
Hi,
Using the tabcontent.js javascript and the "Demo #1- Basic implementation" example I get an Javascript error with Internet Explorer 8.
I get the following error: 'document.getElementById(...)' is null or not and object
tabcontent.js, line 14 character 2
The line it complains at is:
this.tabs=document.getElementById(tabinterfaceid).getElementsByTagName("a") //Get all tab links within container
Anyone have any idea why I get this error?
The tabs are working in IE 8 and Firefox but why do i get this error?
The script i'm using and the HTML code comes from here:
http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm#
Thanks,
Goran
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
Testing
</title>
<link rel="stylesheet" type="text/css" href="../tabcontent.css">
<script type="text/javascript" src="../js/tabcontent.js">
</script>
</head>
<body bgcolor="#FFFFFF" style="margin: 20px">
<h3>
Demo #1- Basic implementation
</h3>
<ul id="countrytabs" class="shadetabs">
<li>
<a href="#" rel="country1" class="selected">Tab 1</a>
</li>
<li>
<a href="#" rel="country2">Tab 2</a>
</li>
<li>
<a href="#" rel="country3">Tab 3</a>
</li>
<li>
<a href="#" rel="country4">Tab 4</a>
</li>
<li>
<a href="http://www.dynamicdrive.com">Dynamic Drive</a>
</li>
</ul>
<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
<div id="country1" class="tabcontent">
Tab content 1 here<br>
Tab content 1 here<br>
</div>
<div id="country2" class="tabcontent">
Tab content 2 here<br>
Tab content 2 here<br>
</div>
<div id="country3" class="tabcontent">
Tab content 3 here<br>
Tab content 3 here<br>
</div>
<div id="country4" class="tabcontent">
Tab content 4 here<br>
Tab content 4 here<br>
</div>
</div><script type="text/javascript">
var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
<p>
<a href="javascript:countries.cycleit('prev')" style="margin-right: 25px; text-decoration:none">Back</a> <a href=
"javascript:%20countries.expandit(3)">Click here to select last tab</a> <a href=
"javascript:countries.cycleit('next')" style="margin-left: 25px; text-decoration:none">Forward</a>
</p>
<hr>
<script type="text/javascript">
var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2000)
</script>
</body>
</html>
Using the tabcontent.js javascript and the "Demo #1- Basic implementation" example I get an Javascript error with Internet Explorer 8.
I get the following error: 'document.getElementById(...)' is null or not and object
tabcontent.js, line 14 character 2
The line it complains at is:
this.tabs=document.getElementById(tabinterfaceid).getElementsByTagName("a") //Get all tab links within container
Anyone have any idea why I get this error?
The tabs are working in IE 8 and Firefox but why do i get this error?
The script i'm using and the HTML code comes from here:
http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm#
Thanks,
Goran
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
Testing
</title>
<link rel="stylesheet" type="text/css" href="../tabcontent.css">
<script type="text/javascript" src="../js/tabcontent.js">
</script>
</head>
<body bgcolor="#FFFFFF" style="margin: 20px">
<h3>
Demo #1- Basic implementation
</h3>
<ul id="countrytabs" class="shadetabs">
<li>
<a href="#" rel="country1" class="selected">Tab 1</a>
</li>
<li>
<a href="#" rel="country2">Tab 2</a>
</li>
<li>
<a href="#" rel="country3">Tab 3</a>
</li>
<li>
<a href="#" rel="country4">Tab 4</a>
</li>
<li>
<a href="http://www.dynamicdrive.com">Dynamic Drive</a>
</li>
</ul>
<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
<div id="country1" class="tabcontent">
Tab content 1 here<br>
Tab content 1 here<br>
</div>
<div id="country2" class="tabcontent">
Tab content 2 here<br>
Tab content 2 here<br>
</div>
<div id="country3" class="tabcontent">
Tab content 3 here<br>
Tab content 3 here<br>
</div>
<div id="country4" class="tabcontent">
Tab content 4 here<br>
Tab content 4 here<br>
</div>
</div><script type="text/javascript">
var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
<p>
<a href="javascript:countries.cycleit('prev')" style="margin-right: 25px; text-decoration:none">Back</a> <a href=
"javascript:%20countries.expandit(3)">Click here to select last tab</a> <a href=
"javascript:countries.cycleit('next')" style="margin-left: 25px; text-decoration:none">Forward</a>
</p>
<hr>
<script type="text/javascript">
var mypets=new ddtabcontent("pettabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(2000)
</script>
</body>
</html>