JavaScript - Document.body = Null ?

I wanted to resize the modal dialog based on the content of the modal dialog for that i used the following lines of code,

window.dialogWidth = document.body.scrollWidth+ "px";
window.dialogHeight = document.body.scrollHeight+ "px";

The 'document.body.scrollHeight' is not giving the exact height of the modal dialog bcos the button on the modal dialog are not completely visible to click for the user.

Please can any one tell how to get the exact height of the modal dialog to resize it?

Hi,

thanks for reading, I have to admit, I'm a noob, but what my code does drives me nuts, eternal thanks to whoever tries to help me out!

In short my problem is that document.body.scrollHeight does not give me the correct pagesize combined with the viewport.
I just want the parts of the page to be as long as the (in the original dynamicly entered) text in the middle.

Imho
pageheight = (document.body.scrollHeight+viewportheight);
should give me the correct height of the page, but does not, why?
It works and it is close, but not completely, I tried stuff like document.body.offsetHeight etc., but my guess is I miss facturing in a parameter, but I have not the slightest clue which...

Here the page:
http://buchenbergschule.de/ruh/depre...ode/test7.html

Here the JS Code:

Code:

<script type="text/javascript">
<!--
 var viewportwidth;
 var viewportheight;
 var pageheight;
 
 if (typeof window.innerWidth != 'undefined')
 {
      viewportwidth = window.innerWidth,
      viewportheight = window.innerHeight
 }
 

 else if (typeof document.documentElement != 'undefined'
     && typeof document.documentElement.clientWidth !=
     'undefined' && document.documentElement.clientWidth != 0)
 {
       viewportwidth = document.documentElement.clientWidth,
       viewportheight = document.documentElement.clientHeight
 }
 
 
 else
 {
       viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
       viewportheight = document.getElementsByTagName('body')[0].clientHeight
 }
 
pageheight = (document.body.scrollHeight+viewportheight);
 
document.write('<style type=text/css> div#linksaussen');
document.write('{width:468px; height:'+(pageheight-896)+'px; position:absolute; top:896px; left:'+(((viewportwidth-948)*0.5084)-468)+'px; background-image:url(./images/back_links.png);}');
document.write('div#linksaussen1 {width:468px; height:897px; position:absolute; top:0px; left:'+(((viewportwidth-948)*0.5084)-468)+'px; background-image:url(./images/testlinks.png);}');
document.write('div#mitte {width:948px; height:'+pageheight+'px; position:absolute; top:0px; left:'+((viewportwidth-948)*0.5084)+'px; background-color:#FF0000;}');
document.write ('div#rechtsaussen1');
document.write ('{width:'+((viewportwidth-948)*0.4916)+'px; height:897px; position:absolute; top:0px; left:'+(948+((viewportwidth-948)/2))+'px; background-image:url(./images/testrechts.png); background-repeat:no-repeat;}');
document.write ('div#rechtsaussen');
document.write ('{width:'+((viewportwidth-948)*0.4916)+'px; height:'+(pageheight-896)+'px; position:absolute; top:896px; left:'+(948+((viewportwidth-948)/2))+'px; background-image:url(./images/back_rechts.png);}</style>');
alert (viewportwidth+'vpw'+viewportheight+'vph'+pageheight+'pgh')

//-->
</script>

Again please forgive my noobishness, my bad english and thanks again for any hint!

I'm not a JS programmer, I stumble around.
I have a web page that uses:

d = document.createElement("script");
d.type = "text/javascript";
d.src = "/var/www/html/UpDist.php";
return (document.body.appendChild(d)); <-- what I want to do

UpDist.php returns a value that I need to continue and I can't get the above code to work - UpDist runs, the return value doesn't.

Thanks
Chuck

I'm currently working on an HTML executor and would like users to be able to put javascript in their code if they wish to do so. Currently I have their input sent to an iframe via document.body.innerHTML. The problem, though, is that user submitted javascript doesn't work (with the exception of anything placed in the onload attribute of an image). Any suggestions?

IE is throwing an error stating
window.document.forms[...].elements is null or not an object.
in the following code
Code:

  var changeHandler = function() {
    this.form.calculateDependencies();
    return true;
  };
  for(var i = 0; i < arguments.length; ++i) {
    for(var j = 0, e = window.document.forms[arguments[i]].elements; j < e.length; ++j) {
      addEvents([e[j]], ["change", "keyup", "focus", "click", "keydown"], changeHandler);
      e[j].hide = hideEl;
      e[j].show = showEl;
    }

    (e = window.document.forms[arguments[i]]).calculateDependencies = calcDeps;
    e.calculateDependencies();
  }
}

FF and Chrome seem to work ok, but it breaks in IE.
What am I doing wrong here?

Hi, first post here. I was working on code for opening a link in a new window when clicked. I read somewhere that it's a good idea to remove all of the javascript elements from the HTML. So I pieced it together and it works. But I get the following error in IE8:

Code:

Message: 'document.getElementById(...)' is null or not an object

Here's the relevant HTML:

Code:

<a href="http://www.samplesite.com" id="sampleid">Sample Text</a>

And here's the relevant javascript that I put in a seperate .js file:

Code:

function samplefct() {
window.open(this.href);return false;
}

window.onload = function()
{document.getElementById("sampleid").onclick = samplefct;
}

The code does work as planned. But I'd still like to get rid of the error. Can anybody think of a different way of stating the javascript that would perform the same thing and lose the error?

Any help would be greatly appreciated.
Thanks!
IB

Ok, so I'm working on a What-You-See-Is-What-You-Get editor, and it works flawlessly - with standards. I'm trying to work out bugs it has with IE, this one is particularly tricky:
When the page loads, the editor should be inialized, and the inner HTML of the body of the iframe should set to specified text. This seems to work fine in standards-compliant browsers - Webkit, Firefox. But nothing is written to the body when when the page loads in IE, here's the gist of the code for reference:
Code:

function loadText(){
document.getElementById("edit").contentWindow.document.body.innerHTML = "predefined text";
}
window.onload = loadText;

The oddest part, is if I come from a new page to the editor in IE, the text doesn't appear. But when I refresh in IE, the text appears for a split second and disappears.

Any help on this matter is greatly appreciated!

Hi I have a code which allows a set few images to be used in a slide-show type style for switching the documents background image which displays a set few images which are declared in an object array.

Basicly I have it all working perfectly with a "Timer" object value so you can set your own display length per picture but what I can't seem to do is make a cross-browser image fade transaction which works for background images, Here is the code I wrote and how its used, if anyone can help with links or examples that would be a very big help.

ORIGINSlide.js
Code:

/*******************************************
 *                                         *
 *  ORIGIN Background Image SlideShow      *
 *  Build 1.090.350.09                     *
 *                                         *
 *  @Author: CMBSystems (Chris Bearcroft)  *
 *  @Copyright: CMBSystems                 *
 *  @Created: 11/6/2010,1:24 AM (GMT)      *
 *                                         *
 *******************************************/

(function($){
  $.ORIGIN = { // Starting The ORIGIN Class
    Background: { // Starting The Background Sub-Class
      Default: 0, // Default Array Key ID
      Element: [], // Creating The Object For The Background Element
      Slide: function() { // Starting The Slide Function
        // Setting-Up The Element For Use In Update
        $.ORIGIN.Background.Element = arguments[0];
        // Updating The Document Body Background Image
        setInterval('ORIGIN.Background.Update()',$.ORIGIN.Background.Element.Timer);
      },
      Preload: function(img) { // Starting The Preload Function
        // Preload The Given Image Ready For Displaying
        var loadIMG=new Image();
        // Setting The Source For The Given Image
        loadIMG.src=img;
      },
      Update: function() { // Starting The Update Function
        if($.ORIGIN.Background.Element.Images !== undefined) {
          if($.ORIGIN.Background.Default == $.ORIGIN.Background.Element.Images.length - 1) {
            // Set Default Value As 0
            $.ORIGIN.Background.Default = 0;
            // Preload Next Image
            $.ORIGIN.Background.Preload($.ORIGIN.Background.Element.Images[$.ORIGIN.Background.Default + 1]);
          } else {
            // Set Default Value As Current Array Key ID
            $.ORIGIN.Background.Default = parseInt($.ORIGIN.Background.Default + 1);
            // Preload Next Image
            $.ORIGIN.Background.Preload($.ORIGIN.Background.Element.Images[$.ORIGIN.Background.Default + 1]);
          }
          // Set Document Body Background As The New Image
          document.body.style.backgroundImage = "url("+$.ORIGIN.Background.Element.Images[$.ORIGIN.Background.Default]+")";
        }
      }
    }
  };
})(window);

Hoe to use:-
Code:

<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
body {
  background: #000000 url(images/1.jpg) bottom fixed no-repeat;
}
</style>
<script src="ORIGINSlide.js" type="text/javascript"></script>
<script type="text/javascript">
ORIGIN.Background.Slide({
  "Timer":5000,
  "Images": [
    "images/1.jpg", // !IMPORTANT - Same image as the default background image.
    "images/2.jpg",
    "images/3.jpg"
  ]
});
</script>
</head>
<body>

</body>
</html>

If anyone can help me please do, Thank You
DJCMBear ♫♫

Hello,

I was wondering why my code is perfectly working in Firefox, but does not work in Internet Explorer at all:

Code:

<script language="javascript">
<!--
document.body.onload=document.body.appendChild(document.getElementById('testdiv'));
 --> 
</script>

I don't get any error messages, the div is just not showing how it is supposed to show with body as parent. Any suggestions?

Thanks

Hey this is my java script it works fine in FF , but in IE it shows type mismatch error .It shows my innerhtml page and also runs my script but i want to remove the type mismatch error would really appreciate your help.Thank you .

Here is my javascript function

function submitForm(){

// create request
var xmlhttp = null;
var serverhttp=null;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
serverhttp=new XMLHttpRequest();
if ( typeof xmlhttp.overrideMimeType != 'undefined') {
xmlhttp.overrideMimeType('text/xml');
serverhttp.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
serverhttp = new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert('Perhaps your browser does not support xmlhttprequests?');
return;
}


// submit in JSON notation
var email = document.customer.elements[0].value;
var companyName = document.customer.elements[1].value
var input = '{email:"'+email+'",company_name:"'+companyName+'"}';
var url = "URL";
var cgi = "URL/script.cgi";
xmlhttp.open('POST',url,true);
//serverhttp.open('POST',url,true);
// show feedback
xmlhttp.onreadystatechange = function (aEvt) {
var newDiv = document.createElement("div");
newDiv.innerHTML = "<b>Thank You!</b>";
//type mismatch occures over here
document.body.replaceChild(newDiv,document.customer);
serverhttp.open('POST',cgi,true);
serverhttp.send(companyName);
}
xmlhttp.send(input);
}

Hey this is my java script it works fine in FF , but in IE it shows type mismatch error .It shows my innerhtml page and also runs my script but i want to remove the type mismatch error would really appreciate your help.Thank you .

Here is my javascript function

function submitForm(){

// create request
var xmlhttp = null;
var serverhttp=null;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
serverhttp=new XMLHttpRequest();
if ( typeof xmlhttp.overrideMimeType != 'undefined') {
xmlhttp.overrideMimeType('text/xml');
serverhttp.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
serverhttp = new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert('Perhaps your browser does not support xmlhttprequests?');
return;
}


// submit in JSON notation
var email = document.customer.elements[0].value;
var companyName = document.customer.elements[1].value
var input = '{email:"'+email+'",company_name:"'+companyName+'"}';
var url = "URL";
var cgi = "URL/script.cgi";
xmlhttp.open('POST',url,true);
//serverhttp.open('POST',url,true);
// show feedback
xmlhttp.onreadystatechange = function (aEvt) {
var newDiv = document.createElement("div");
newDiv.innerHTML = "<b>Thank You!</b>";
//type mismatch occures over here
document.body.replaceChild(newDiv,document.customer);
serverhttp.open('POST',cgi,true);
serverhttp.send(companyName);
}
xmlhttp.send(input);
}

Hey all,

For the below code, I'm just trying to create a simple toggle menu for a Table of Contents. However, when page loads, I get document.gelementbyid('sidebar') is null even though it's clearly there and if I move script to below markup, it will also give me a hideElements() is not a function error, even though it clearly is.

Code:

<script type="text/javascript">
(function(){
	
	var headers = document.getElementById("sidebar").childNodes;
	for(var i=0; i < headers.length; i++){
			hideElements(headers[i]);
			
			if(headers[i].nodeName == "h1"){
				headers[i].childNodes[0].onclick = function(){
					hideElements(headers[i]);
					this.parentNode.nextSibling.style.display = "block";
					return false;
			}
		}
	}
	
	var hideElements = function(element){
		if(element.nodeName == "UL") element.style.display = "none";	
	}

})();
</script>

	<body>
		<a name="top"></a>
		<div id="masthead">
			<h1>This is the Help Page</h1>
		</div>
		<div id="sidebar">
			<h1><a href="chapter1"> Info</a></h1>
			<ul>
				<li><a href="#section1">Section 1</a></li>
				<li><a href="#section2">Section 2</a></li>
				<li><a href="#section3">Section 3</a></li>
			</ul>
			<h1><a href="chapter2"> Info</a></h1>
			<ul>
				<li><a href="#section4">Section 4</a></li>
				<li><a href="#section5">Section 5</a></li>
				<li><a href="#section6">Section 6</a></li>
			</ul>	
		</div>	
		<div id="content">
			<h1 id="section1">Section 1</h1>
			<p>
			</p>
			<a href="#top">Back to Top</a>	
			<h1 id="section2">Section 2</h1>
			<p>
			</p>
			<a href="#top">Back to Top</a>	
			<h1 id="section3">Section 3</h1>
			<p>
			</p>
			<a href="#top">Back to Top</a>	
		</div>	
	</body>

Thanks for any response.

I'm getting the following problem. The reason is that the object appears through AJAX. But if I choose it NOT to appear it gives this problem. How can I avoid this? I put an if statement inline
Code:

if(document.getElementById('vsbtitle_1').value!=null){
thisurlext+='&btitle1='+document.getElementById('vsbtitle_1').value; 
}

But it doesn't help.
Quote:
Error: document.getElementById("vsbtitle_1") is null
Source File: javascript:%20var%20file='forforum.php';%20var%20thisurlext='?type=forforum&btitle0='+document.getEl ementById('vsbtitle_0').value;%20if(document.getElementById('vsbtitle_1').value!=null){thisurlext+=' &btitle1='+document.getElementById('vsbtitle_1').value;%20}%20var%20checkedlength=0;%20thisurlext+=' &checkresult0=';%20for(i=0;i<document.getElementsByName('checkresult_0').length;++i){if(document.get ElementsByName('checkresult_0')[i].checked){thisurlext+=document.getElementsByName('checkresult_0')[i].value;checkedlength++;if(i+1<document.getElementsByName('checkresult_0').length){if(document.getEle mentsByName('checkresult_0')[i+1].checked){thisurlext+='+';}}}};%20thisurlext+='&checkresult1=';%20for(i=0;i<document.getElementsByNa me('checkresult_1').length;++i){if(document.getElementsByName('checkresult_1')[i].checked){thisurlext+=document.getElementsByName('checkresult_1')[i].value;checkedlength++;if(i+1<document.getElementsByName('checkresult_1').length){if(document.getEle mentsByName('checkresult_1')[i+1].checked){thisurlext+='+';}}}};var%20getKeyURL='';%20for(a=0;%20a<document.getElementById('txtid').v alue;%20a++){if(document.getElementById('txtarea_'+[a]).value!=%20''){getKeyURL+='&txtarea'+[a]+'=';}getKeyURL+=document.getElementById('txtarea_'+[a]).value;}var%20thisnewurlext=file+thisurlext+getKeyURL;%20forForum();
Line: 1

Hi
I am having trouble with a script. I cannot figure out why I get the message:
error: null is null or not an object (In IE8)

The site is: www.rayburns.com

I have check the javascript for the navigation bar and for the rotating images and cannot see what is missing. Not sure what is not being called.
Can someone please help with this.
Thank you in advance!

Hi i have done some reading on the net today because i am getting an error on ie. I did find the javascript twice in my code, once in the header and once here, so i removed it from the header. I also changed to src to the full url.

But i am still getting this and i dont know why. the file is located in the root directory.

Code:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; SearchToolbar 1.2; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; msn OptimizedIE8;ENUS)
Timestamp: Sat, 30 Jul 2011 16:03:05 UTC


Message: 'null' is null or not an object
Line: 8
Char: 3894
Code: 0
URI: http://www.mysite.com/swfobject.js

Code:

<script type='text/javascript' src='$CONST_LINK_ROOT/swfobject.js'></script>
<script type='text/javascript'>
var s1 = new SWFObject('player.swf','player','400','300','9');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('flashvars','file=$CONST_LINK_ROOT/movies/$sql_array->vid_id.flv');
s1.write('preview');
</script>
<embed src='$CONST_LINK_ROOT/flvplayer.swf?file=$CONST_LINK_ROOT/movies/$sql_array->vid_id.flv&autoStart=false' width='175' height='175' quality='high' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer'></embed>

would appreciate any suggestions thanks.


i was on 1.5 swfobject i did download 2.2 and im guessing all you do is replace the swfobject.js file to upgrade it, but what happened is it gives me this now.

Code:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; SearchToolbar 1.2; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; msn OptimizedIE8;ENUS)
Timestamp: Sat, 30 Jul 2011 16:31:08 UTC


Message: 'SWFObject' is undefined
Line: 1283
Char: 1
Code: 0
URI: http://www.mysite/video_admin.php?type=v

i dont mind going back to the old version i just need to get this working and im soooooooo lost lol


ok another update, this is becomming maddening lol. once i have this line in the header php

Code:

<script type='text/javascript' src='$CONST_LINK_ROOT/swfobject.js'></script>

I never have to use it again as long as they header php is included correct?


This is what is driving me nuts, im back on 1.5 and it says its undefined


Code:

but am in not defining it on this line? ---> var s1 = new SWFObject('player.swf','player','400','300','9');


<script type='text/javascript' src='swfobject.js'></script>
<script type='text/javascript'>
var s1 = new SWFObject('player.swf','player','400','300','9');
s1.addParam('allowfullscreen','true');
s1.addParam('allowscriptaccess','always');
s1.addParam('flashvars','file=$CONST_LINK_ROOT/movies/$sql_array->vid_id.flv');
s1.write('preview');
</script>

Another Update. I am back to the original question. null is null or not an object.. in my search i have found this

found a solution. basically Internet Explorer is crappy and doesnt like the setAttribute property so had to change the onchange handler by directly changing the attrbute for the object like so.
object.onchange = function() {}

i have no idea what they means, does that mean i need to change swfobject.js or does that mean i have to change my xml request. and if it is the swfobject i have no clue what they mean or what lines