Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Null is null or not an object - IE problem

Status
Not open for further replies.

HughbertD

Technical User
Apr 30, 2007
42
GB
Hi all,

I am encountering the following problem with my javascript code.

I get a null is null ornot an object error for this line in my code(the second one):
Code:
var nImg = document.getElementById('fullSizeContainer');
var fullSizeImg = nImg.getElementsByTagName('img')[0];

The "fullSizeContainer" is definitely there, and I do not encounter any of these problems in Firefox. I know the errors are not always accurate in listing the line at fault so the code is below:

Code:
var thumbProportion = .17 // thumbnails are 32% of their full size;
	var IE = false; 
	if (navigator.appName == "Microsoft Internet Explorer"){IE = true;}

	function swapImg(nImg,nSwapImgClass,nFullSizeImg){		
		
		var thumbImg = nImg;
		var thumbImgAlt = thumbImg.alt;
		var origFullWidth = nFullSizeImg.width; 		
		var origFullHeight = nFullSizeImg.height;		
		var tempImgHolder = nFullSizeImg.src;
		var origFullAlt = nFullSizeImg.alt;
		nFullSizeImg.src = thumbImg.src;
		thumbImg.src = tempImgHolder;
		nSwapImgClass.style.width = nFullSizeImg.width + "px";
		thumbImg.style.width =  Math.round(origFullWidth * thumbProportion) + "px";	
		thumbImg.style.height =  Math.round(origFullHeight * thumbProportion) + "px";	
		thumbImg.alt = origFullAlt;
		thumbImg.title = origFullAlt;
		nFullSizeImg.alt = thumbImgAlt;
		nFullSizeImg.title = thumbImgAlt;
		nCaption.firstChild.data = thumbImgAlt;
	}

	function init(){

		var nImg = document.getElementById('fullSizeContainer');
		var fullSizeImg = nImg.getElementsByTagName('img')[0];
		nCaption = nImg.getElementsByTagName('div')[0];		
		IE ? nRule = document.styleSheets[3].rules : nRule = document.styleSheets[3].cssRules;
		for (i=0; i<nRule.length; i++)
			{
		 	 if (nRule[i].selectorText == ".swapImg")
				{	
				 var swapImgClass = nRule[i];
				 nRule[i].style.width = fullSizeImg.width + "px";				 
				}		
			}	
		var nGallery = document.getElementById("photoGallery").getElementsByTagName("a");
		for (i=0; i<nGallery.length; i++)
			{
			 nGallery[i].onclick = function()
				{
			 	 swapImg(this.firstChild,swapImgClass,fullSizeImg);
			 	 return false;
				}			
		 	nGallery[i].href = "#";			
			}	
	}

	IE ? attachEvent('onload', init, false) : addEventListener('load', init, false);

Any help anyone can give would be massively appreciated - this is driving me insane
 
Hi

First of all, browser detection is obsolete, the recommended one is feature detection.
HughbertD said:
The "fullSizeContainer" is definitely there
And it also contains [tt]img[/tt] tags ? By the way, your HTML is valid ?

To avoid hitting the errors this is probably enough :
Code:
[b]var[/b] nImg [teal]=[/teal] document[teal].[/teal][COLOR=darkgoldenrod]getElementById[/color][teal]([/teal][green][i]'fullSizeContainer'[/i][/green][teal]);[/teal]
[highlight][b]if[/b] [teal](![/teal]nImg[teal])[/teal] [b]return[/b][/highlight]
[b]var[/b] fullSizeImg [teal]=[/teal] nImg[teal].[/teal][COLOR=darkgoldenrod]getElementsByTagName[/color][teal]([/teal][green][i]'img'[/i][/green][teal])[[/teal][purple]0[/purple][teal]];[/teal]
[highlight][b]if[/b] [teal](![/teal]fullSizeImg[teal])[/teal] [b]return[/b][/highlight]
But to solve the problem we should see the related HTML, preferably the entire and functional page.

Feherke.
 
Thanks for responding -

The HTML code for this is here:
Code:
<!--
		<div id="fullSizeContainer" class="swapImg">
			<img src="[URL unfurl="true"]http://1.2.3.13/bmi/morrish.juiceserver.co.uk/images/homepage5.jpg"[/URL] alt="First Image 

Description" width=370 height=215 title="First Image Desc">
			<div class="caption">First Image Desc</div>
		</div>
		<div id="photoGallery" class="galleryContainer">
			<a href="./images/hompage1.jpg"><img 

src="[URL unfurl="true"]http://1.2.3.9/bmi/morrish.juiceserver.co.uk/images/homepage1.jpg"[/URL] width="63" height="37" alt="Second Image 

Description" title="Second Image Description"></a>
			<a href="./images/homepage2.jpg"><img 

src="[URL unfurl="true"]http://1.2.3.10/bmi/morrish.juiceserver.co.uk/images/homepage2.jpg"[/URL] width="63" height="37" alt="Third Image 

Description" title="Third Image Description"></a>
			<a href="./images/homepage3.jpg"><img 

src="[URL unfurl="true"]http://1.2.3.11/bmi/morrish.juiceserver.co.uk/images/homepage3.jpg"[/URL] width="63" height="37" alt="Fourth Image 

Description" title="Fourth Image Description"></a>
			<a href="./images/homepage4.jpg"><img 

src="[URL unfurl="true"]http://1.2.3.12/bmi/morrish.juiceserver.co.uk/images/homepage4.jpg"[/URL] width="63" height="37" alt="Fifth Image 

Description" title="Fifth Image Description"></a>
			<a href="./images/homepage6.jpg"><img 

src="[URL unfurl="true"]http://1.2.3.9/bmi/morrish.juiceserver.co.uk/images/homepage6.jpg"[/URL] width="63" height="37" alt="Sixth Image 

Description" title="Sixth Image Description"></a>
		</div>
		-->
<div id="fullSizeContainer" class="swapImg"><img 

src="[URL unfurl="true"]http://1.2.3.11/bmi/morrish.juiceserver.co.uk/assets/plot/136/1138_42d8c06fcf015094fd201f14e7ed2968/main.jpg"[/URL] 

title="Plot 1" alt="Plot 1" width="370" height="215"><div class="caption"> Plot 1</div></div><div id="photoGallery" 

class="galleryContainer"><a href="/assets/plot/136/1136_04058387a1d2dbc394e96cdcb50e797b/main.jpg"><img 

src="[URL unfurl="true"]http://1.2.3.10/bmi/morrish.juiceserver.co.uk/assets/plot/136/1136_04058387a1d2dbc394e96cdcb50e797b/main.jpg"[/URL] 

width="63" height="37" title="Plot 1 &amp; 2 at Casterbridge Place" alt="Plot 1 &amp; 2 at Casterbridge Place"  

style="padding:0px"></a><a href="/assets/plot/136/1139_c02e4c4e119e8ce24f5feae3aa3a5e28/main.jpg"><img 

src="[URL unfurl="true"]http://1.2.3.13/bmi/morrish.juiceserver.co.uk/assets/plot/136/1139_c02e4c4e119e8ce24f5feae3aa3a5e28/main.jpg"[/URL] 

title="Kitchen" alt="Kitchen" width=63 height=37></a><a 

href="/assets/plot/136/1140_92364e957bf691db1663e1f33f30a4dd/main.jpg"><img 

src="[URL unfurl="true"]http://1.2.3.10/bmi/morrish.juiceserver.co.uk/assets/plot/136/1140_92364e957bf691db1663e1f33f30a4dd/main.jpg"[/URL] 

title="Kitchen" alt="Kitchen" width=63 height=37></a></div>
<div id="text_block">
<div id="breadcrumb"><a href="index.php">Home</a> &gt; <a href="development_index.php?id=9 ">Casterbridge Place</a> &gt; 

Plot 1, 1 Henchard Cottages</div>
 
Using that code I can stop the error message as you say, I tried toggling the two lines seperately, and it is only without:

Code:
		var nImg = document.getElementById('fullSizeContainer');
		if (!nImg) return

That I get the error message, so I guess it is a problem with finding the "fullSizeContainer" ?

Sorry, I am still stumped on how to solve this
 
Hi

I would say, those errors should not affect the JavaScript engine in this way.

I searched for an Explorer to check it. Well it works for me on Exporer 6.

Sorry, I am out of ideas.

Feherke.
 
It seems to only be IE7 and IE8 that are affected by this problem.

Thanks for your help feherke, I'm getting fairly desperate now, does anyone else out there any clues?
 
Safari offer up this :

TypeError: Result of expression 'document.getElementById("photoGallery")' [null] is not an object.

Don't if that might be of any use.
 
Hi all,

Just to update that the problem lay within the html file, in this part of the code:
Code:
<!--[if gte IE 5.5]>
<![if lt IE 7]>
<style type="text/css">
 
	.galleryContainer {position: absolute; 		
		           top: expression(document.documentElement.scrollTop + 
			   document.documentElement.clientHeight - this.clientHeight - 5 + "px");}			
 
</style>
<![endif]>
<![endif]-->

The second to last endif statement wasn't closed :)

Thanks for all the help feherke
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top