JavaScript - Document.body.appendchild Return Value

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 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?

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 ♫♫

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);
}

Hello,

If I have a <div id="mydiv"></div>
and I use

Code:

iframe = document.createElement("iframe");
document.getElementById("mydiv").appendChild(iframe)

Does the iframe append after </div> <iframe>
or does it append <div id="mydiv"> <iframe> </div>

Thanks

hi,

I am curious about the use of appendChild() here... I have a solution that does what I want it to do, like this:

Code:

var sidebarEntry = createSidebarEntry(poly, html);
sidebar.appendChild(sidebarEntry);
sidebar.replaceChild((sidebarEntry),sidebar.firstChild);

but it seems to be going the long way around. Not that it matters much (I guess), but all I want to do is to add an item to the sidebar and when a new item is added, remove the existing one.

I tried just using relaceChild() on its own, but the code seems to need something to be replace... Is the above the best way to do it? Or is it possible to set the child to some dummy position like null to begin with, so that the code is not constantly reloading and replacing items (which is what I understand is going on now)?

here's the page I'm working on, if you want to see the rest of the code.

I appreciate any thoughts.

I'm adding text into a text area using document.createTextNode

Code:

document.getElementById('controlQueueDump').appendChild(document.createTextNode(args+';'));

But whenever the user edits the text box, it will never update anything again. I can add as much as I want, but when a user edits it (for example removes the contents), BAM, it is no longer updated.

it's a textarea so it should be appending the child to the value attribute.

Thanks a lot.

Need to append a hidden value to a floating div that is made via javascript. I tried the most obvious way but I am getting mismatch error in debug.


.HTML
Code:

<input type="hidden" id="desc1" value="blah blah blah" />

.JS
Code:

var item;
var image;
var description;

function one(){
	item = document.getElementById("product1");
	image = document.getElementById("i1");
	description = document.getElementById("desc1");
	expand();
}



function expand() {
	//changes css of the div
	item.innerHTML = "";
	item.style.position = "absolute";
	item.style.top = "27%";
	item.style.left = "21.3%";
	item.style.width = "952px";
	item.style.height = "610px";
	item.appendChild(image);
	image.height = "300";
	image.width = "400";
	image.align = "left";
	image.id = "cenimage";


   ifrm = document.createElement("IFRAME"); 
   ifrm.setAttribute("src", "form.html");
   ifrm.setAttribute("frameborder", "0");
   ifrm.setAttribute("scrolling", "no"); 
   ifrm.style.width = 950+"px"; 
   ifrm.style.height = 300+"px";
   item.appendChild(ifrm); 
  
// mismatch error !!

   var x = description.value;
   item.appendChild(x); 

}

Dear Javascripters.

I have some code that dynamicly adds textfields, the code works execpt for that I cant figure out how to place the textfield unded the textfield that calls on the function, it now places the new textfields at the bottom of the page..

Ive pasted my code on http://pastebin.com/m2fe9ba26

As soon as you focus in the TextField Productspecialisme: (max. 10) the javascript gets called on..

Thanks in advance.
Regards

Code:

function displayResult()
{
var  damn = document.getElementById("textyar").value;
document.getElementById("oneforty").innerHTML = damn;
var newDIV = document.createElement('div');
newDIV.className = "tweets";
var newspan =document.createElement('span');
newspan.className = "imagespanleft";
var img = document.createElement("IMG");
img.className="image";
img.src = "tweets/me.jpg";
newDIV.innerHTML = document.getElementById('textyar').value;  
document.getElementById('leftmaindiv').appendChild(newDIV).appendChild(newspan).appendChild(img); 
}

this is the code , i m trying to create an interface like twitter where u put in text box and tweet appears below in
problem is it is creating two divs instead of one , i tried insertbefore() as well but same behaviour
plz ask any questions if u r still not clear

I don't understand the logic of Break, Return False, Return True. It was never really covered in our college class, and I see everyone using it. I got an A in the class, if that 'proves' that I really tried to apply myself.

NOTE: I understand what the function is doing. I just don't understand WHEN to use break, return false or return true if the the translator can determine the conditional statements.


PHP Code:
function submitForm(){
var ageSelected = false;

for (var i=0; i<5; ++1){
if (document.forms[0].ageGroup[i].checked == true) {
ageSelected = true;
break; 
  }
}

if (ageSelected == false){
window.alert("You must select your age group");
return false;
}

else
return false;
} 




if the the translator can determine the conditional statements, why not write it like this:

PHP Code:
function submitForm(){
var ageSelected = false;

for (var i=0; i<5; ++1){
if (document.forms[0].ageGroup[i].checked == true) {
ageSelected = true;
break; // what's the point for the 'break'? Won't the rest of the code be ignored since it passed the first condition?
  }
}

if (ageSelected == false){
window.alert("You must select your age group");
return false;
}
// why not leave the last else out? is it just a 'safety' catch, in case something other than true or false is inputted?
else
return false; // what's the point?
} 




Questions:
Why use return true, if the translator knows it's ture? Why use "return false" if the translator knows it's false and the alert window has already gone up? why not use "break" to stop the code? Why use the "return false" at the end "else" statement?

I am making a web page, and as part of it I have a table that the user can add rows to. My code works in FF and Chrome, but IE is broken.
Code:

function addrow() {
              var example=document.getElementById("new");
              var addHere=document.getElementById("ticketTable");
              var node= example.cloneNode(true);
              node.id="added";
              addHere.appendChild(node);
          }

This code is called when a button is clicked. new is the ID of the row I am adding, and ticketTable is the ID of the table I am adding to. Help please!

Hey guys, First post i have searched the web a lot on this subject and am still confused so i thought id try and get some help from the experts, the following function works great in every browser except IE, the line of code that breaks in IE is highlighted in red. I have read some topics about this not working in IE and saw some workarounds with innerhtml or something but i don't really understand. Can someone please take some time to figure out a fix for this?

Code:

function displayStream(live_id) {

		var stream_out = document.getElementById("stream_out");
		for (var j = 0; j < stream_out.childNodes.length; j++) {
			stream_out.removeChild(stream_out.childNodes[j]);
		}
		var object = document.createElement("object");     		
                object.setAttribute("height", "475");
		object.setAttribute("width", "998");
		
		var param = document.createElement("param");
		//param.setAttribute("name", "movie");
                param.name = 'movie';
		param.setAttribute("value", "http://www.own3d.tv/livestream/" + live_id);
		object.appendChild(param);
		
		var param = document.createElement("param");
		param.setAttribute("name", "allowfullscreen");
		param.setAttribute("value", "true");
		object.appendChild(param);
		
		var param = document.createElement("param");
		//param.setAttribute("name", "wmode");
                param.name = 'wmode';
		param.setAttribute("value", "transparent");
		object.appendChild(param);

		var embed = document.createElement('embed');
		embed.setAttribute("type", "application/x-shockwave-flash");
		embed.setAttribute("src", "http://www.own3d.tv/livestream/" + live_id +";autoplay=true");

		embed.setAttribute("allowfullscreen", "true");
		embed.setAttribute("wmode", "transparent");
		embed.setAttribute("height", "475");
		embed.setAttribute("width", "998");
		 object.appendChild(embed); 

		stream_out.appendChild(object);
	}