|
JavaScript - Document.body.innerhtml And Javascript
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?
Similar TutorialsI need help creating something hard. First I need to divs that change by ONE button and when they change they say two different things and must be onclick. The other thing is there will be 4 buttons. They start black and when you click one it turns grey and when you click another it turns gray and the other one that was last clicked turns back black and same with the other two. Code: function writeCmd()
{
// var div = top.buttonFrame.document.getElementById("buttonList");
for(i=0;i<arrCtr;i++)
{
top.buttonFrame.document.getElementById('buttonList').innerHTML = '<input type="Button" value="' + buttonTXT[i] + '" id="' + buttonIDS[i] + '" name="' + buttonIDS[i] + '" class="submenu_special" onclick="top.contentFrame.document.forms[0].submit()" /><br />';
}
}
So I have a basic function here, and it works... except for one thing... My arrays have multiple elements, and innerHTML only lets one button get written (the last)... How can I append, vs. replacing with this function? Hi All, Im trying to get my simple js code to add some code to the html page but cant seem to (i get an error in html page); my JS code: Code: function game() {
this.document.getElementById('modalone').innerHTML = "<b style='float: left; text-decoration: underline;'>Deady Teddy</b><img
src='css/images/popup/close.png' style='float: right; cursor: hand;' onClick='javascript: hideModal('modalPage');'></img>";
}
my html code to call this: Code: <div class="gbox"><img src="css/images/games/dt.gif" />
<a href="javascript: revealModal('modalPage'); game();">Deady Teddy </a>
</div>
Any Idea's? Thanks In Advance, Jamie. Hi! I want the result of a fileld to appear bellow the form and not in a new blank page (witch happens when you have document.write?). I guess it has something to do with "innerHTML"? Can anyone of you help me to make the result of this IF to appear bellow the form? if (document.Form.TypedInField.value == "The Cable Guy") { document.write("You just wrote a title of a nice movie") } I have the form and everything works perfect, except of that the result of what the user have wrote (beacuse of docuemnt.write) land in blank window. I would be very happy of any of you could solve this for me Hey all! Got a question I can't seem to find an answer to. I have a little JS app that is a glorified calculator which I posted the code for below. My code uses the document object to replace the html in the "content" <div> and works great. However, I want to add an inline style in order to change the background of the input (readonly field with an id of "coutput") based on either of the global variables named "MJPD" or "IJPD", (depending on the switch case selected in the user prompt at the beginning of the script.) Simplified....if the value of MJPD is less than 4.6, I want the "coutput" field's background to be red, else be green. The same goes for IJPD, except the threshold for red will be <3.83. Code and what I have tried is below. After reading the code, look below it to see what I have tried and maybe tell me what I'm doing wrong! =) Any help is greatly appreciated.......I have spent a week searching for this little answer and I can't seem to find it! Code:
<script language="JavaScript">
var MJPD = 1;
var IJPD = 1;
function sayhello(){ // *** live test for inline JS code placement
alert("IT WORKS!!! Now change me =)");
}
//////////////////////////////////////////////////////
function changeScreenSize(w,h)
{
window.resizeTo( w,h )
}
///////////////////////////////////////////////////
function iJPDCalc(form) //calculate IJPD value
{
var ij = parseFloat(form.IJobs.value, 10);
var it = parseFloat(form.ITime.value, 10);
var IJPD = 0;
IJPD = (ij / it) * 8.0;
form.I_JPD.value = IJPD;
}
/////////////////////////////////////////////////////
function mJPDCalc(form) //calculate MJPD value
{
var mj = parseFloat(form.MJobs.value, 10);
var mt = parseFloat(form.MTime.value, 10);
var MJPD = 0;
MJPD = (mj / mt) * 8.0;
form.M_JPD.value = MJPD;
}
/////////////////////////////////////////////////////
function ijpdcolor() //set bg color of coutput based on IJPD's value
{
if (IJPD >= 3.83) {
return ("green");
}
else {
return ("red");
}
}
/////////////////////////////////////////////////////
function mjpdcolor() //set bg color of coutput based on MJPD's value
{
if (MJPD >= 4.6) {
return ("green");
}
else {
return ("red");
}
}
/////////////////////////////////////////////////////
function startVZT3(){
var n=0;
n=prompt("What would you like to do? 1: Calculate IJPD 2: Calculate MJPD 3: Exit", "Enter a value from 1-3")
switch(n)
{
case(n="1"):
document.getElementById("content").innerHTML='<FORM><h2>Combined IJPD Calculator</h2><p>Install components completed today:</p><INPUT NAME="IJobs" VALUE="3.84" MAXLENGTH="10" SIZE=10><p>Hours taken to the jobs:</p><INPUT NAME="ITime" VALUE="8" MAXLENGTH="10" SIZE=10><h4> Click the button to calculate your IJPD:</h4><INPUT NAME="calc" VALUE="Calculate" TYPE=BUTTON class="cbutton" onClick=iJPDCalc(this.form)><p>Your current combined IJPD for today is:</p> <INPUT NAME="I_JPD" class="output" style=" " id="coutput" READONLY SIZE=10></FORM>';
break
case(n="2"):
document.getElementById("content").innerHTML='<FORM><h2>Combined MJPD Calculator</h2><p>Trouble components completed today:</p><INPUT NAME="MJobs" VALUE="4.6" MAXLENGTH="10" SIZE=10><p>Hours taken to the jobs:</p><INPUT NAME="MTime" VALUE="8" MAXLENGTH="10" SIZE=10><h4> Click the button to calculate your MJPD:</h4><INPUT NAME="calc" VALUE="Calculate" TYPE=BUTTON class="cbutton" onClick=mJPDCalc(this.form); mjpdcolor();><p>Your current combined MJPD for today is:</p> <INPUT NAME="M_JPD" class="output" style=" " id="coutput" READONLY SIZE=10></FORM>';
break
case(n="3"):
alert('This page will now close...');
window.close();
break
default:
document.getElementById("content").innerHTML='<h1 style="padding-top: 40px; color: red;">You need to enter a value! Please try again...</h1>';
break
}
}
///////////////////////////////////////////////////////
</script>
</head>
<body onload="changeScreenSize(825,775)">
<div id="wrapper">
<div id="sub_wrapper">
<br />
<br />
<input type="button" class="button" onclick="startVZT3()" value="Start VZT3 Web!" />
<br /><br />
<div id="content">
<h3 style="padding-top:60px;">VZT3</h3>
</div>
</div>
<script type="text/javascript"> <!-- trying script to ensure function and dynamic update of this value - doesnt work 2/3/2010 -->
document.write(mjpdcolor());
</script>
</div>
</body>
OK, so on the last line of each case statement where it injects html code into the content div, in this code style=" background: ** ** " and in between the ** ** marks, I have added such things as <script type="text/javascript">document.write(mjpdcolor())</script> (or ijpdcolor, depending on which case I am working with). Theoretically, this should pull the value of MJPD (or IJPD), evaluate it for the if statement, then return the value of red or green and set the value of the background dynamically - but of course it doesnt. I have also tried different inline styles and even adding the css id and trying to link it to the mjpdcolor() function, but all to no avail. Can someone help me please?? Thanks everyone, your awesome! Code: <!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<script language="javascript" type="text/javascript">
alert (document.body);
</script>
</head>
<body>
</body>
</html>
EDIT: moved script to after body, and now it works. Not the way it should be done I think ? I'm trying to implement saving the document.body.scrollTop value and then restoring it but the restore does not work. The SetScrollLocation() alert line is empty. The save alert() lines displays a value so its saving the scrollTop but it seems to loose the value on the SetScrollLocation() call. I'm saving on an OnClick event and then restoring when the form reloads from a refresh. PHP Code: function SaveScrollLocation () { document.forms[0].frm_body_hidden.value = document.body.scrollTop; alert(document.forms[0].frm_body_hidden.value); } function SetScrollLocation () { alert(document.forms[0].frm_body_hidden.value); document.body.scrolltop = document.forms[0].frm_body_hidden.value; } This code not work, Code: if( document.body.scrollTop() > 200 ) {
$( '.navigation' ).addClass( 'fixed' );
} else {
$( '.navigation' ).removeClass( 'fixed' );
}
I want it to work without jQuery, because half my site die's when i use jQuery, jsut want a simple scrollTop script for when im 200px from top it locks navigation fixed top the top, it works with jQuery but not without and been trying for hours to get it to work, any help would be kindly recieve thanks. 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 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 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 ♫♫ 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! 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); } Quote: <html> <head> <script type="text/javascript"> var a = january var b = febuary var c = march function test() { document.getElementById("test").innerHTML=a; <!-- needs to be A on first function click, b on second, c on third, etc..^^--> } </script> </head> <body> <p id="test"></p> <!-- the <p> should go to next month upon each function --> <input type="button" value="asdf" onclick="test()" /> </body> </html> I tried to explain it pretty well in the comment tags, thanks! Hello, I am using AJAX and got the output from AJAX like the below line Ajax function Code: if (http_request.readyState == 4) {
if (http_request.status == 200) {
var_output = http_request.responseText;
document.getElementById('result').innerHTML = var_output; //value 100 displayed
}
else
{
alert('There was a problem with the request.');
}
}
In my javascript function, i need to get the value 100 from that innerHTML. Is it possible to get this value? Code: // I tried this way, but not working
var txt = document.getElementById('result').innerHTML;
or Store it in hidden field and get the value from javascript. Please suggest any idea to solve this problem Thanks hi guys, i am new to javascript and have a problem: I have an empty combobox, and two buttons. What i am trying to do is; adding 2 elements in to te combo box when i click on the button1. And i want to change these values with something else when i hit the button2. So far i can fill the combo box but i can not change the values when i click on the second button. Here is my code: Code: [HTML]<html>
<head>
<script type="text/javascript">
function ce(str)
{
document.getElementById("end").innerHTML=
"mySel.appendChild(document.createElement('option')).text=\""+str+"\";";
}
</script>
</head>
<body>
<h1>TryIt</h1>
<select id="mySel"><script id="end"></script></select>
<input type="button" value="Add" onclick="ce('try');">
<input type="button" value="Add2" onclick="ce('try again');">
</body>
</html>[/HTML]
I want to do this with javascript and using appendChild. If i try to send <option> tags within innerhtml it works but not whis way. why isnt it working? |
|||||||