"Object Required" Error in IE not In FF?

SD1990 · 18-06-2009 9:26pm #1

Hi All,

Getting this error on a page of a site im doing, now its not actually affecting the functionality of the site but its irratating me anyway.

The error is only there on IE.

Every other page is coded the same where it is saying the error is and there is no error on those pages ? Quite Baffled tbh ? Any Idea how to fix this ? It says the error is on line 5. Heres the code for the first 6 lines.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL]http://www.w3.org/TR/html4/loose.dtd[/URL]">
<html>
<head>
<title>My Site Name</title>
<script type="text/javascript" src="thumbnailviewer.js"></script>
<script type="text/javascript" src="dropdown.js"></script>
<LINK REL=StyleSheet HREF="CSS/style.css" TITLE="stylesheet" TYPE="text/css">

louie · 18-06-2009 10:05pm

try moving the js files at the bottom of the page before the </body> tag.

Webmonkey · 18-06-2009 10:10pm

Firefox won't display a pop up with error, it is seen in the console.
Tools->Error Console

It could be an error in the js file. Not sure if IE goes in or not, might only break at that point.

SD1990 · 18-06-2009 10:16pm

Louie how do you mean before the </body> i have tried moving everything around didnt help. No matter what i move it still says the error is on line 5.

Its not doing any harm but its not nice seeing an error in the corner of your eye. Baffled

Webmonkey · 18-06-2009 10:17pm

Did you look to see if the Error Exists in Firefox's error console, may give more details. If it isn't there, then it is very strange

SD1990 · 18-06-2009 10:51pm

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", ""); < FF is saying that character is the error ( illegal character ) ???
}
}
}
}
}
window.onload=startList;

ocallagh · 19-06-2009 12:32am

It shouldn't be doing anything in FF because you have the document.all condition.

However, if you remove the document.all condition it will still fail because className is not a valid attribute in FF. In FF it's just called class.

lol there's more. you can't use this.class in IE. class is a reserved attribute name (why they use className)

So, you should rsort to the setter and getter methods and you'll have to do it for both versions

ie:

node.onmouseover=function() {
var newClassName = ((c=this.getAttribute("className"))==null) ? this.getAttribute("class") : c;
 
newClassName  +=" over";
this.setAttribute("className", newClassName );
this.setAttribute("class", newClassName );
}

SD1990 · 19-06-2009 12:50am

hi, thanks for reply ,

I changed the code to the code you posted and it didnt fix it.

The main one i want it gone in is IE as you cant visually see it in FF anyway.

Im Clueless Javascripter by the by

SD1990 · 19-06-2009 12:54am

startList = function() {
document.getElementById{
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
node.onmouseover=function() {
var newClassName = ((c=this.getAttribute("className"))==null) ? this.getAttribute("class") : c;
 
newClassName  +=" over";
this.setAttribute("className", newClassName );
this.setAttribute("class", newClassName );
}
   }
  }
 }
}
window.onload=startList;

Changed original code to above.

Old error gone. New error saying Line: 3 Char: 24 expected ',' ??:mad:

ocallagh · 19-06-2009 1:16am

try this

<script language="javascript" type="text/javascript">
startList = function() {
	
	if (document.getElementById) {
		navRoot = document.getElementById("nav");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
		
			if (node.nodeName=="LI") {
				node.onmouseover=function() {
					var newClassName = ((c=this.getAttribute("className"))==null) ? this.getAttribute("class") : c;
					newClassName  +=" over";
					this.setAttribute("className", newClassName );
					this.setAttribute("class", newClassName );
				}
				node.onmouseout=function() {	
					var newClassName = ((c=this.getAttribute("className"))==null) ? this.getAttribute("class") : c;
					newClassName  =newClassName.replace(" over", ""); 
					this.setAttribute("className", newClassName  );
					this.setAttribute("class", newClassName  );
				}
			}
		}
	}
}
window.onload=startList; </script>

SD1990 · 19-06-2009 10:15am

Thats just brought back up the object required error except now its saying line 6 instead of line 5.

Does it make a difference that im using external js ?

SD1990 · 19-06-2009 11:35am

Any javascript gurus out there know how to fix this ? its only something small. Need to fix it today

:(

ocallagh · 19-06-2009 12:47pm

Post the entire HTML page including external JS files

I have a feeling it's something outside of this script you are sending. Actually chuck them in a zip and attach.

The script I posted above works fine for me in IE8 and FF3. I can't see anything in it that would make it break in IE7 or IE6 either.

SD1990 · 19-06-2009 12:56pm

Nothing is broken. Everything works fine. It just says error on page in corner and its irratating me.

Heres the codes.

Thumbnailview JS

// -------------------------------------------------------------------
// Image Thumbnail Viewer Script- By Dynamic Drive, available at: [URL]http://www.dynamicdrive.com[/URL]
// Last updated: July 7th, 2008- Fixed enlarged image not showing in IE sometimes
// -------------------------------------------------------------------
var thumbnailviewer={
enableTitle: true, //Should "title" attribute of link be used as description?
enableAnimation: true, //Enable fading animation?
definefooter: '<div class="footerbar">CLOSE X</div>', //Define HTML for footer interface
defineLoading: '<img src="loading.gif" /> Loading Image...', //Define HTML for "loading" div
/////////////No need to edit beyond here/////////////////////////
scrollbarwidth: 16,
opacitystring: 'filter:progid:DXImageTransform.Microsoft.alpha(opacity=10); -moz-opacity: 0.1; opacity: 0.1',
targetlinks:[], //Array to hold links with rel="thumbnail"
createthumbBox:function(){
//write out HTML for Image Thumbnail Viewer plus loading div
document.write('<div id="thumbBox" onClick="thumbnailviewer.closeit()"><div id="thumbImage"></div>'+this.definefooter+'</div>')
document.write('<div id="thumbLoading">'+this.defineLoading+'</div>')
this.thumbBox=document.getElementById("thumbBox")
this.thumbImage=document.getElementById("thumbImage") //Reference div that holds the shown image
this.thumbLoading=document.getElementById("thumbLoading") //Reference "loading" div that will be shown while image is fetched
this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
},

centerDiv:function(divobj){ //Centers a div element on the page
var ie=document.all && !window.opera
var dom=document.getElementById
var scroll_top=(ie)? this.standardbody.scrollTop : window.pageYOffset
var scroll_left=(ie)? this.standardbody.scrollLeft : window.pageXOffset
var docwidth=(ie)? this.standardbody.clientWidth : window.innerWidth-this.scrollbarwidth
var docheight=(ie)? this.standardbody.clientHeight: window.innerHeight
var docheightcomplete=(this.standardbody.offsetHeight>this.standardbody.scrollHeight)? this.standardbody.offsetHeight : this.standardbody.scrollHeight //Full scroll height of document
var objwidth=divobj.offsetWidth //width of div element
var objheight=divobj.offsetHeight //height of div element
var topposition=(docheight>objheight)? scroll_top+docheight/2-objheight/2+"px" : scroll_top+10+"px" //Vertical position of div element: Either centered, or if element height larger than viewpoint height, 10px from top of viewpoint
divobj.style.left=docwidth/2-objwidth/2+"px" //Center div element horizontally
divobj.style.top=Math.floor(parseInt(topposition))+"px"
divobj.style.visibility="visible"
},
showthumbBox:function(){ //Show ThumbBox div
thumbnailviewer.thumbLoading.style.visibility="hidden" //Hide "loading" div
this.centerDiv(this.thumbBox)
if (this.enableAnimation){ //If fading animation enabled
this.currentopacity=0.1 //Starting opacity value
this.opacitytimer=setInterval("thumbnailviewer.opacityanimation()", 20)
}
},

loadimage:function(link){ //Load image function that gets attached to each link on the page with rel="thumbnail"
if (this.thumbBox.style.visibility=="visible") //if thumbox is visible on the page already
this.closeit() //Hide it first (not doing so causes triggers some positioning bug in Firefox
var imageHTML='<img src="'+link.getAttribute("href")+'" style="'+this.opacitystring+'" />' //Construct HTML for shown image
if (this.enableTitle && link.getAttribute("title")) //Use title attr of the link as description?
imageHTML+='<br />'+link.getAttribute("title")
this.centerDiv(this.thumbLoading) //Center and display "loading" div while we set up the image to be shown
this.thumbImage.innerHTML=imageHTML //Populate thumbImage div with shown image's HTML (while still hidden)
this.featureImage=this.thumbImage.getElementsByTagName("img")[0] //Reference shown image itself
if (this.featureImage.complete)
thumbnailviewer.showthumbBox()
else{
this.featureImage.onload=function(){ //When target image has completely loaded
thumbnailviewer.showthumbBox() //Display "thumbbox" div to the world!
}
}
if (document.all && !window.createPopup) //Target IE5.0 browsers only. Address IE image cache not firing onload bug: panoramio.com/blog/onload-event/
this.featureImage.src=link.getAttribute("href")
this.featureImage.onerror=function(){ //If an error has occurred while loading the image to show
thumbnailviewer.thumbLoading.style.visibility="hidden" //Hide "loading" div, game over
}
},
setimgopacity:function(value){ //Sets the opacity of "thumbimage" div per the passed in value setting (0 to 1 and in between)
var targetobject=this.featureImage
if (targetobject.filters && targetobject.filters[0]){ //IE syntax
if (typeof targetobject.filters[0].opacity=="number") //IE6
targetobject.filters[0].opacity=value*100
else //IE 5.5
targetobject.style.filter="alpha(opacity="+value*100+")"
}
else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax
targetobject.style.MozOpacity=value
else if (typeof targetobject.style.opacity!="undefined") //Standard opacity syntax
targetobject.style.opacity=value
else //Non of the above, stop opacity animation
this.stopanimation()
},
opacityanimation:function(){ //Gradually increase opacity function
this.setimgopacity(this.currentopacity)
this.currentopacity+=0.1
if (this.currentopacity>1)
this.stopanimation()
},
stopanimation:function(){
if (typeof this.opacitytimer!="undefined")
clearInterval(this.opacitytimer)
},

closeit:function(){ //Close "thumbbox" div function
this.stopanimation()
this.thumbBox.style.visibility="hidden"
this.thumbImage.innerHTML=""
this.thumbBox.style.left="-2000px"
this.thumbBox.style.top="-2000px"
},
cleanup:function(){ //Clean up routine on page unload
this.thumbLoading=null
if (this.featureImage) this.featureImage.onload=null
this.featureImage=null
this.thumbImage=null
for (var i=0; i<this.targetlinks.length; i++)
this.targetlinks[i].onclick=null
this.thumbBox=null
},
dotask:function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
},
init:function(){ //Initialize thumbnail viewer script by scanning page and attaching appropriate function to links with rel="thumbnail"
if (!this.enableAnimation)
this.opacitystring=""
var pagelinks=document.getElementsByTagName("a")
for (var i=0; i<pagelinks.length; i++){ //BEGIN FOR LOOP
if (pagelinks[i].getAttribute("rel") && pagelinks[i].getAttribute("rel")=="thumbnail"){ //Begin if statement
pagelinks[i].onclick=function(){
thumbnailviewer.stopanimation() //Stop any currently running fade animation on "thumbbox" div before proceeding
thumbnailviewer.loadimage(this) //Load image
return false
}
this.targetlinks[this.targetlinks.length]=pagelinks[i] //store reference to target link
} //end if statement
} //END FOR LOOP
//Reposition "thumbbox" div when page is resized
this.dotask(window, function(){if (thumbnailviewer.thumbBox.style.visibility=="visible") thumbnailviewer.centerDiv(thumbnailviewer.thumbBox)}, "resize")

} //END init() function
}
thumbnailviewer.createthumbBox() //Output HTML for the image thumbnail viewer
thumbnailviewer.dotask(window, function(){thumbnailviewer.init()}, "load") //Initialize script on page load
thumbnailviewer.dotask(window, function(){thumbnailviewer.cleanup()}, "unload")

Dropdown Links JS

startList = function() {
 
 if (document.getElementById) {
  navRoot = document.getElementById("nav");
  for (i=0; i<navRoot.childNodes.length; i++) {
   node = navRoot.childNodes[i];
  
   if (node.nodeName=="LI") {
    node.onmouseover=function() {
     var newClassName = ((c=this.getAttribute("className"))==null) ? this.getAttribute("class") : c;
     newClassName  +=" over";
     this.setAttribute("className", newClassName );
     this.setAttribute("class", newClassName );
    }
    node.onmouseout=function() { 
     var newClassName = ((c=this.getAttribute("className"))==null) ? this.getAttribute("class") : c;
     newClassName  =newClassName.replace(" over", ""); 
     this.setAttribute("className", newClassName  );
     this.setAttribute("class", newClassName  );
    }
   }
  }
 }
}
window.onload=startList;

HTML for entire page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL]http://www.w3.org/TR/html4/loose.dtd[/URL]">
<html>
<head>
<title>My Website</title>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
 
<LINK REL=StyleSheet HREF="CSS/style.css" TITLE="stylesheet" TYPE="text/css">
<script type="text/javascript" src="thumbnailviewer.js"></script>
<script type="text/javascript" src="dropdown.js"></script>
</head>
<body bgcolor="#CCCCCC">
<div id="container">
<div id="header">
<a name="top"></a>
<img src="logo.jpg" align="top"><img src="free.jpg" align="top">
</div>

<div id="links3">
<ul name="nav"> 
  <li><a href="index.html">Home</a></li> 
<li><a href="about.html">About Us</a></li> 
  <li><a href="kitchendoors.html">Kitchen Doors</a> 
    <ul> 
      <li><a href="pvc.html">PVC Doors</a></li> 
      <li><a href="solid.html">Solid Doors</a></li> 
    </ul> 
  </li> 
  <li><a href="accessories.html">Kitchen Accessories</a> 
    <ul> 
      <li><a href="wirework.html">Wirework</a></li> 
      <li><a href="sinks.html">Sinks</a></li> 
      <li><a href="sinks.html">Taps</a></li> 
      <li><a href="handles.html">Handles</a></li> 
      <li><a href="hoods.html">Hoods</a></li> 
    </ul> 
  </li> 
   <li><a href="worktops.html">Worktops</a></li> 
<li><a href="bedrooms.html">Bedrooms</a></li> 
<li><a href="contact.html">Contact Us</a></li> 
<li><a href="testamonial.html">Testamonials</a></li> 
</div>
<div id="content4" >
<p> Please click on the bedroom you want to enlarge the picture. View Descriptions below. </p>
<table>
<tr>
<td><a href="bed1.jpg" rel="thumbnail" border="0"><img src="bed1.jpg"width="165px" height="150px"border="0"></a></td>
<td><a href="bed2.jpg" rel="thumbnail" border="0"><img src="bed2.jpg"width="165px" height="150px" border="0"></a></td>
<td><a href="bed3.jpg" rel="thumbnail" border="0"><img src="bed3.jpg"width="165px" height="150px" border="0"></a></td>
<td><a href="bed4.jpg" rel="thumbnail" border="0"><img src="bed4.jpg"width="165px" height="150px" border="0"></a></td>
</tr>
<tr>
<td><a href="bed5.jpg" rel="thumbnail" border="0"><img src="bed5.jpg"width="165px" height="150px" border="0"></a></td>
<td><a href="bed6.jpg" rel="thumbnail" border="0"><img src="bed6.jpg"width="165px" height="150px" border="0"></a></td>
<td><a href="bed7.jpg" rel="thumbnail" border="0"><img src="bed7.jpg"width="165px" height="150px" border="0"></a></td>
<td><a href="bed8.jpg" rel="thumbnail" border="0"><img src="bed8.jpg"width="165px" height="150px" border="0"></a></td>
</tr>
<tr>
<td><a href="bed9.jpg" rel="thumbnail" border="0"><img src="bed9.jpg"width="165px" height="150px" border="0"></a></td>
<td><a href="bed10.jpg" rel="thumbnail" border="0"><img src="bed10.jpg"width="165px" height="150px" border="0"></a></td>
<td><a href="bed11.jpg" rel="thumbnail" border="0"><img src="bed11.jpg"width="165px" height="150px" border="0"></a></td>
<td><a href="bed12.jpg" rel="thumbnail" border="0"><img src="bed12.jpg"width="165px" height="150px" border="0"></a></td>
</tr>
</table>

</div>
<div id="footer">
removed for privacy reasons
</div>
</div>
</body>
</html>

ocallagh · 19-06-2009 12:58pm

And I am a JS guru, been doing it for 10 years. I can see why you may think otherwise seeming as both my scripts I gave to you so far have yet to work for you, however they are both fine. The first one you made a few errors implementing it. You removed the document.all condition but you also removed the if block and just left "document.getElementById{". Also, I only provided the logic for the onmouseover function I assumed you would use the same logic for the onmouseout funciton but instead you just copied over the wrong function leaving you with two onmouseover functions.

I don't know what the problem is with it this time, but when you have someone willing to help and you dont have the time to properly implement my suggestions or use my assistance but instead call out for yet another JS guru it can be a bit frustrating....

SD1990 · 19-06-2009 1:07pm

Im grateful for your help and have tried to implement it ?
I might not have implemented it properly but thats because im clueless with javascript.
I dont know what the problem is thats why im asking for help.
Could you post the full code of the script you have working?
Thanks

ocallagh · 19-06-2009 1:17pm

Ok, the error on line 5 is occuring in both IE and FF. It is in dropdown.js.

on line 4 you use navRoot = document.getElementById("nav");

What this does is look through your HTML for an object with an ID called nav. ie if you had an image in the document with <img id="nav" src="image.jpg"/> then using document.getElementById("nav"); would return the image.

In your case you are trying to access the UL menu. So you need to give it the id nav. In your HTML, change name="nav" to id="nav"

eg:

from

<div id="links3">
<ul name="nav">

to

<div id="links3">
<ul id="nav">

ocallagh · 19-06-2009 1:22pm

and just to explain the error. Because there is no element with an ID of nav, the variable navRoot is null. So when yo try to use that variable on the next line (eg: for (i=0; i<navRoot.childNodes.length; i++) {) it causes the problem.

SD1990 · 19-06-2009 1:33pm

How did i not see that

It was the line 5 thing was throwing me. IE should give the exact error !!

Ocallagh your a hero !! Thank you so much!

Any chance you no how to fix my php form problem also posted in this section? :P

Thanks again

ocallagh · 19-06-2009 1:39pm

SD1990 wrote: »

How did i not see that

It was the line 5 thing was throwing me. IE should give the exact error !!

Ocallagh your a hero !! Thank you so much!

Any chance you no how to fix my php form problem also posted in this section? :P

Thanks again

yeah, IE is a complete and utter pain in the hole trying to solve errors:pac:. IE8 is a bit better, but previous versions you'd have to use the browser back button to return to your page to get the first error and then you'd have to go through each JS file to find which file it was referring to. You are much better off using the console in Firefox. Or better yet, download Firebug so you can debug quicker. Glad it's working now

"Object Required" Error in IE not In FF?

Comments